/*!
 * ═══════════════════════════════════════════════════════════════════════════
 * LYNNTIMES DESIGN SYSTEM (v1).
 * Xem DESIGN-SYSTEM.md. Nạp SAU hospitality.css (config.php, dep ['hospitality'])
 * nên thắng cascade. Kế thừa token đã có (--primary-color, --fs-h*, --lyn-*),
 * BỔ SUNG phần thiếu: font Be Vietnam Pro cho type scale, spacing ramp, layout
 * editorial (hero cinematic, parallax, chapter, CTA gọn), khoảng thở lớn.
 *
 * MÀU: GIỮ CAM CHỦ ĐẠO #ee4023 như cũ (user chọn) — khối :root bên dưới đặt lại
 * đúng bảng màu cũ. KHÔNG đổi màu, chỉ nâng font + bố cục.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── FONT STACK ───────────────────────────────────────────────────────────────
   ⚠️ Be Vietnam Pro (woff2 trong /fonts/be-vietnam-pro) là subset LỖI: file
   *-vietnamese.woff2 == *-v2.woff2 (giống hệt, thiếu glyph) → thiếu ứ/ự/ệ/& v.v.
   → trình duyệt chồng font Segoe UI/Inter cho glyph thiếu → "chỗ đậm chỗ nhạt".
   Inter (đủ tiếng Việt, precomposed) đứng ĐẦU cho đồng bộ & sạch. Khi có file
   Be Vietnam Pro ĐẦY ĐỦ (đúng subset vietnamese) thì đưa lại lên đầu. ── */
/* ── FONT theo bản tham khảo Hoiana ──
   Bản gốc: --_typography---font--primary-family: Montserrat (chữ chính)
            --_typography---font--accent-family:  Raleway    (chữ nhấn/mô tả)
   Hoiana tải từ Google Fonts CDN; theme này TỰ HOST (cấm CDN) → .woff2 lấy từ
   @fontsource, khai trong fonts.css kèm unicode-range chuẩn.
   ✅ Đã kiểm: file *-vietnamese.woff2 KHÁC hẳn *-latin.woff2 (kích thước + md5)
      → không dính lỗi subset trùng như Be Vietnam Pro nêu ở trên.
   Inter giữ làm fallback đầu tiên (đủ tiếng Việt) phòng khi font chưa tải. */
:root {
    --font-display: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-accent: 'Raleway', 'Inter', system-ui, sans-serif;
}

/* ── SPACING RAMP (bổ sung; hiện chỉ có --lyn-section-y) ───────────────────── */
:root {
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --lyn-section-y: clamp(64px, 7vw, 112px);   /* thoáng hơn bản cũ (48–96) */
    --lyn-container: 1200px;
    --lyn-measure: 68ch;
    --lyn-radius-lg: 22px;
    --lyn-line: rgba(26, 43, 43, .12);
}

/* ── PALETTE "Onsen trầm" — fallback nếu Theme Options chưa đổi ────────────────
   css-variable-declare.blade.php đặt --primary-color... với !important từ theme_option.
   Để xem thử NGAY mà chưa vào admin, ta ghi đè các biến đó ở đây bằng !important
   (cùng độ ưu tiên, file này nạp sau → thắng). Khi đổi trong admin, chỉ cần xoá
   block này hoặc để admin ăn (giá trị khớp nhau). */
:root {
    /* ── GIỮ MÀU CAM CHỦ ĐẠO NHƯ CŨ (user chọn) ──
       Bằng đúng giá trị Theme Options cũ nên KHÔNG đổi màu, chỉ giữ font + layout mới.
       (Nếu muốn quay lại teal: xem git / DESIGN-SYSTEM.md.) */
    /* GOLD chủ đạo — swatch--brand-primary của bản tham khảo Hoiana.
       Đổi ở ĐÂY là toàn site tự theo (nút, giá, link, icon, viền…) vì mọi nơi
       dùng var(--primary-color) / rgba(var(--primary-color-rgb), …).
       Trước là cam #ee4023; muốn quay lại chỉ cần sửa 3 dòng này. */
    --primary-color:        #dda15e !important;   /* gold chủ đạo (nền nút, viền, icon) */
    --primary-color-hover:  #c88943 !important;
    --primary-color-rgb:    221, 161, 94 !important;
    /* ⚠️ TƯƠNG PHẢN: gold #dda15e trên nền trắng chỉ đạt 2.25:1 (WCAG cần 4.5:1
       cho chữ thường) → chữ mờ, khó đọc. Dùng sắc ĐẬM #af7432 (3.91:1, ngang cam
       cũ 3.89:1) cho CHỮ/LINK trên nền sáng; giữ #dda15e cho nền/viền/icon. */
    --primary-ink:          #af7432;
    --secondary-color:      #c9a24b !important;   /* vàng đồng (accent phụ, giữ như cũ) */
    --secondary-color-rgb:  201, 162, 75 !important;
    --heading-color:        #222222 !important;
    --text-color:           #444444 !important;
    --lyn-surface:          #ffffff !important;    /* nền trắng như cũ */
    --lyn-surface-2:        #f7f5f1;               /* xám kem rất nhạt cho section xen kẽ */
    --lyn-ink:              #1c1c1c !important;    /* than đen — footer/offers (như cũ) */
    --lyn-tint:             rgba(238, 64, 35, .045);
}

/* ── NỀN TRANG + MÀU CHỮ CƠ BẢN ───────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--lyn-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* 16px = cỡ chữ gốc của bản tham khảo (body{font-size:text-main} = 1rem).
       style.css của Travlla để 14px → cùng độ zoom, chữ site ta nhỏ hơn 12.5% và
       trông "bé, sâu" hơn hẳn. Mọi cỡ dùng rem/em ăn theo giá trị này. */
    font-size: 1rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — hệ phân cấp nhất quán (như H1/H2/H3 Word). DESIGN-SYSTEM.md §3.2.
   Kế thừa cỡ --fs-h* của hospitality.css, GẮN THÊM font-family + weight + tracking.
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-title, .widget-title, .trv-head-title {
    font-family: var(--font-display);
    color: var(--heading-color);
    text-wrap: balance;
    margin-top: 0;
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.20; letter-spacing: -.015em; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.30; letter-spacing: 0; }
h5, .h5 { font-size: var(--fs-h5); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
h6, .h6 { font-size: var(--fs-h6); font-weight: 600; line-height: 1.35; letter-spacing: 0; }

body, p, li, .lyn-card-body, .trv-content, input, textarea, select, button {
    font-family: var(--font-body);
}
p { line-height: 1.65; }

/* Đoạn dẫn (lead) — đứng đầu section/bài */
.lyn-lead, .lead {
    font-size: 1.12rem; line-height: 1.6; color: var(--text-color); font-weight: 400;
}

/* Bài viết dài: giới hạn bề rộng đọc ~68 ký tự + cỡ chữ dễ đọc */
.trv-content, .single-post-content, .post-content {
    max-width: var(--lyn-measure);
    font-size: 1.06rem;
    line-height: 1.75;
}

/* Eyebrow — nhãn CHỮ HOA vàng đồng trên tiêu đề section (nhịp editorial) */
.sub-title, .lyn-eyebrow, .lyn-hero-resort-eyebrow, .section-head .sub-title {
    font-family: var(--font-display);
    font-size: var(--fs-sub, .8rem);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADING — eyebrow + tiêu đề + mô tả, CĂN TRÁI (bỏ căn giữa mặc định —
   căn giữa mọi thứ là dấu hiệu "AI"). Giữ căn giữa chỉ cho hero.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-section .section-head,
.lyn-section .lyn-heading {
    text-align: left;
    max-width: 760px;
    margin-inline: 0 auto;   /* ghi đè margin-inline:auto (căn giữa) của hospitality.css */
    margin-bottom: var(--sp-7);
}
/* ép mọi phần tử con của heading căn trái (thắng .text-center còn sót nếu có) */
.lyn-section .section-head > *,
.lyn-section .lyn-heading > * { text-align: left; }
/* Eyebrow = 1 hàng flex RIÊNG (block-level, không inline cạnh h2) — gạch vàng + chữ */
.lyn-section .section-head .sub-title,
.lyn-section .lyn-heading .lyn-eyebrow {
    display: flex;              /* block-level flex → nằm trên dòng riêng */
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0 0 14px;
}
.lyn-section .section-head .sub-title::before,
.lyn-section .lyn-heading .lyn-eyebrow::before {
    content: "";
    width: 30px; height: 2px;
    background: var(--secondary-color);
    flex: 0 0 30px;
}
/* Tiêu đề section: block, căn trái, KHÔNG inline-block (thắng rule cũ dòng 686),
   bỏ gạch ::after trang trí cũ (đã có eyebrow lo phần accent). */
.lyn-section .section-title {
    display: block !important;
    color: var(--heading-color) !important;   /* trầm, sang — KHÔNG nhuộm primary như bản cũ */
    /* ĐỒNG BỘ với .lyn-*-title (mice/story/onsen...): thanh mảnh, uppercase, giãn chữ */
    font-family: var(--font-display);
    font-weight: 400 !important;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem) !important;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-wrap: balance;
    text-align: left;
}
.lyn-section .section-title::after { display: none !important; }   /* bỏ underline trang trí cũ */
.lyn-section .section-head p,
.lyn-section .lyn-heading p {
    margin-top: 12px;
    color: var(--text-color);
    font-size: 1.04rem;
    line-height: 1.6;
    max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NỀN SECTION XEN KẼ — phân đoạn bằng nền + khoảng trắng, không bằng đường kẻ.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-section { padding-block: var(--lyn-section-y); }
.lyn-section:nth-of-type(even) { background: var(--lyn-surface-2); }
/* Section tối (Offers) — điểm nghỉ thị giác */
.lyn-offers, .lyn-section--dark {
    background: var(--lyn-ink) !important;
    color: #E7E0D3;
}
.lyn-section.lyn-offers .section-title,
.lyn-section.lyn-section--dark .section-title { color: #F4EFE4 !important; }   /* thắng .lyn-section .section-title !important ở trên */
.lyn-offers .section-head p, .lyn-offers .section-description,
.lyn-section--dark .section-head p { color: #B9C2C0; }
/* Card ưu đãi trên nền tối: chữ sáng để đọc được (trước bị đen-trên-đen) */
.lyn-offers .lyn-card, .lyn-offers .lyn-card-offer,
.lyn-offers .lyn-resort-card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}
.lyn-offers .lyn-card-name, .lyn-offers .lyn-card-offer-name,
.lyn-offers .lyn-resort-card-name, .lyn-offers h3, .lyn-offers h4 { color: #F4EFE4 !important; }
.lyn-offers .lyn-card-body, .lyn-offers .lyn-card-desc,
.lyn-offers .lyn-card-body p { color: #B9C2C0 !important; }
.lyn-offers .lyn-price { color: var(--primary-color) !important; }   /* giá = vàng đồng sáng trên nền tối */

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON — teal đặc / viền teal. Bỏ bóng nặng, hover nâng nhẹ.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-btn, .trv-btn, .btn-primary {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 8px;
    padding: 13px 26px;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
    border: 1.5px solid transparent;
}
.lyn-btn--primary, .btn-primary {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.lyn-btn--primary:hover, .btn-primary:hover {
    background: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(238, 64, 35, .22);
}
.lyn-btn--outline, .lyn-btn--ghost {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.lyn-btn--outline:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}
/* Nút trên nền tối/hero */
.lyn-hero-resort .lyn-btn--outline,
.lyn-section--dark .lyn-btn--outline {
    color: #fff; border-color: rgba(255,255,255,.55);
}
.lyn-hero-resort .lyn-btn--outline:hover {
    background: #fff; color: var(--primary-color); border-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD — viền mảnh, radius, hover nâng + ảnh zoom nhẹ.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-card, .lyn-resort-card, .lyn-news-card {
    background: var(--lyn-surface);
    border: 1px solid var(--lyn-line);
    border-radius: var(--lyn-radius, 14px);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lyn-card:hover, .lyn-resort-card:hover, .lyn-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lyn-shadow-hover, 0 14px 38px rgba(0,0,0,.12));
    border-color: rgba(238, 64, 35, .2);
}
.lyn-card-media, .lyn-news-media, .lyn-resort-card-media { overflow: hidden; }
.lyn-card-media img, .lyn-news-media img, .lyn-resort-card-media img {
    transition: transform .55s ease;
    width: 100%; height: 100%; object-fit: cover;
}
.lyn-card:hover .lyn-card-media img,
.lyn-news-card:hover .lyn-news-media img,
.lyn-resort-card:hover .lyn-resort-card-media img { transform: scale(1.045); }

/* Tên card = H3; giá = accent teal */
.lyn-card-body .lyn-card-name, .lyn-resort-card-name, .lyn-news-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--heading-color);
    line-height: 1.3;
}
.lyn-price { color: var(--primary-color); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — full-bleed (đã có .lyn-hero-resort). Tinh chỉnh overlay trầm + chữ.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-hero-resort-overlay {
    background: linear-gradient(180deg, rgba(20,32,31,.18) 0%, rgba(20,32,31,.30) 45%, rgba(20,32,31,.62) 100%) !important;
}
.lyn-hero-resort-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.lyn-hero-resort-eyebrow { color: #EBD9B4; }   /* vàng đồng sáng trên ảnh */
.lyn-hero-resort-desc { color: rgba(255,255,255,.9); font-size: 1.1rem; line-height: 1.6; }

/* ── LINK ─────────────────────────────────────────────────────────────────── */
/* Link dùng sắc ĐẬM (--primary-ink) cho đủ tương phản trên nền sáng — gold
   #dda15e trên trắng chỉ 2.25:1, dưới chuẩn WCAG. Xem ghi chú ở khối token. */
a { color: var(--primary-ink); }
a:hover { color: var(--primary-color-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — giữ đồng bộ (skill: design cả 2 theme). Áp khi OS tối HOẶC
   người dùng bật toggle (data-theme). Không đảo ngược thô — giữ tương phản đọc được.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color:       #3E9B9E !important;
        --primary-color-hover: #52B0B3 !important;
        --primary-color-rgb:   62, 155, 158 !important;
        --secondary-color:     #C9A468 !important;
        --heading-color:       #EDE7DB !important;
        --text-color:          #B9C2C0 !important;
        --lyn-surface:         #14201F !important;
        --lyn-surface-2:       #1B2A29;
        --lyn-ink:             #0E1817 !important;
        --lyn-line:            rgba(237, 231, 219, .12);
    }
}
:root[data-theme="dark"] {
    --primary-color:       #3E9B9E !important;
    --primary-color-hover: #52B0B3 !important;
    --primary-color-rgb:   62, 155, 158 !important;
    --secondary-color:     #C9A468 !important;
    --heading-color:       #EDE7DB !important;
    --text-color:          #B9C2C0 !important;
    --lyn-surface:         #14201F !important;
    --lyn-surface-2:       #1B2A29;
    --lyn-ink:             #0E1817 !important;
    --lyn-line:            rgba(237, 231, 219, .12);
}

/* ── MOTION — tôn trọng prefers-reduced-motion (bổ trợ; hospitality-reveal.js đã có) ── */
@media (prefers-reduced-motion: reduce) {
    .lyn-btn, .lyn-card, .lyn-card-media img { transition: none !important; }
    .lyn-hero-resort-media { animation: none !important; }

    /* Header + mega-menu: tắt mọi chuyển động, chỉ giữ ẩn/hiện tức thì.
       Người bật "giảm chuyển động" thường nhạy với trượt/fade kéo dài. */
    .site-header.header-style-1,
    .site-header.header-style-1 .main-bar,
    .site-header.header-style-1 .main-bar-wraper,
    .header-nav .nav > li > a,
    .header-nav .nav > li > a::after,
    .trv-switcher-toggle,
    .trv-switcher-current::after,
    .lyn-mega,
    .lyn-mega-panel,
    .lyn-mega-links a,
    .lyn-mega-arrow,
    .lyn-mega-all a span {
        transition: none !important;
    }
    /* Bỏ luôn phần trượt vị trí (giữ đổi màu — đó không phải chuyển động). */
    .lyn-mega-links a:hover,
    .lyn-mega-all a:hover span,
    .lyn-mega-links a:hover .lyn-mega-arrow {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT REBUILD — bố cục editorial theo gu Hoiana (KHÔNG chỉ đổi màu).
   Đã bóc layout thật của hoiana.com: hero 100vh cinematic, text overlay bất đối
   xứng, whitespace lớn, heading mảnh wide-track cho câu statement, CTA text+arrow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO CINEMATIC — full màn hình, text căn GIỮA theo chiều dọc (dùng khoảng trống
   trên, không dồn đáy). Chừa đáy đủ cho booking bar để không cắt/đè nhau. ──── */
.lyn-hero-resort {
    min-height: 100svh !important;      /* full viewport như Hoiana (svh: trừ thanh địa chỉ mobile) */
    align-items: center !important;     /* căn giữa dọc → khối chữ lên cao, cân đối */
}
.lyn-hero-resort-inner {
    /* Bề rộng/lề do foundation.css lo (cùng cơ chế .u-container: width calc +
       margin auto, KHÔNG padding ngang). Ở đây CHỈ đặt đệm DỌC.
       Trước đây hardcode max-width 1200px + padding ngang 22px → lệch với
       container 1248px mới và chữ thụt thêm so với nội dung section. */
    width: 100%;
    /* Đệm đáy = chiều cao booking bar (~92px) + thở, để chữ không đè lên thanh. */
    padding-block: clamp(40px, 6vh, 80px) !important;
    padding-bottom: 150px !important;
}
/* Eyebrow mảnh, không viền pill (Hoiana không bọc khung) */
.lyn-hero-resort-eyebrow {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    margin-bottom: 20px !important;
    font-size: .75rem !important;
    letter-spacing: .07em !important;   /* letter-spacing--0-07em của Hoiana */
    text-transform: uppercase !important;
    color: #fff !important;             /* bản gốc dùng trắng mờ, không vàng */
    opacity: .85;
}
/* Tiêu đề hero — bám sát bản tham khảo Hoiana:
   .hero_heading{color:var(--swatch--brand-primary)} → chữ GOLD, KHÔNG phải trắng;
   weight 300 (thin display), UPPERCASE, tracking DƯƠNG cho thoáng chữ. */
.lyn-hero-resort-title {
    font-size: clamp(2.8rem, 6.4vw, 5.4rem) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #dda15e !important;          /* swatch--brand-primary của Hoiana */
    text-shadow: 0 2px 24px rgba(0,0,0,.35) !important;
    max-width: 20ch;                    /* nới vì uppercase chiếm nhiều bề ngang hơn */
}
/* Dòng phụ (subtitle trong <span>): giữ TRẮNG + thường để phân cấp rõ —
   tên brand gold, mô tả ngắn trắng. Bản gốc cũng tách 2 sắc như vậy. */
.lyn-hero-resort-title span {
    font-weight: 300 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    color: #fff !important;
    opacity: .95;
}
.lyn-hero-resort-desc {
    max-width: 42ch !important;         /* cắt bề rộng đọc như Hoiana (u-max-width-34ch) */
    font-size: 1.12rem !important;
    color: rgba(255,255,255,.88) !important;
}
/* (Không style CTA hero: shortcode hero-search của trang chủ KHÔNG đặt
   primary_action_label nên .lyn-hero-resort-actions không render. Bản gốc có
   link "PLAN YOUR ESCAPE →" — muốn có thì thêm label trong admin, đó là DATA
   nên không tự thêm ở đây.) */

/* Scrim nhẹ hơn bản cũ (đáy .72 → .52): Hoiana để ảnh/video nổi rõ, chỉ tối vừa
   đủ cho chữ đọc được. Vẫn giữ đậm hơn ở đáy vì booking bar nằm đó. */
.lyn-hero-resort-overlay {
    background: linear-gradient(180deg, rgba(20,32,31,.24) 0%, rgba(20,32,31,.08) 32%, rgba(20,32,31,.16) 60%, rgba(20,32,31,.52) 100%) !important;
}
/* Media có parallax: JS lo transform → tắt Ken-Burns (tránh 2 transform đè nhau),
   scale sẵn 1.15 để dịch chuyển không hở mép. */
.lyn-hero-resort-media[data-parallax] {
    animation: none !important;
    transform: scale(1.15);
    will-change: transform;
    top: -8%; height: 116%;   /* dư trên/dưới cho biên độ dịch */
}

/* ── SECTION RHYTHM — khoảng thở lớn hơn (Hoiana section-spacer) ─────────────── */
.lyn-section { padding-block: clamp(80px, 9vw, 150px) !important; }
.lyn-section .container { max-width: var(--lyn-container); }

/* ── CTA TEXT + ARROW — kiểu "PLAN YOUR ESCAPE →" của Hoiana (song song nút đặc) ── */
.lyn-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-color);
    padding-bottom: 4px;
    border-bottom: 1.5px solid transparent;
    transition: border-color .25s ease, gap .25s ease, color .25s ease;
}
.lyn-link-arrow::after {
    content: "→";
    font-size: 1.05em;
    transition: transform .25s ease;
}
.lyn-link-arrow:hover { border-bottom-color: var(--primary-color); gap: 14px; color: var(--primary-color-hover); }
.lyn-link-arrow:hover::after { transform: translateX(3px); }
.lyn-section--dark .lyn-link-arrow, .lyn-chapter .lyn-link-arrow { color: #EBD9B4; }
.lyn-section--dark .lyn-link-arrow:hover, .lyn-chapter .lyn-link-arrow:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER SECTION — 1 khối ảnh tràn viền + text overlay bất đối xứng.
   Bắt chước khối "FEEL YOUR WAY" của Hoiana. Dùng cho intro/wellness statement.
   Markup: .lyn-chapter > .lyn-chapter-media (ảnh) + .lyn-chapter-overlay
           + .lyn-chapter-inner (.lyn-chapter-title / -desc / link)
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-chapter {
    position: relative;
    min-height: clamp(560px, 82vh, 860px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}
.lyn-chapter-media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.02);
}
.lyn-chapter-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20,32,31,.62) 0%, rgba(20,32,31,.30) 42%, rgba(20,32,31,.08) 100%);
}
.lyn-chapter-inner {
    position: relative; z-index: 2;
    max-width: var(--lyn-container);
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1.1fr .9fr;   /* heading trái to, text phải nhỏ — bất đối xứng */
    gap: clamp(24px, 5vw, 80px);
    align-items: end;
}
.lyn-chapter-eyebrow {
    font-family: var(--font-display);
    font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    color: #EBD9B4; margin-bottom: 16px; display: block;
}
.lyn-chapter-title {
    font-family: var(--font-display);
    font-weight: 300;                    /* MẢNH + to = statement sang (như FEEL YOUR WAY) */
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    line-height: 1.05; letter-spacing: -.01em;
    color: #fff; margin: 0; text-wrap: balance;
}
.lyn-chapter-desc {
    font-size: 1.06rem; line-height: 1.7; color: rgba(255,255,255,.9);
    max-width: 40ch; margin: 0 0 22px;
}
@media (max-width: 768px) {
    .lyn-chapter-inner { grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .lyn-chapter { min-height: 70vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA / CONTACT cuối trang (khối trv-contact) — thiết kế lại cho liền mạch, sang.
   Bỏ ảnh cắt chéo + khối lơ lửng cũ. 2 cột: trái = panel ảnh + info (overlay teal),
   phải = form nền kem. Bo góc lớn, đổ bóng mềm, nằm trong container có khoảng thở.
   ═══════════════════════════════════════════════════════════════════════════ */
.trv-contact-form {
    max-width: var(--lyn-container);
    margin: 0 auto;
    border-radius: var(--lyn-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(20,32,31,.16);
    background: var(--lyn-surface);
}
.trv-contact-form > .row { margin: 0; align-items: stretch; }
.trv-contact-form > .row > [class*="col-"] { padding: 0; }

/* ── Cột trái: panel ảnh + overlay teal (bỏ diagonal) ── */
.trv-cot-media-section {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    min-height: 100%;
    display: flex;
    align-items: center;
    padding: clamp(32px, 4vw, 60px);
    color: #fff;
    clip-path: none !important;          /* bỏ mọi cắt chéo cũ */
}
.trv-cot-media-section::before {        /* overlay teal trầm cho chữ nổi */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(150deg, rgba(238,64,35,.80) 0%, rgba(28,28,28,.84) 100%);
}
.trv-cot-media-info { position: relative; z-index: 2; width: 100%; }
.trv-cot-media-section .trv-subtitle {
    font-family: var(--font-display);
    font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: #EBD9B4; margin: 0 0 14px;
}
.trv-cot-media-section .trv-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 700; line-height: 1.15;
    color: #fff; margin: 0 0 28px; letter-spacing: -.01em; text-wrap: balance;
}
.trv-contact-info-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.trv-contact-info-list li {
    display: flex; align-items: center; gap: 12px;
    font-size: .98rem; color: rgba(255,255,255,.92);
}
.trv-contact-info-list li i {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.12); color: #EBD9B4; font-size: 1rem;
}
.trv-contact-info-list a { color: rgba(255,255,255,.92); }
.trv-contact-info-list a:hover { color: #fff; }
/* nút "Liên hệ ngay" trên panel */
.trv-cot-media-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: .82rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; padding: 13px 26px;
    border: 1.5px solid rgba(255,255,255,.5); border-radius: 8px;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.trv-cot-media-btn:hover { background: #fff; color: var(--primary-color); border-color: #fff; transform: translateY(-2px); }

/* ── Cột phải: form nền kem ── */
.trv-contact-right-part {
    background: var(--lyn-surface);
    padding: clamp(32px, 4vw, 60px);
    height: 100%;
}
.trv-contact-right-part .trv-head-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; color: var(--heading-color);
    margin: 0 0 10px; letter-spacing: -.01em;
}
.trv-contact-right-part .trv-head-discription { color: var(--text-color); margin-bottom: 26px; line-height: 1.6; }
.trv-contact-right-part .form-group { margin-bottom: 16px; }
.trv-contact-right-part .form-control {
    width: 100%;
    font-family: var(--font-body); font-size: .98rem;
    color: var(--heading-color);
    background: #fff;
    border: 1px solid var(--lyn-line);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.trv-contact-right-part .form-control::placeholder { color: #8a9694; }
.trv-contact-right-part .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .12);
}
.trv-contact-right-part textarea.form-control { min-height: 120px; resize: vertical; }
/* nút gửi = lyn-btn primary */
.trv-contact-right-part .site-button, .trv-contact-right-part button[type="submit"] {
    font-family: var(--font-display); font-weight: 600; letter-spacing: .01em;
    background: var(--primary-color); color: #fff; border: 0;
    border-radius: 8px; padding: 14px 32px; margin-top: 6px;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}
.trv-contact-right-part .site-button:hover, .trv-contact-right-part button[type="submit"]:hover {
    background: var(--primary-color-hover); transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(238,64,35,.22);
}
@media (max-width: 991px) {
    .trv-cot-media-section { min-height: 300px; }
}

/* ── CTA wrapper .lyn-cta-contact (blade đã bỏ htmlAttributes → hết ảnh diagonal full-bleed).
   Nền kem nhạt cho cả dải, khối form bo góc nổi lên, có khoảng thở. ── */
.lyn-cta-contact {
    background: var(--lyn-surface-2);
    padding-block: clamp(70px, 8vw, 130px);
    padding-inline: clamp(16px, 4vw, 32px);
}
.lyn-cta-contact .trv-contact-map { max-width: var(--lyn-container); margin-inline: auto; }
/* phòng khi vẫn còn wrapper data-block-id bọc ngoài mang ảnh nền — tắt nốt */
[data-block-id="cta"] { background-image: none !important; background-color: var(--lyn-surface-2) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BANNER v2 (yêu cầu user) — full 100vw×100vh, menu sát đỉnh, FAB desktop,
   thanh đặt phòng sticky dưới chân hero (bỏ scroll-hide), parallax 1 ảnh chiều sâu.
   Cơ chế/tinh thần giống trang chủ hoiana.com/vn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. MENU SÁT ĐỈNH — bỏ khoảng cách top:35px của theme gốc ── */
.header-style-1:not(.header-inner) {
    top: 0 !important;              /* trước là 35px → menu cách đỉnh */
    padding-top: 6px;
}
/* Header TRONG SUỐT (trang chủ + trang giới thiệu điểm đến) — nền hoàn toàn trong suốt,
   đè trực tiếp trên hero. Đảm bảo trang mẹ và trang điểm đến GIỐNG HỆT nhau (không dải trắng).
   Khi cuộn xuống (.is-fixed) thì rule khác cho nền trắng — không đụng ở đây. */
.header-style-1.header-transparent:not(.is-fixed),
.header-style-1.header-transparent:not(.is-fixed) .main-bar,
.header-style-1.header-transparent:not(.is-fixed) .main-bar-wraper {
    background: transparent !important;
    box-shadow: none !important;
}
/* Desktop: menu inline → bỏ nền trắng của .header-nav .nav (dải trắng sau menu).
   Mobile giữ nền (drawer xổ ra cần nền đọc được) nên chỉ áp ≥992px. */
@media (min-width: 992px) {
    .header-style-1.header-transparent:not(.is-fixed) .header-nav,
    .header-style-1.header-transparent:not(.is-fixed) .header-nav .nav {
        background: transparent !important;
        box-shadow: none !important;
    }
}
/* ── MENU / NAV theo bản tham khảo Hoiana ──
   Bản gốc: .header_nav_link{font-weight:600; letter-spacing:.07em; uppercase}
   + .header_nav_link_line{background:brand-primary; height:.06rem; width 0→100%}.
   Theme đã có sẵn .trv-nev-line1/2 làm gạch chân → chỉ đổi MÀU + easing,
   KHÔNG dựng lại cơ chế (giữ nguyên luồng/markup). */
.header-style-1 .header-nav .nav > li > a {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    /* 1rem = 16px. Bản gốc: .header_nav_link KHÔNG khai báo font-size → kế thừa
       body{font-size:var(--_text-style---font-size)} = text-main = clamp(1rem…1rem).
       (Đã xác nhận trong hoiana-dev.shared.min.css + DevTools bản gốc: dòng
       body{font-size:14px} bị gạch ngang, giá trị thắng là 1rem.)
       Trước đó tôi để 13px rồi 14px — đều nhỏ hơn bản gốc. */
    font-size: 1rem;
    transition: color .4s cubic-bezier(.625,.05,0,1);
}
/* Trên header TRONG SUỐT (đè lên hero): chữ TRẮNG như bản gốc — menu cam trên
   ảnh nền sáng bị chìm. Chỉ áp khi chưa cuộn (:not(.is-fixed)); cuộn xuống
   header thành nền trắng nên giữ màu mặc định của theme. */
/* Màu chữ menu. hospitality.css:1136 đặt color:var(--primary-color) !important
   → phải !important mới thắng (đã xác định bằng CSS.getMatchedStylesForNode).
   CHỈ ≥992px: mobile menu xổ ra drawer NỀN TRẮNG → chữ trắng sẽ vô hình. */
@media (min-width: 992px) {
    .header-style-1.header-transparent:not(.is-fixed) .header-nav .nav > li > a {
        color: #fff !important;
    }
    .header-style-1.header-transparent:not(.is-fixed) .header-nav .nav > li > a:hover,
    .header-style-1.header-transparent:not(.is-fixed) .header-nav .nav > li.current-menu-item > a,
    .header-style-1.header-transparent:not(.is-fixed) .header-nav .nav > li.active > a {
        color: #dda15e !important;
    }
}
/* ── FIX TRÀN NGANG: panel "Info" (.xs-sidebar-group) trượt từ phải khi đóng
   dùng visibility:hidden + opacity:0 nhưng VẪN CHIẾM CHỖ ở x≈2670..3155 →
   scrollWidth phình lên 2961px (viewport 1585) → trang bị kéo ngang, nhìn như
   "lệch và tràn padding" khi cuộn.
   body có overflow-x:hidden nhưng <html> thì visible nên vẫn sinh thanh cuộn.
   Cho panel position:fixed để KHÔNG tính vào chiều rộng tài liệu; khi mở
   (.isActive) trả lại hiển thị bình thường. ── */
.xs-sidebar-group .sidebar-widget-container {
    position: fixed;
    top: 0;
    right: 0;
    max-width: 100vw;
}
/* Chặn tràn ngang ở gốc tài liệu (body đã hidden, html thì chưa). */
html {
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NGUYÊN TẮC HEADER KHI CUỘN (user chốt):
   Trạng thái ở TOP là chuẩn. Cuộn xuống chỉ đổi DUY NHẤT màu nền
   (trong suốt → kem). MỌI thứ khác giữ nguyên: cỡ chữ, padding, bề rộng,
   vị trí. Nhờ vậy không có gì dịch chuyển → không giật.

   Theme gốc đổi padding mục menu 30px/20px → 12px/15px !important khi .is-fixed,
   làm mỗi mục hẹp/rộng đi và menu giãn thêm ~180px. Khoá lại ở đây.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    /* Giữ NGUYÊN padding mục menu ở mọi trạng thái cuộn (khớp giá trị bố cục
       2 hàng: ngang 0 vì khoảng cách do gap lo, dọc 10/14px). */
    .header-style-1.is-fixed .main-bar.lyn-header--2row .header-nav .nav > li > a,
    .header-style-1.is-fixed.mobile-sider-drawer-menu .main-bar.lyn-header--2row .header-nav .nav > li > a,
    .header-style-1.header-inner .main-bar.lyn-header--2row .header-nav .nav > li > a {
        padding: 10px 0 14px !important;
    }
    /* Giữ nguyên kích thước thanh khi cuộn — VÀ dùng ĐÚNG cơ chế container mới
       (width calc + margin auto, KHÔNG padding). Trước đây đặt lại
       padding-left/right = gutter nên khi cuộn logo/menu thụt vào 233 trong khi
       nội dung section ở 169 → lệch 64px. */
    .header-style-1.is-fixed .main-bar.lyn-header--2row,
    .header-style-1.header-inner .main-bar.lyn-header--2row {
        width: calc(100% - var(--lyn-gutter) * 2) !important;
        max-width: var(--lyn-container);
        margin-inline: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER KHI ĐÃ CUỘN (.is-fixed) — FULL-WIDTH, PHẲNG, không bo góc/viền
   (đúng bản tham khảo: thanh kem đặc trải hết bề ngang, không thụt vào).
   Trước đó: #header_main bo 0 0 30px 30px + thụt 35px mỗi bên, .main-bar bo 20px
   → trông như một thẻ nổi, khác hẳn bản gốc.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Chuyển tiếp khi header đổi trạng thái (trong suốt ↔ nền kem lúc cuộn).
   Bản gốc: .header{transition:background-color .6s}. Thêm cả bo góc + bóng để
   không "nhảy" đột ngột. Đặt ở trạng thái THƯỜNG để mượt theo CẢ hai chiều. */
.header-style-1.sticky-header,
.site-header.header-style-1 .main-bar,
.site-header.header-style-1 .main-bar-wraper {
    /* CHỈ transition MÀU NỀN + BÓNG. Không animate hình dạng (border-radius,
       width, padding) — đó là nguyên nhân GIẬT:
       #header_main đổi bề rộng 35..1550 → 0..1585 TỨC THÌ, trong khi .main-bar
       bò bo góc 20px → 0 suốt 540ms. Nửa giây đó thanh đã full-width nhưng hai
       đầu vẫn bo tròn → nhìn như "hai khoảng trống hai bên" rồi mới phẳng ra.

       ⚠️ CHIỀU XUỐNG KHÔNG TRANSITION NỀN: .is-fixed bật TỨC THÌ nên header lập
       tức đè lên nội dung. Nếu nền mờ dần thì có một khoảng chữ trang chạy XUYÊN
       QUA header — rất xấu. Đo được: t+60ms đã FIXED nhưng nền vẫn rgba(0,0,0,0).
       → Nền hiện NGAY khi fixed (không delay), chỉ transition lúc cuộn LÊN
       (trạng thái thường, khai ở rule dưới) để mờ dần về trong suốt. */
    transition: box-shadow .25s ease-out !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO — DÙNG MỘT BẢN DUY NHẤT, tô màu bằng CSS.
   Theme gốc đổi giữa 2 FILE ảnh khác nhau (logo.png màu 191px ↔ bản trắng 169px)
   → logo NHẢY kích thước khi cuộn, góp phần gây cảm giác giật.
   Nay: luôn hiển thị bản trắng (kích thước cố định), khi cuộn thì tô GOLD bằng
   mask-image — lấy hình dạng từ chính file PNG, đổ màu nền lên. Cách này cho
   màu CHÍNH XÁC (#dda15e) thay vì xấp xỉ như chuỗi filter sepia/hue-rotate.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    /* DÙNG MỘT BẢN LOGO DUY NHẤT (bản trắng) ở cả hai trạng thái → kích thước
       tuyệt đối không đổi, chuyển trạng thái mượt.
       Khi cuộn: tô thành GOLD bằng `brightness(0) drop-shadow`.
       ⚠️ Vì sao KHÔNG dùng mask-image (đã thử, user phản hồi xấu): mask lấy alpha
       làm mặt nạ nên nét mảnh + dòng chữ nhỏ "THANH THUY" bị ăn mòn → mờ, mất nét.
       Cách này khác: brightness(0) biến logo thành đen NHƯNG GIỮ NGUYÊN alpha và
       anti-alias, rồi drop-shadow bán kính 0 đổ đúng màu gold lên hình dạng đó
       → nét sắc y như ảnh gốc. */
    .header-style-1.is-fixed .logo-variant--light,
    .header-style-1.sticky-header.is-fixed .logo-variant--light {
        display: inline-flex !important;
    }
    .header-style-1.is-fixed .logo-variant--dark,
    .header-style-1.sticky-header.is-fixed .logo-variant--dark {
        display: none !important;
    }
    /* Chuỗi filter biến TRẮNG → GOLD #dda15e, giữ nguyên anti-alias:
       brightness(0)      → đen tuyền (alpha/nét giữ nguyên)
       invert + sepia     → nền nâu vàng cơ bản
       saturate/hue-rotate/brightness → chỉnh về đúng sắc gold.
       Khác mask-image ở chỗ KHÔNG lấy alpha làm ngưỡng nên chữ nhỏ vẫn sắc. */
    .header-style-1.is-fixed .logo-variant--light img {
        filter: brightness(0) invert(72%) sepia(31%) saturate(760%)
                hue-rotate(340deg) brightness(95%) contrast(88%);
        /* Cùng nhịp .25s với nền header, nếu không logo đổi màu lệch pha. */
        transition: filter .25s ease-out;
    }
}

/* Thanh header FULL-WIDTH + PHẲNG ở MỌI trạng thái (top và đã cuộn).
   Nhờ vậy cuộn chỉ đổi DUY NHẤT màu nền — không có gì dịch chuyển, không giật.
   Ở top nền trong suốt nên không nhìn thấy thanh; cuộn xuống hiện nền kem. */
.header-style-1.sticky-header,
.header-style-1.header-inner {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: none !important;
}
/* Chỉ khi CUỘN mới hiện nền kem (#fff8f0 như bản gốc).
   Nền hiện TỨC THÌ (không transition) để không có khung hình nào header đã đè
   lên nội dung mà nền còn trong suốt → hết lộ chữ phía sau. */
.header-style-1.sticky-header.is-fixed,
.header-style-1.header-inner {
    background-color: #fff8f0 !important;
}
/* Chiều CUỘN LÊN (rời .is-fixed): mờ dần về trong suốt cho mượt. Chỉ áp ở
   trạng thái thường nên không ảnh hưởng lúc nền cần hiện ngay. */
.header-style-1.sticky-header:not(.is-fixed) {
    transition: background-color .35s ease-out,
                box-shadow .25s ease-out !important;
}
/* Bỏ bo góc + nền của lớp trong ở MỌI trạng thái — nền do header lo,
   .main-bar chỉ là lớp căn lề (giữ max-width 1248px để thẳng với section). */
.header-style-1 .main-bar-wraper,
.header-style-1 .main-bar {
    border-radius: 0 !important;
    background: transparent !important;
}

/* Header NỀN TRẮNG (đã cuộn .is-fixed, hoặc trang phụ .header-inner):
   hospitality.css:1136 để chữ menu = var(--primary-color) → quay lại CAM, lệch
   hẳn với phần còn lại đã sang gold. Ép trung tính, hover/active gold. */
.header-style-1.is-fixed .header-nav .nav > li > a,
.header-style-1.header-inner .header-nav .nav > li > a {
    color: var(--heading-color) !important;
}
.header-style-1.is-fixed .header-nav .nav > li > a:hover,
.header-style-1.is-fixed .header-nav .nav > li.current-menu-item > a,
.header-style-1.is-fixed .header-nav .nav > li.active > a,
.header-style-1.header-inner .header-nav .nav > li > a:hover,
.header-style-1.header-inner .header-nav .nav > li.current-menu-item > a,
.header-style-1.header-inner .header-nav .nav > li.active > a {
    color: #af7432 !important;
}

/* Gạch chân: theme dùng ::after (scaleX 0→1), KHÔNG phải .trv-nev-line*.
   Đổi MÀU sang gold + mảnh (.06rem ≈ 1px), giữ nguyên cơ chế transform.

   ⚠️ VỊ TRÍ: thẻ <a> cao 80px (padding dọc 30px) trong khi chữ chỉ ~19.5px,
   nên `bottom:6px` cũ đẩy gạch xuống cách chân chữ tới ~36px ("xa tít ở dưới").
   Bản gốc đặt inset:auto auto 0% 0% trên thẻ ôm SÁT chữ → gạch ngay dưới chữ.
   Ở đây quy ra: chân chữ ≈ 80 - 30 = 50px tính từ đỉnh, tức bottom ≈ 30px.
   Trừ 4px cho thoáng → bottom: 26px. */
.header-nav > ul > li > a::after {
    background: #dda15e;
    height: 1px;
    bottom: 26px;
    left: 10px;
    right: 10px;
}
/* MOBILE (drawer): thẻ <a> thấp hơn desktop nhiều → bottom:26px sẽ cắt NGANG
   chữ (trông như gạch xoá). Trả gạch về sát đáy thẻ. */
@media (max-width: 1399.98px) {
    .header-nav > ul > li > a::after {
        bottom: 6px;
    }
}

/* Nút BOOK NOW: bo tròn hoàn toàn, nền gold, chữ teal đậm (đúng cặp màu bản gốc). */
.header-style-1 .trv-new-info-btn {
    background-color: #dda15e !important;
    border-color: #dda15e !important;
    color: #00504b !important;
    border-radius: 100vw !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    transition: background-color .4s cubic-bezier(.625,.05,0,1),
                border-color .4s cubic-bezier(.625,.05,0,1);
}
.header-style-1 .trv-new-info-btn:hover {
    background-color: #c88943 !important;
    border-color: #c88943 !important;
    color: #00504b !important;
}

/* Switcher (ngôn ngữ / điểm đến): chữ hoa nhỏ, đồng bộ với nav. */
.header-style-1 .trv-switcher-toggle {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
    transition: color .4s cubic-bezier(.625,.05,0,1),
                background-color .4s cubic-bezier(.625,.05,0,1),
                border-color .4s cubic-bezier(.625,.05,0,1);
}

/* Switcher điểm đến trên header TRONG SUỐT: chữ trắng như mục menu khác.
   ⚠️ ĐÃ GỠ rule hover đổ nền gold + viền — tàn dư từ hồi nó còn là NÚT. Nay nó
   là MỤC MENU: hover chỉ đổi màu chữ (rule chung bên dưới lo), nếu đổ nền thì
   gạch chân gold bị chìm vào nền cùng màu → trông như mất gạch. */
@media (min-width: 992px) {
    .header-transparent:not(.is-fixed) .lyn-dest-switcher .trv-switcher-toggle {
        color: #fff !important;
    }
    /* Hover/mở → gold. Phải khai ở ĐÂY vì selector .header-transparent có
       specificity cao hơn rule chung bên dưới, nếu không chữ vẫn trắng. */
    .header-transparent:not(.is-fixed) .lyn-dest-switcher .trv-switcher-toggle:hover,
    .header-transparent:not(.is-fixed) .lyn-dest-mega:hover .trv-switcher-toggle,
    .header-transparent:not(.is-fixed) .lyn-dest-mega.is-open .trv-switcher-toggle {
        color: #dda15e !important;
    }

    /* ⚠️ ĐỔI MÀU CHỮ TỨC THÌ khi vào .is-fixed — phải KHỚP nhịp với nền (nền
       hiện ngay, không transition). Đo được khi chữ còn transition .4s:
         t+60ms  nền ĐÃ đục nhưng chữ vẫn TRẮNG → gần như vô hình trên nền kem
         t+420ms chữ mới về đen
       Gần 0.4s chữ trắng nằm trên nền kem → nhìn như chữ biến mất rồi hiện lại.
       Transition cho HOVER vẫn giữ (khai riêng ở các rule :hover). */
    .is-fixed .header-nav .nav > li > a,
    .is-fixed .lyn-dest-switcher .trv-switcher-toggle,
    .is-fixed .lyn-dest-switcher .trv-switcher-caret,
    .is-fixed .lyn-dest-switcher .trv-switcher-current,
    .header-inner .header-nav .nav > li > a,
    .header-inner .lyn-dest-switcher .trv-switcher-toggle,
    .header-inner .lyn-dest-switcher .trv-switcher-caret {
        transition: none !important;
    }
    /* Trả lại transition cho HOVER: lúc này header đã ổn định ở .is-fixed nên
       không còn nguy cơ lệch nhịp với nền, mà vẫn giữ phản hồi mượt khi rê chuột. */
    .is-fixed .header-nav .nav > li > a:hover,
    .is-fixed .lyn-dest-switcher:hover .trv-switcher-toggle,
    .is-fixed .lyn-dest-switcher:hover .trv-switcher-caret,
    .header-inner .header-nav .nav > li > a:hover,
    .header-inner .lyn-dest-switcher:hover .trv-switcher-toggle,
    .header-inner .lyn-dest-switcher:hover .trv-switcher-caret {
        transition: color .4s cubic-bezier(.625,.05,0,1) !important;
    }

    /* Header ĐÃ CUỘN (.is-fixed, nền trắng) hoặc trang phụ (.header-inner):
       chữ trung tính, hover/mở → gold ĐẬM cho đủ tương phản trên nền trắng.
       Thiếu khối này thì khi cuộn chữ vẫn đen trong khi caret đã gold → lệch. */
    .is-fixed .lyn-dest-switcher .trv-switcher-toggle,
    .header-inner .lyn-dest-switcher .trv-switcher-toggle {
        color: var(--heading-color) !important;
    }
    .is-fixed .lyn-dest-switcher .trv-switcher-toggle:hover,
    .is-fixed .lyn-dest-mega:hover .trv-switcher-toggle,
    .is-fixed .lyn-dest-mega.is-open .trv-switcher-toggle,
    .header-inner .lyn-dest-switcher .trv-switcher-toggle:hover,
    .header-inner .lyn-dest-mega:hover .trv-switcher-toggle,
    .header-inner .lyn-dest-mega.is-open .trv-switcher-toggle {
        color: #af7432 !important;
    }
    /* Gạch chân dùng sắc đậm khi nền trắng (gold sáng #dda15e trên trắng chỉ
       2.25:1 — dưới chuẩn đọc). Caret tự theo vì đã đặt color:inherit. */
    .is-fixed .lyn-dest-switcher .trv-switcher-current::after,
    .header-inner .lyn-dest-switcher .trv-switcher-current::after {
        background: #af7432;
    }
}
/* MỌI switcher (điểm đến + ngôn ngữ + tiền tệ): icon SVG bên trong thừa kế
   currentColor nên phải đổi cả `color` của toggle, không chỉ border. */
@media (min-width: 992px) {
    .header-transparent:not(.is-fixed) .trv-switcher-toggle,
    .header-transparent:not(.is-fixed) .trv-switcher-toggle svg,
    .header-transparent:not(.is-fixed) .trv-switcher-toggle .trv-switcher-caret {
        color: #fff !important;
        stroke: currentColor !important;
    }
}

/* ── SWITCHER ĐIỂM ĐẾN = MỘT MỤC MENU (bố cục kiểu Hoiana, xem ảnh tham khảo) ──
   Bản gốc .header_nav_link: KHÔNG viền, KHÔNG nền — chỉ text hoa + caret nhỏ,
   weight 600, letter-spacing .07em, cỡ text-medium (.875rem).
   Bỏ toàn bộ khung nút mà hospitality.css:1214 đang đặt. */
.lyn-dest-switcher .trv-switcher-toggle {
    border: 0 !important;
    background: transparent !important;
    height: auto !important;
    gap: 4px !important;                /* space--1 * .25 ≈ 2-4px của bản gốc */
    /* CÙNG cỡ với mục menu (1rem = 16px, kế thừa body như bản gốc)
       — switcher chính là một mục menu, không phải tiện ích riêng. */
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;   /* letter-spacing--0-07em */
    text-transform: uppercase !important;
    color: inherit !important;
    /* hospitality.css:1253 đặt min-width:190px + space-between (hợp lý khi nó là
       NÚT, để dropdown thẳng mép). Giờ nó là MỤC MENU → phải co theo nội dung,
       nếu không icon 📍 bị dàn ra xa chữ tới ~41px (trông như rời khỏi menu). */
    min-width: 0 !important;
    justify-content: flex-start !important;
    width: auto !important;
}
/* Bỏ icon ghim 📍 — bản gốc chỉ có chữ + caret. */
.lyn-dest-switcher .lyn-dest-switcher-icon {
    display: none !important;
}
/* Hover: chỉ đổi MÀU CHỮ sang gold — KHÔNG nền, không khung (nó là mục menu,
   không phải nút). Giữ y hệt cách các mục menu khác phản hồi. */
.lyn-dest-switcher .trv-switcher-toggle {
    padding: 0 !important;
    background: transparent !important;
    transition: color .4s cubic-bezier(.625,.05,0,1) !important;
}
.lyn-dest-switcher .trv-switcher-toggle:hover,
.lyn-dest-mega:hover .trv-switcher-toggle,
.lyn-dest-mega.is-open .trv-switcher-toggle {
    background: transparent !important;
    color: #dda15e !important;
}
/* Caret KẾ THỪA màu chữ (SVG dùng currentColor) — không hardcode màu, nhờ vậy
   nền tối → gold sáng, nền trắng → gold đậm, tự đúng theo ngữ cảnh header. */
.lyn-dest-switcher .trv-switcher-toggle:hover .trv-switcher-caret,
.lyn-dest-mega:hover .trv-switcher-caret,
.lyn-dest-mega.is-open .trv-switcher-caret {
    color: inherit !important;
}

/* GẠCH CHÂN cho switcher — giống HỆT một mục menu thường: cùng cơ chế ::after
   (scaleX 0→1), cùng màu gold, cùng easing. Khác biệt duy nhất là nó mở dropdown.
   Gạch chỉ ôm phần CHỮ, không tính caret (bản gốc gạch hết chữ, dừng trước caret). */
.lyn-dest-switcher .trv-switcher-current {
    position: relative;
    display: inline-block;
    /* 11px để gạch nằm CÙNG CAO ĐỘ với gạch của mục menu thường: switcher tính từ
       đáy chữ, còn mục menu tính từ thẻ <a> (padding-bottom 14px, ::after bottom
       8px). Đo thực tế rồi bù dần: 2px → lệch 6px, 8px → lệch 3px, 11px → khớp. */
    padding-bottom: 11px;
}
.lyn-dest-switcher .trv-switcher-current::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #dda15e;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.lyn-dest-switcher .trv-switcher-toggle:hover .trv-switcher-current::after,
.lyn-dest-mega:hover .trv-switcher-current::after,
.lyn-dest-mega.is-open .trv-switcher-current::after {
    transform: scaleX(1);
}
/* Caret nhỏ lại cho cân với chữ (bản gốc dùng icon mảnh).
   .trv-switcher-current có padding-bottom 11px (để hạ gạch chân xuống ngang
   gạch của mục menu). Padding đó KHÔNG áp cho caret → caret bị tụt xuống so
   với chữ. Kéo caret lên đúng nửa khoảng đó để hai bên cân mắt. */
.lyn-dest-switcher .trv-switcher-caret {
    width: 1rem;
    height: 1rem;
    position: relative;
    top: -5px;
}
/* Ghim switcher vào hàng menu: cùng trục dọc, cách mục đầu đúng nhịp menu.
   Mục menu có padding 10px mỗi bên → cho switcher padding phải bằng nhịp đó
   để khoảng hở switcher↔mục đầu bằng khoảng hở giữa các mục. */
.header-nav .lyn-dest-switcher {
    display: inline-flex;
    align-items: center;
    padding-right: 20px;
}
/* Mobile/tablet (drawer): switcher là một hàng riêng, chữ tối vì drawer nền trắng.
   Ngưỡng 1399.98px = ngưỡng theme thu menu vào drawer (khớp JS style-1.blade.php). */
@media (max-width: 1399.98px) {
    .header-nav .lyn-dest-switcher {
        display: flex;
        padding: 12px 20px;
    }
    .header-nav .lyn-dest-switcher .trv-switcher-toggle {
        color: var(--heading-color) !important;
    }
    /* Mục menu trong drawer đang CAM (rule gold chỉ áp desktop) → đồng bộ sang
       gold cho khớp phần còn lại. Nền drawer trắng nên gold vẫn đọc tốt. */
    .header-nav .nav > li > a {
        color: var(--heading-color) !important;
    }
    .header-nav .nav > li > a:hover,
    .header-nav .nav > li.current-menu-item > a,
    .header-nav .nav > li.active > a {
        color: #af7432 !important;
    }
}

/* Header đã cuộn (nền trắng) → icon gold thay vì cam. */
.trv-switcher-toggle svg,
.trv-switcher-toggle .trv-switcher-caret {
    color: #dda15e;
    stroke: currentColor;
}

/* ── BOOKING BAR: nút ĐẶT PHÒNG + icon các trường (đang cam) → gold/teal ── */
.lyn-sticky-booking .lyn-sb-submit,
.lyn-sticky-booking button[type="submit"] {
    background: #dda15e !important;
    color: #00504b !important;
    border-color: #dda15e !important;
}
.lyn-sticky-booking .lyn-sb-submit:hover,
.lyn-sticky-booking button[type="submit"]:hover {
    background: #c88943 !important;
    color: #00504b !important;
}
/* Icon trong booking bar (bi-geo-alt, bi-door-open, bi-calendar-event…) */
.lyn-sticky-booking .bi,
.lyn-sticky-booking i[class*="bi-"] {
    color: #dda15e !important;
}

/* ── DROPDOWN (switcher điểm đến / ngôn ngữ) — theo bản tham khảo:
   nền TRẮNG gần đục + bóng nhẹ (không phải xám mờ), chữ HOA đậm màu tối,
   hover gold. hospitality.css:1290 đang để hover màu cam → đổi sang gold. ── */
.lyn-dest-switcher-menu,
.trv-switcher-menu {
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    box-shadow: 0 14px 34px rgba(0, 32, 30, .16) !important;
    backdrop-filter: blur(8px);
}
/* Nút đã co theo nội dung nên dropdown KHÔNG thể ăn theo width:100% của nút nữa
   (sẽ hẹp, cắt chữ). Cho nó tự giãn theo mục dài nhất, căn mép TRÁI với chữ. */
.lyn-dest-switcher .lyn-dest-switcher-menu {
    width: max-content !important;
    min-width: 190px !important;
    left: 0 !important;
    right: auto !important;
}
.lyn-dest-switcher-menu li a,
.trv-switcher-menu li a {
    color: #00504b !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    font-size: .78rem;
    transition: background .4s cubic-bezier(.625,.05,0,1),
                color .4s cubic-bezier(.625,.05,0,1);
}
.lyn-dest-switcher-menu li a:hover,
.trv-switcher-menu li a:hover {
    background: rgba(221, 161, 94, .12) !important;
    color: #af7432 !important;
}
/* Mục đang chọn trong dropdown */
.lyn-dest-switcher-menu li.is-active a,
.lyn-dest-switcher-menu li.active a,
.trv-switcher-menu li.is-active a,
.trv-switcher-menu li.active a {
    color: #af7432 !important;
    background: rgba(221, 161, 94, .1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGA-MENU ĐIỂM ĐẾN (bố cục theo trang tham khảo Hoiana)
     cột 1: danh sách điểm đến · cột 2: mô tả + đầu mục · cột 3: ảnh cover
   Bề rộng panel = ĐÚNG container của section body (--lyn-container) và căn giữa
   theo viewport → mép panel thẳng mép nội dung bên dưới, như user yêu cầu.
   CHỈ desktop ≥1400px; dưới ngưỡng đó menu nằm trong drawer nên dùng dropdown thường.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    .lyn-dest-mega { position: static !important; }

    .lyn-dest-mega .lyn-mega {
        position: absolute;
        top: 100%;
        /* Căn giữa theo VIEWPORT rồi giới hạn bằng container → trùng mép section. */
        left: 50%;
        transform: translateX(-50%);
        /* Cùng cơ chế .u-container: thu hẹp chiều rộng + căn giữa, KHÔNG padding
           → mép panel trùng ĐÚNG mép nội dung section bên dưới. */
        width: min(calc(100vw - var(--lyn-gutter) * 2), var(--lyn-container));
        padding-inline: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .35s cubic-bezier(.625,.05,0,1),
                    visibility .35s;
        /* Phải CAO HƠN z-index của header (999), nếu không panel bị nội dung
           trang đè lên → chữ chồng nhau, panel nhìn như trong suốt. */
        z-index: 1000;
    }

    /* Mở khi hover vào switcher hoặc chính panel (giữ mở khi rê chuột xuống). */
    /* Khung ngoài chỉ lo hiện/ẩn; chuyển động "mở từ trên xuống" do clip-path
       của .lyn-mega-inner đảm nhiệm (bỏ translateY để không chồng hiệu ứng). */
    .lyn-dest-mega:hover .lyn-mega,
    .lyn-dest-mega:focus-within .lyn-mega,
    .lyn-dest-mega.is-open .lyn-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .lyn-dest-mega .lyn-mega-inner {
        display: grid;
        grid-template-columns: .78fr 1fr .9fr;   /* lưới LỆCH kiểu bản gốc */
        gap: 0;
        background: #fff;
        border-radius: .75rem;
        box-shadow: 0 24px 60px rgba(0, 32, 30, .18);
        overflow: clip;
        /* MỞ RA TỪ TRÊN XUỐNG: cắt panel về chiều cao 0 ở mép trên, rồi kéo dần
           xuống. Dùng clip-path (như .header_dropdown_wrap của bản gốc) thay vì
           max-height — không cần biết chiều cao trước, và không đẩy layout. */
        clip-path: inset(0 0 100% 0);
        transition: clip-path .45s cubic-bezier(.625,.05,0,1);
    }
    .lyn-dest-mega:hover .lyn-mega-inner,
    .lyn-dest-mega:focus-within .lyn-mega-inner,
    .lyn-dest-mega.is-open .lyn-mega-inner {
        clip-path: inset(0 0 0 0);
    }

    /* ── Cột 1: danh sách điểm đến ── */
    .lyn-dest-mega .lyn-mega-list {
        list-style: none;
        margin: 0;
        padding: 36px 32px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        border-right: 1px solid rgba(0, 0, 0, .08);
    }
    .lyn-dest-mega .lyn-mega-dest {
        display: block;
        color: #1a1a1a;
        font-size: .875rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        transition: color .4s cubic-bezier(.625,.05,0,1);
    }
    .lyn-dest-mega .lyn-mega-list li.is-active .lyn-mega-dest,
    .lyn-dest-mega .lyn-mega-dest:hover {
        color: #af7432;
    }
    /* "Xem tất cả điểm đến" đẩy xuống đáy cột như bản gốc ("SEE ALL HOTELS"). */
    .lyn-dest-mega .lyn-mega-all {
        margin-top: auto;
        padding-top: 28px;
    }
    .lyn-dest-mega .lyn-mega-all a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #1a1a1a;
        font-size: .9375rem;   /* 15px — nhỉnh dưới mục menu 16px một nấc */
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        transition: color .4s cubic-bezier(.625,.05,0,1);
    }
    .lyn-dest-mega .lyn-mega-all a:hover { color: #af7432; }
    .lyn-dest-mega .lyn-mega-all a span {
        transition: transform .4s cubic-bezier(.625,.05,0,1);
    }
    .lyn-dest-mega .lyn-mega-all a:hover span { transform: translateX(4px); }

    /* ── Cột 2 + 3: panel của điểm đang chọn (chồng lên nhau, chỉ hiện 1) ── */
    /* Panel: luôn ở lưới, ẩn/hiện bằng opacity + visibility để đổi điểm đến
       MƯỢT (fade + trượt nhẹ) thay vì display:none nhảy phựt.
       pointer-events tắt khi ẩn để không chặn panel đang hiện. */
    .lyn-dest-mega .lyn-mega-panel {
        grid-column: 2 / 4;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr .9fr;
        gap: 28px;
        padding: 36px 32px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity .35s cubic-bezier(.625,.05,0,1),
                    transform .35s cubic-bezier(.625,.05,0,1),
                    visibility .35s;
    }
    .lyn-dest-mega .lyn-mega-panel.is-shown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .lyn-dest-mega .lyn-mega-desc {
        margin: 0 0 28px;
        color: #6b6b6b;
        font-size: .9rem;
        line-height: 1.6;
        text-wrap: pretty;
    }
    .lyn-dest-mega .lyn-mega-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .lyn-dest-mega .lyn-mega-links li + li {
        border-top: 1px solid rgba(0, 0, 0, .07);
    }
    .lyn-dest-mega .lyn-mega-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        color: #1a1a1a;
        font-size: .9rem;
        font-weight: 500;
        transition: color .4s cubic-bezier(.625,.05,0,1),
                    transform .4s cubic-bezier(.625,.05,0,1);
    }
    .lyn-dest-mega .lyn-mega-links a:hover {
        color: #af7432;
        /* Trượt nhẹ sang phải khi hover — cùng ngôn ngữ chuyển động với mũi tên.
           Dùng transform (không phải padding) để không tính lại layout. */
        transform: translateX(4px);
    }
    .lyn-dest-mega .lyn-mega-arrow {
        color: #b9b9b9;
        transition: transform .4s cubic-bezier(.625,.05,0,1), color .4s;
    }
    .lyn-dest-mega .lyn-mega-links a:hover .lyn-mega-arrow {
        color: #af7432;
        transform: translateX(4px);
    }

    .lyn-dest-mega .lyn-mega-media {
        border-radius: 2px;
        overflow: clip;
        align-self: stretch;
        min-height: 240px;
    }
    .lyn-dest-mega .lyn-mega-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Mờ ra/vào khi JS đổi src theo mục đang rê — tránh ảnh nhảy phựt. */
        transition: opacity .18s ease-out;
    }
    .lyn-dest-mega .lyn-mega-media.is-swapping img {
        opacity: 0;
    }

    /* Ẩn dropdown ĐƠN GIẢN cũ khi đã có mega (tránh 2 lớp cùng xổ). */
    .lyn-dest-mega .lyn-dest-switcher-menu { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════════════
       MEGA-MENU CHO MỤC MENU CÓ CON (Tin tức, Liên hệ…):
       Dùng CHUNG toàn bộ style .lyn-dest-mega ở trên — chỉ cần <li> menu là
       .lyn-dest-mega. Ở đây chỉ ĐIỀU CHỈNH cho khác biệt duy nhất so với switcher:
       li menu (không phải .trv-switcher) → position static để panel căn theo container,
       và hover li mở panel (switcher mở bằng :hover .trv-switcher-toggle sẵn).
       ═══════════════════════════════════════════════════════════════════════ */
    .header-nav .nav > li.lyn-dest-mega { position: static; }

    /* Panel của mục menu: hiện khi hover/focus vào chính <li> (switcher dùng
       .is-open/:hover trên wrapper — li dùng :hover trực tiếp). */
    .header-nav .nav > li.lyn-dest-mega > .lyn-mega {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: min(calc(100vw - var(--lyn-gutter) * 2), var(--lyn-container));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .35s cubic-bezier(.625,.05,0,1), visibility .35s;
        z-index: 1000;
    }
    .header-nav .nav > li.lyn-dest-mega:hover > .lyn-mega,
    .header-nav .nav > li.lyn-dest-mega:focus-within > .lyn-mega,
    .header-nav .nav > li.lyn-dest-mega.is-open > .lyn-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .header-nav .nav > li.lyn-dest-mega:hover > .lyn-mega .lyn-mega-inner,
    .header-nav .nav > li.lyn-dest-mega:focus-within > .lyn-mega .lyn-mega-inner,
    .header-nav .nav > li.lyn-dest-mega.is-open > .lyn-mega .lyn-mega-inner {
        clip-path: inset(0 0 0 0);
    }
}

/* Dưới 1400px (menu trong drawer): KHÔNG dùng mega 3 cột. Nút bấm điểm đến ĐỒNG NHẤT
   với các mục menu kế bên (Giới thiệu/Ưu đãi/Tin tức/Liên hệ) — không viền, không nền,
   không bo góc; chữ hoa + cùng padding 15px/24px + cùng gạch ngăn mảnh. Bấm để xổ danh
   sách điểm đến ngay bên dưới (JS gắn .is-open — cảm ứng không có hover). Màu chữ đã là
   var(--heading-color) sẵn (dòng ~1116) nên khớp mục menu; ở đây chỉ lo LAYOUT. */
@media (max-width: 1399.98px) {
    /* 2 lớp ".header-nav .lyn-dest-mega" để THẮNG ".header-nav .lyn-dest-switcher"
       (dòng ~1112: display:flex hàng ngang + padding 12px 20px). Nếu chỉ 1 lớp sẽ
       thua → dropdown xổ ngang cạnh nút thay vì rơi xuống dưới. */
    .header-nav .lyn-dest-mega {
        position: relative;
        display: block;
        padding: 0;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #f2f4f5;   /* ngăn với "Giới thiệu" ngay dưới */
    }

    /* CHỈ layout: full width, caret sang phải, padding + letter-spacing khớp mục menu
       (xem ".navbar-nav > li > a" trong theme-overrides.css). KHÔNG đụng
       border/background/màu/text-transform — giữ nguyên style "mục menu" đã có. */
    .header-nav .lyn-dest-mega .trv-switcher-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 15px 24px !important;
        letter-spacing: .02em !important;
        min-width: 0;
        cursor: pointer;
    }
    .header-nav .lyn-dest-mega .trv-switcher-current {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Gạch chân kiểu mục menu desktop — bỏ trên mobile (trong drawer dùng border ngăn;
       caret xoay đã là chỉ báo mở). */
    .header-nav .lyn-dest-mega .trv-switcher-current::after {
        display: none !important;
    }
    .header-nav .lyn-dest-mega .trv-switcher-caret {
        flex: 0 0 auto;
        margin-left: auto;
        transition: transform .2s ease;
    }
    .header-nav .lyn-dest-mega.is-open .trv-switcher-caret,
    .header-nav .nav > li.lyn-dest-mega.is-open > a .trv-menu-caret { transform: rotate(180deg); }

    /* Nút mũi tên thừa custom.js chèn cho li mega (nó tìm .sub-menu — mega không có).
       Ẩn đi; xổ/gập dùng caret của blade + JS toggleMegaLi. */
    .header-nav .nav > li.lyn-dest-mega > .submenu-toogle { display: none !important; }

    /* Danh sách điểm đến: xổ tĩnh ngay dưới nút (không absolute), chỉ hiện khi .is-open.
       Ẩn cột mô tả/ảnh (chỉ hợp layout 3 cột desktop). */
    .header-nav .lyn-dest-mega .lyn-mega {
        display: none;
        position: static;
        width: 100%;
        margin: 0;
        background: #fafbfb;   /* nền chìm nhẹ để phân biệt danh sách con với mục menu */
    }
    .header-nav .lyn-dest-mega.is-open .lyn-mega {
        display: block;
    }
    .header-nav .lyn-dest-mega .lyn-mega-inner {
        display: block;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .header-nav .lyn-dest-mega .lyn-mega-list {
        list-style: none;
        margin: 0;
        padding: 4px 0;
        display: block;
    }
    /* Menu <li> mega: .lyn-mega-list là <ul> BÊN TRONG .nav>li nên dính rule gốc
       `.nav>li ul{display:none}` (style.css). Ghi đè có !important để danh sách con
       xổ được trong drawer. (Switcher điểm đến KHÔNG dính vì nằm ngoài .nav>li.) */
    .header-nav .nav > li.lyn-dest-mega.is-open .lyn-mega,
    .header-nav .nav > li.lyn-dest-mega.is-open .lyn-mega-inner,
    .header-nav .nav > li.lyn-dest-mega.is-open .lyn-mega-list {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .header-nav .nav > li.lyn-dest-mega .lyn-mega-list li {
        display: block !important;
    }
    /* Panel (mô tả + ảnh) vẫn ẩn ở mobile — chỉ hiện danh sách link. */
    .header-nav .nav > li.lyn-dest-mega .lyn-mega-panel { display: none !important; }
    /* Mỗi điểm đến = một hàng con: thụt lề sâu hơn nút cha (40px vs 24px) để thấy rõ
       quan hệ "con của" bộ chọn điểm đến. */
    .header-nav .lyn-dest-mega .lyn-mega-dest {
        display: block;
        padding: 11px 24px 11px 40px;
        font-size: .95rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: #346065;
    }
    .header-nav .lyn-dest-mega .lyn-mega-list li.is-active .lyn-mega-dest {
        color: var(--primary-color);
        font-weight: 700;
    }
    .header-nav .lyn-dest-mega .lyn-mega-all {
        margin: 0;
        padding: 11px 24px 11px 40px;
        border-top: 1px solid #eef0f2;
    }
    .header-nav .lyn-dest-mega .lyn-mega-all a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .9rem;
        font-weight: 600;
        color: var(--primary-color);
        text-transform: none;
    }
    /* Cột mô tả/đầu mục/ảnh chỉ dành cho mega 3 cột desktop → ẩn hẳn trên mobile. */
    .header-nav .lyn-dest-mega .lyn-mega-panel { display: none; }
}

/* ── NÚT TRÒN NỔI góc phải (liên hệ + lên đầu trang): hospitality.css:864
   để nền var(--primary-color) → cam. Đổi sang gold, chữ/icon teal đậm. ── */
.lyn-action,
.scroltop {
    background: #dda15e !important;
    color: #00504b !important;
}
.lyn-action:hover,
.scroltop:hover {
    background: #c88943 !important;
    color: #00504b !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER 2 HÀNG (bố cục Hoiana):
     hàng trên : logo (trái) · ngôn ngữ + tiện ích (phải)
     hàng dưới : menu trải ngang từ TRÁI
   Dùng CSS Grid sắp lại thứ tự hiển thị — KHÔNG đổi DOM, nên JS dời phần tử
   vào drawer mobile (style-1.blade.php) vẫn giữ nguyên mốc .extra-nav/.header-nav.
   CHỈ áp desktop ≥1400px (dưới ngưỡng đó theme thu menu vào drawer hamburger).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    /* .header-style-1 .main-bar đặt display:flex !important → phải !important +
       selector đủ mạnh mới thắng (đã xác định bằng CSS.getMatchedStylesForNode). */
    /* Header DÓNG THẲNG với section body: cùng container 1200px + căn giữa.
       Trước đó header ở x=55 còn .container của section ở x=193 → lệch 138px,
       nhìn từ trên xuống không thẳng hàng. Dùng chung --lyn-container để sau này
       đổi bề rộng site thì header tự theo. */
    .header-style-1 .main-bar.lyn-header--2row {
        max-width: var(--lyn-container);
        margin-inline: auto;
        /* ĐỒNG BỘ với .container của section: nay container dùng cơ chế
           width:calc(100% - gutter*2) + margin auto (KHÔNG padding) như bản gốc,
           nên header cũng phải vậy — nếu giữ padding thì menu lệch vào trong
           128px so với nội dung bên dưới. */
        width: calc(100% - var(--lyn-gutter) * 2) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo utils"
            "nav  nav";
        align-items: center;
        row-gap: 2px;
    }
    .header-style-1 .main-bar.lyn-header--2row .logo-header { grid-area: logo; }
    .header-style-1 .main-bar.lyn-header--2row .extra-nav   { grid-area: utils; justify-self: end; }
    .header-style-1 .main-bar.lyn-header--2row .header-nav  { grid-area: nav; }

    /* Menu căn TRÁI (bản gốc trải từ mép trái), bỏ justify-content:end của theme. */
    .header-style-1 .main-bar.lyn-header--2row .header-nav {
        justify-content: flex-start !important;
    }
    /* KHOẢNG CÁCH giữa các mục: bản gốc dùng .header_nav_lists{space-between} —
       menu dàn rộng, chữ cách nhau thoáng. Của ta các mục chỉ hở 4px (ul rộng
       330px trong khi có 1072px khả dụng) nên trông chật.
       Dùng gap theo thang spacing gốc (space--6 ≈ 2→2.5rem) thay vì space-between,
       vì menu ta ít mục hơn — dàn đều tuyệt đối sẽ khiến chúng xa nhau bất thường. */
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav {
        justify-content: flex-start !important;
        gap: clamp(2rem, 2.6vw, 3rem);
    }
    /* Bỏ padding ngang của <a>: khoảng cách giờ do gap lo. Giữ padding sẽ cộng dồn
       và làm gạch chân THỪA ra hai bên chữ (lỗi user chỉ ra). */
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav > li > a {
        padding-left: 0;
        padding-right: 0;
    }
    /* Gạch chân ôm ĐÚNG bề ngang chữ (trước đó left/right:10px vẫn thừa). */
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav > li > a::after {
        left: 0;
        right: 0;
    }
    /* Khoảng cách switcher → mục menu đầu tiên = đúng gap giữa các mục. */
    .header-style-1 .main-bar.lyn-header--2row .header-nav .lyn-dest-switcher {
        padding-right: clamp(2rem, 2.6vw, 3rem);
    }
    /* Mục đầu tiên thẳng mép trái với logo — bỏ padding trái của <a> đầu tiên. */
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav > li:first-child > a {
        padding-left: 0;
    }
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav > li:first-child > a::after {
        left: 0;
    }
    /* Thẻ <a> bớt cao ở bố cục 2 hàng (không cần chiếm hết chiều cao header nữa)
       → gạch chân bám sát chữ hơn, đúng kiểu bản gốc. */
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav > li > a {
        padding-top: 10px;
        padding-bottom: 14px;
    }
    .header-style-1 .main-bar.lyn-header--2row .header-nav .nav > li > a::after {
        bottom: 8px;
    }
}

/* Dải GRADIENT đen mờ ở ĐỈNH HERO — thêm vào chính background của overlay (chồng lên
   gradient đáy đã có). Nhờ đó menu/logo nổi rõ trên ảnh sáng. CHỈ trên hero (overlay chỉ
   có trong hero); cuộn xuống header rời hero + thành trắng nên không dính dải đen. */
.lyn-hero-resort-overlay {
    background:
        /* Dải đỉnh giữ đủ đậm để MENU đọc được trên ảnh nền sáng (đã thử .42 → menu chìm). */
        linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.28) 15%, rgba(0,0,0,0) 28%) ,
        /* Scrim thân/đáy nhẹ hơn bản cũ (đáy .66 → .50) — Hoiana để ảnh/video nổi rõ,
           chỉ tối vừa đủ cho chữ đọc. Vẫn đậm dần ở đáy vì booking bar nằm đó. */
        linear-gradient(180deg, rgba(20,32,31,.08) 0%, rgba(20,32,31,.04) 45%, rgba(20,32,31,.16) 68%, rgba(20,32,31,.50) 100%) !important;
}

/* ── 2. HERO 100vw × chiều-cao-màn-hình-KHẢ-DỤNG.
   ⚠️ Botble bật thanh admin (#admin_bar cao 40px, body.show-admin-bar{margin-top:40px}) khi
   ĐĂNG NHẬP → đẩy trang xuống 40px. Nếu hero = 100dvh thì đáy tràn 40px khỏi màn hình → CẮT.
   → dùng biến --lyn-hero-h: mặc định 100dvh (khách thường), trừ 40px khi có thanh admin. ── */
:root { --lyn-hero-h: 100dvh; }
body.show-admin-bar { --lyn-hero-h: calc(100dvh - 40px); }   /* trừ chiều cao thanh admin */
.lyn-hero-resort {
    min-height: var(--lyn-hero-h) !important;
    height: var(--lyn-hero-h) !important;
    /* Full-bleed AN TOÀN với thanh cuộn: hero nằm trong <main> full-width nên chỉ cần
       width:100% (KHÔNG dùng 100vw + margin âm — cái đó rộng hơn vùng nội dung khi có
       scrollbar → tràn ngang, đẩy logo/menu/booking lệch trái). */
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── 5. PARALLAX 1 ẢNH — chiều sâu: ảnh cao hơn khung, dịch chậm (JS lo transform).
   scale lớn hơn chút để biên độ dịch không hở mép; nền tối phía sau nếu ảnh lệch. ── */
.lyn-hero-resort-media[data-parallax] {
    /* Dư biên LỆCH XUỐNG: hero nằm đầu trang nên ảnh chỉ dịch LÊN (ty luôn âm),
       không cần dư nhiều ở đỉnh. Đo ở speed .35, viewport 900px: biên độ tối đa
       -315px → cần ≥315px dư ở ĐÁY.
       top -6% (54px) + height 148% (dư đáy 42% ≈ 378px) → còn ~63px an toàn.
       (Trước: top -12% / height 124% → dư đáy chỉ 108px, hở tới 123px.) */
    top: -6% !important;
    height: 148% !important;
    transform: scale(1.18);
    will-change: transform;
    background-color: var(--lyn-ink);
}

/* ── 3. ACTION BAR → FAB (nút nhỏ góc dưới-phải, bấm xổ ra) TRÊN CẢ DESKTOP ──
   Trước đây FAB chỉ bật ở ≤767px. Giờ áp cho mọi kích thước: cụm nút thu về 1 nút
   bung ở góc dưới-phải; bấm mới hiện danh sách. (Ghi đè block mobile của hospitality.css.) */
.lyn-actions {
    position: fixed !important;
    right: 24px;
    top: auto !important;
    bottom: 92px;              /* đẩy CAO lên để KHÔNG đè nút "lên đầu trang" (.scroltop) ở đáy */
    transform: none !important;
    z-index: 60;
}

/* ── Nút "LÊN ĐẦU TRANG" (.scroltop): CĂN THẲNG TRỤC DỌC với FAB liên hệ ──
   FAB: right 24px, nút tròn 50px → tâm cách mép phải 49px. Scroltop rộng 44px → right = 27px
   để tâm trùng 49px (49 - 22). Cho nút tròn nhẹ, cùng phong cách. */
.scroltop {
    right: 27px !important;
    bottom: 28px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(20, 32, 31, .55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50% !important;
    color: #fff !important;
    transition: background .2s ease, transform .2s ease;
}
.scroltop:hover {
    background: var(--primary-color) !important;
    transform: translateY(-2px);
}
.scroltop span { line-height: 0 !important; }
.lyn-action.lyn-actions-toggle { display: inline-flex !important; }   /* hiện nút bung ở desktop */
.lyn-actions-list {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transform-origin: bottom center;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.lyn-actions.is-open .lyn-actions-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.lyn-actions.is-open .lyn-actions-toggle-open { display: none; }
.lyn-actions.is-open .lyn-actions-toggle-close { display: inline-block; }
.lyn-actions-toggle.lyn-action::before { content: none; }   /* nút bung không có vòng sóng */

/* ── 4. BOOKING BAR kiểu HOIANA: NỀN TRONG SUỐT + BLUR, nằm ĐÈ trên hero, sát đáy hero.
   Bỏ position:fixed + nền đen đặc + JS ẩn/hiện. Đặt absolute trong <main>, nổi trên ảnh
   hero, bo góc, thụt vào mép chút. Cuộn xuống thì trôi theo trang (không đuổi). ── */
main { position: relative; }
main { padding-bottom: 0 !important; }   /* huỷ đệm 84px của thanh fixed cũ (không còn fixed) */

.lyn-sticky-booking {
    position: absolute !important;
    /* Neo theo ĐÁY hero thật (hero là phần tử đầu trong <main>). Dùng bottom của khối
       hero qua biến chiều cao: hero cao 100dvh → đáy hero = 100dvh tính từ đầu <main>.
       Kéo bar lên trong hero 40px để KHÔNG chạm mép dưới (tránh bị cắt khi có thanh
       admin đẩy trang xuống, hoặc thanh địa chỉ mobile). */
    top: var(--lyn-hero-h, 100dvh);
    transform: translateY(calc(-100% - 40px)) !important;
    bottom: auto !important;
    left: 50%;
    margin-left: calc(-1 * min(1200px, 92vw) / 2);
    width: min(1200px, 92vw);                 /* thụt vào mép như Hoiana (không full-bleed) */
    z-index: 40;                               /* trên ảnh hero, dưới header */
    /* NỀN ĐEN TRONG SUỐT HƠN + BLUR (giống Hoiana, user muốn trong hơn) */
    background: rgba(10, 14, 14, .28) !important;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24) !important;
    overflow: hidden;
}
.lyn-sticky-booking.is-hidden {
    transform: translateY(calc(-100% - 40px)) !important;   /* vô hiệu class ẩn của JS cũ */
}
/* Form bên trong: bỏ nền phụ (đã có nền blur ở ngoài), field ngăn bằng vạch mảnh sáng */
.lyn-sticky-booking .lyn-sb-form {
    background: transparent !important;
    padding: 4px 8px !important;
}
.lyn-sticky-booking .lyn-sb-field {
    padding: 14px 20px !important;
}
/* Vạch ngăn CHỈ giữa các field (không ở field ĐẦU). Dùng adjacent-sibling vì
   trước field đầu có input ẩn (@csrf/honeypot) → :first-child không khớp. */
.lyn-sticky-booking .lyn-sb-field + .lyn-sb-field {
    border-left: 1px solid rgba(255, 255, 255, .16) !important;
}
/* Bỏ icon trước label trong booking bar (user muốn gọn) */
.lyn-sticky-booking .lyn-sb-field label i { display: none !important; }
/* NHÃN — theo .form_bookbar_label_text của bản tham khảo: cỡ text-medium
   (.875rem), UPPERCASE, weight 600, tracking .05em, line-height 1.14.
   Trước đó nhãn và giá trị CÙNG 16px/w400 nên không có phân cấp, nhìn phẳng. */
.lyn-sticky-booking .lyn-sb-field label {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    line-height: 1.14 !important;
    text-transform: uppercase !important;
    margin-bottom: .25rem !important;
}
/* GIÁ TRỊ — .form_bookbar_field: font accent (Raleway → fallback Inter),
   cỡ text-main 1rem, trắng đặc để nổi hơn nhãn. */
.lyn-sticky-booking .lyn-sb-field select,
.lyn-sticky-booking .lyn-sb-field input {
    color: #fff !important;
    background: transparent !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.lyn-sticky-booking .lyn-sb-field select option { color: #222; }   /* dropdown vẫn đọc được */
/* Nút ĐẶT PHÒNG = pill nền cam đặc nổi bật trên nền blur (Hoiana dùng trắng; ta giữ cam brand) */
.lyn-sticky-booking .lyn-sb-submit,
.lyn-sticky-booking button[type="submit"] {
    border-radius: 999px !important;
    margin: 10px 12px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
}

/* ── Trigger + sheet head chỉ dùng trên MOBILE — ẩn trên desktop ─────────── */
.lyn-sb-trigger,
.lyn-sb-sheet-head,
.lyn-sb-backdrop { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (≤767px): BOTTOM-SHEET đặt phòng (chuẩn resort cao cấp).
   - Mặc định: thanh GỌN cố định ở đáy màn hình (kính mờ) — điểm đến + nút đặt.
     KHÔNG còn nổi đè lên hero → hero hiển thị trọn vẹn.
   - Bấm nút → cả khối trượt lên thành SHEET, hiện form đầy đủ 1 cột dễ bấm.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Gỡ neo-theo-hero của desktop: về thanh fixed đáy màn hình. */
    .lyn-sticky-booking {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        /* Nền đặc hơn desktop chút cho dễ đọc trên đáy màn hình sáng-tối lẫn lộn. */
        background: rgba(12, 17, 17, .82) !important;
        padding-bottom: env(safe-area-inset-bottom, 0);
        transition: transform .34s cubic-bezier(.22, .61, .36, 1);
    }
    /* Ẩn/hiện theo cuộn (JS cũ) — trượt xuống khỏi màn khi ẩn. */
    .lyn-sticky-booking.is-hidden {
        transform: translateY(110%) !important;
    }

    /* Thanh gọn: điểm đến (trái) + nút ĐẶT PHÒNG cam (phải). */
    .lyn-sb-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 14px 18px;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    .lyn-sb-trigger-info {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-weight: 600;
        font-size: .98rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lyn-sb-trigger-info i { color: var(--primary-color); font-size: 1.05rem; }
    .lyn-sb-trigger-cta {
        flex: 0 0 auto;
        padding: 11px 26px;
        border-radius: 999px;
        background: var(--primary-color);
        color: #fff;
        font-weight: 700;
        font-size: .92rem;
        box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), .32);
    }

    /* Form ẩn ở trạng thái thanh-gọn; chỉ hiện khi sheet mở. */
    .lyn-sticky-booking .lyn-sb-form { display: none !important; }
    .lyn-sticky-booking .lyn-sb-sheet-head { display: none; }

    /* ── Trạng thái MỞ SHEET ─────────────────────────────────────────────── */
    .lyn-sticky-booking.is-open {
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        background: rgba(14, 20, 20, .96) !important;
        backdrop-filter: blur(20px) saturate(1.1);
        -webkit-backdrop-filter: blur(20px) saturate(1.1);
        box-shadow: 0 -20px 60px rgba(0, 0, 0, .5) !important;
    }
    .lyn-sticky-booking.is-open .lyn-sb-trigger { display: none; }

    /* Đầu sheet: tay nắm + tiêu đề + nút đóng. */
    .lyn-sticky-booking.is-open .lyn-sb-sheet-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 18px 4px;
    }
    .lyn-sb-sheet-grip {
        position: absolute;
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .28);
    }
    .lyn-sb-sheet-title {
        flex: 1 1 auto;
        margin-top: 6px;
        color: #fff;
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: .01em;
    }
    .lyn-sb-sheet-close {
        flex: 0 0 auto;
        margin-top: 6px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-size: .9rem;
        cursor: pointer;
    }

    /* Form trong sheet: 1 CỘT, field khối rõ ràng, dễ bấm ngón tay. */
    .lyn-sticky-booking.is-open .lyn-sb-form {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0)) !important;
        max-width: none;
    }
    .lyn-sticky-booking.is-open .lyn-sb-field {
        flex: 1 1 auto !important;
        width: 100%;
        border-left: 0 !important;
        padding: 12px 14px !important;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 12px;
    }
    .lyn-sticky-booking.is-open .lyn-sb-field label i { display: inline !important; }
    /* Cho form wrap để cặp Khách + Trẻ em (2 ô số nhỏ) nằm CẠNH nhau, tiết kiệm chiều cao. */
    .lyn-sticky-booking.is-open .lyn-sb-form { flex-wrap: wrap; }
    .lyn-sticky-booking.is-open .lyn-sb-field--num {
        flex: 1 1 calc(50% - 5px) !important;
        display: flex;
    }
    .lyn-sticky-booking.is-open .lyn-sb-submit {
        margin: 6px 0 0 !important;
        padding: 15px !important;
        width: 100%;
        border-radius: 14px !important;
        font-size: 1rem !important;
    }

    /* Nền mờ sau sheet. */
    .lyn-sb-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;              /* dưới bar (z 40), trên nội dung */
        background: rgba(6, 10, 10, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .lyn-sb-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }
    /* Khoá cuộn nền khi sheet mở. */
    body.lyn-sb-locked { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION "KHÁM PHÁ TRẢI NGHIỆM" — grid card điều hướng (bố cục kiểu Hoiana "explore").
   Header bất đối xứng (tiêu đề trái + mô tả phải), grid auto-fit, card ảnh full + tên
   serif + nhãn CTA uppercase + mũi tên, blur đáy cho chữ nổi, hover nâng + zoom ảnh.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── ẢNH NỀN SECTION — theo .background_wrap của bản tham khảo:
   <img> phủ kín section, đẩy ra sau bằng z-index âm. Section phải position:relative
   + isolation để z-index âm không chui ra sau nền trang. ── */
.lyn-explore {
    position: relative;
    isolation: isolate;
}
.lyn-explore-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
}
.lyn-explore-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Lớp phủ KEM mờ: chữ của section là màu TỐI nên cần nền sáng đủ để đọc.
   Dùng chính --swatch--light-300 (#fff8f0) của bản gốc, để hé ảnh ~12%. */
.lyn-explore-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 248, 240, .94) 0%,
        rgba(255, 248, 240, .88) 50%,
        rgba(255, 248, 240, .94) 100%
    );
}

.lyn-explore .container { max-width: var(--lyn-container); }

/* Header: tiêu đề trái (rộng) + mô tả phải (nhỏ, màu accent) — bất đối xứng editorial */
.lyn-explore-head {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: clamp(20px, 4vw, 64px);
    align-items: start;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.lyn-explore-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* TEAL #00504b — bản gốc dùng u-text-brand-500 (swatch--brand-500).
       Trước đây là màu heading đen. */
    color: #00504b;
    max-width: 20ch;
    margin: 0;
    text-wrap: balance;
}
.lyn-explore-desc {
    color: var(--primary-color);      /* mô tả màu accent như Hoiana (u-text-brand) */
    font-size: .98rem;
    line-height: 1.6;
    max-width: 40ch;
    margin: 0;
    align-self: end;                  /* căn đáy cho ngang tầm dòng cuối tiêu đề */
}

/* Grid auto-fit: card tối thiểu 300px, tự xuống hàng */
.lyn-explore-grid {
    display: grid;
    /* minmax 340px: container nay rộng 1248px nên ngưỡng 300px cũ cho ra 4 cột
       (card chỉ 300px). Bản gốc là 3 cột — 340px buộc auto-fit dừng ở 3.
       (1248 - 2*16)/3 ≈ 405px > 340 ✓, còn 4 cột cần ≤ 300px < 340 ✗) */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    /* gap 1rem = --site--gutter của bản gốc (họ dùng 16px cố định, không clamp). */
    gap: 1rem;
}

/* Card: ảnh full nền, nội dung dồn đáy */
.lyn-explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* CARD VUÔNG 1:1 — đúng .u-visual-wrap{aspect-ratio:1; width:100%} của bản gốc.
       ⚠️ `width: 100%` là MẤU CHỐT: nó khoá bề rộng theo CỘT trước, rồi
       aspect-ratio mới suy ra chiều cao. Thiếu nó thì aspect-ratio + min-height
       ép ngược chiều RỘNG lên 400px trong khi cột chỉ 357px → card đè lên nhau
       19px và tràn khỏi grid (lỗi đã gặp ở lần sửa trước).
       KHÔNG đặt min-height cùng lúc, vì min-height thắng aspect-ratio khi cột
       hẹp hơn 400px → card lại thành chữ nhật. */
    width: 100%;
    aspect-ratio: 1;
    /* .card của bản gốc dùng --radius--medium = .75rem = 12px. */
    border-radius: .75rem;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    box-shadow: var(--lyn-shadow, 0 6px 24px rgba(0,0,0,.07));
    transition: transform .35s ease, box-shadow .35s ease;
}
.lyn-explore-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lyn-shadow-hover, 0 14px 38px rgba(0,0,0,.16));
}
.lyn-explore-card-media {
    position: absolute; inset: 0; z-index: -2;
}
.lyn-explore-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s ease;
}
.lyn-explore-card:hover .lyn-explore-card-media img { transform: scale(1.06); }
/* Scrim tối dần xuống đáy để chữ trắng đọc rõ (thay cho visual_blur của Hoiana) */
.lyn-explore-card::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20,32,31,0) 30%, rgba(20,32,31,.35) 62%, rgba(20,32,31,.82) 100%);
}
.lyn-explore-card-body {
    position: relative; z-index: 1;
    padding: clamp(18px, 2vw, 26px);
    color: #fff;
}
/* Tên card — font display, hơi nhẹ + KHÔNG hoa (giống c-heading u-family-secondary của Hoiana) */
.lyn-explore-card-name {
    display: block;
    /* Tên trong ô: font SERIF NGHIÊNG như bản gốc (.u-family-secondary = Boska,
       font-style:italic). Theme không tự host được Boska → dùng serif hệ thống
       (Georgia/Times, có sẵn mọi máy) + italic để giữ đúng chất chữ nghiêng. */
    /* !important vì rule chung `*,body… { font-family: var(--font-body) !important }`
       (Montserrat) đè lên nếu không. */
    font-family: Georgia, 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.35rem, 1.9vw, 1.65rem);
    line-height: 1.2;
    margin-bottom: 12px;
    text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
/* Nhãn CTA uppercase + mũi tên (kiểu "TRẢI NGHIỆM SÂN →") */
.lyn-explore-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 3px;
    border-bottom: 1.5px solid rgba(255,255,255,.5);
    transition: gap .25s ease, border-color .25s ease;
}
.lyn-explore-card:hover .lyn-explore-card-cta {
    gap: 12px;
    border-bottom-color: var(--primary-color);
}
.lyn-explore-card-cta i { transition: transform .25s ease; }
.lyn-explore-card:hover .lyn-explore-card-cta i { transform: translateX(3px); }

@media (max-width: 767.98px) {
    .lyn-explore-head { grid-template-columns: 1fr; gap: 12px; }
    .lyn-explore-desc { align-self: start; }
    /* explore card giữ vuông 1:1 trên mobile (aspect-ratio đã lo) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION "DANH SÁCH KHU NGHỈ" — slider điểm đến (bố cục Hoiana "A world of stays").
   NỀN TỐI (ảnh thiên nhiên + lớp tối), card nổi GIỮA không tràn viền + hé slide 2 bên,
   mũi tên 2 BÊN card, text 2 cột (tên trái + mô tả phải), nút "Xem tất cả" giữa-dưới vàng đồng.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-dslider {
    position: relative;
    overflow: hidden;
    background: #0e1413;                 /* nền tối cơ sở */
}
.lyn-dslider .container { max-width: var(--lyn-container); position: relative; z-index: 2; }

/* Nền tối phủ cả section (ảnh mờ + lớp tối) */
.lyn-dslider-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    filter: brightness(.5) saturate(.85);
    transform: scale(1.05);
}
.lyn-dslider-bg-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,15,14,.78) 0%, rgba(10,15,14,.55) 40%, rgba(10,15,14,.78) 100%);
}

/* Header căn giữa — chữ sáng trên nền tối */
.lyn-dslider-head { text-align: center; margin-bottom: clamp(24px, 3.5vw, 44px); }
.lyn-dslider-head .lyn-eyebrow {
    display: inline-flex; justify-content: center;
    color: var(--secondary-color); margin-bottom: 12px; letter-spacing: .16em;
}
.lyn-dslider-title {
    font-family: var(--font-display);
    font-weight: 400;                    /* ĐỒNG NHẤT với các section title khác */
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2; letter-spacing: .06em;
    color: var(--primary-color);        /* CAM chủ đạo */
    max-width: 40ch; margin: 0 auto;    /* đủ rộng để GỌN 2 DÒNG (không ép 4 dòng) */
    text-transform: uppercase;
    text-wrap: balance;
}

/* Viewport: card giữa + mũi tên 2 bên (vị trí absolute) */
.lyn-dslider-viewport { position: relative; }

/* Swiper: overflow VISIBLE để slide kế HÉ MỎNG 2 bên (không xoè quạt). */
.lyn-dslider-swiper { overflow: visible; }
/* Card active = 70vw / max 62rem (đúng Hoiana .flick-card) → 2 bên chỉ hé mảnh mỏng,
   phần nền tối lộ ra ~2 bên. Slide KHÔNG active mờ + lùi nhẹ để cảm giác chồng phía sau. */
.lyn-dslider-swiper .swiper-slide {
    width: min(62rem, 70vw);
    height: auto;
    opacity: .4;
    transform: scale(.92);               /* slide sau nhỏ hơn → chồng phía sau */
    transition: opacity .5s ease, transform .5s ease;
}
.lyn-dslider-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 3;                          /* active nổi TRÊN slide kế */
}

.lyn-dslide {
    position: relative;
    min-height: clamp(400px, 50vh, 540px);
    display: flex; align-items: flex-end;
    border-radius: var(--lyn-radius-lg, 22px);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.lyn-dslide-media { position: absolute; inset: 0; z-index: -1; }
.lyn-dslide-media img { width: 100%; height: 100%; object-fit: cover; }
.lyn-dslide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,32,31,0) 40%, rgba(20,32,31,.55) 75%, rgba(20,32,31,.88) 100%);
}

/* Body: 2 cột — tên trái (rộng) + mô tả phải */
.lyn-dslide-body {
    position: relative; z-index: 1; width: 100%;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(20px, 3vw, 48px);
    align-items: end;
    padding: clamp(24px, 3vw, 44px);
    color: #fff;
}
.lyn-dslide-loc {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .82rem; color: rgba(255,255,255,.85); margin-bottom: 12px;
}
.lyn-dslide-loc i { color: var(--secondary-color); }
.lyn-dslide-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.1; letter-spacing: -.01em;
    color: #fff; margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.lyn-dslide-desc {
    font-size: .96rem; line-height: 1.6;
    color: rgba(255,255,255,.9);
    margin: 0 0 16px;
}
.lyn-dslide .lyn-link-arrow { color: #fff; }
.lyn-dslide .lyn-link-arrow:hover { color: #fff; }

/* Mũi tên 2 BÊN card — tròn viền sáng, nằm ngoài mép card */
.lyn-dslider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.4);
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(4px);
    color: #fff; font-size: 1.15rem; cursor: pointer;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
/* Mũi tên nằm ngay MÉP active card (đè lên slide hé phía sau) */
.lyn-dslider-prev { left: calc(50% - min(62rem,70vw)/2 - 26px); }
.lyn-dslider-next { right: calc(50% - min(62rem,70vw)/2 - 26px); }
.lyn-dslider-arrow:hover {
    background: var(--primary-color); border-color: var(--primary-color);
    transform: translateY(-50%) scale(1.08);
}
.lyn-dslider-arrow.swiper-button-disabled { opacity: .35; cursor: default; }

/* Nút "Xem tất cả" giữa-dưới — pill CAM chủ đạo */
.lyn-dslider-footer { text-align: center; margin-top: clamp(28px, 3.5vw, 44px); }
.lyn-dslider-all {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600;
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    padding: 15px 40px;
    text-decoration: none;
    transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.lyn-dslider-all:hover {
    background: var(--primary-color-hover); color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(238,64,35,.4);
}

@media (max-width: 991.98px) {
    /* Mobile/tablet: card gần full, mũi tên nằm trong mép, text 1 cột */
    .lyn-dslider-swiper .swiper-slide { width: 88vw; }
    .lyn-dslider-prev { left: 8px; }
    .lyn-dslider-next { right: 8px; }
    .lyn-dslider-arrow { width: 44px; height: 44px; }
    .lyn-dslide-body { grid-template-columns: 1fr; gap: 12px; }
    .lyn-dslide-overlay { background: linear-gradient(180deg, rgba(20,32,31,.15) 0%, rgba(20,32,31,.5) 50%, rgba(20,32,31,.9) 100%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION "THÊM ĐẶC QUYỀN" — slider ưu đãi nhiều card ngang (bố cục Hoiana
   "Moments Worth More"): header trái + arrows phải, card ảnh + tag + tên italic +
   mô tả + CTA (Nhận ưu đãi + Tìm hiểu thêm), nút "Xem tất cả" giữa-dưới.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-oslider .container { max-width: var(--lyn-container); }

/* Header: tiêu đề trái + mũi tên phải */
.lyn-oslider-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: clamp(24px, 3vw, 40px);
}
.lyn-oslider-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2; letter-spacing: .06em;
    color: var(--heading-color);
    max-width: 32ch; margin: 8px 0 0;    /* đủ rộng để GỌN 1-2 dòng (không ép 3 dòng) */
    text-transform: uppercase;
    text-wrap: balance;
}
.lyn-oslider-arrows { display: flex; gap: 12px; flex: 0 0 auto; }
.lyn-oslider-arrow {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--lyn-line);
    background: transparent;
    color: var(--heading-color); font-size: 1.1rem; cursor: pointer;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.lyn-oslider-arrow:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-2px); }
.lyn-oslider-arrow.swiper-button-disabled { opacity: .35; }

/* Slider + card ngang */
.lyn-oslider-swiper { overflow: visible; }
.lyn-oslider-swiper .swiper-slide { width: min(320px, 82vw); height: auto; }

.lyn-ocard {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--lyn-surface);
}
.lyn-ocard-media {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--lyn-radius, 14px);
    overflow: hidden;
    background: var(--lyn-surface-2);
}
.lyn-ocard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lyn-ocard:hover .lyn-ocard-media img { transform: scale(1.05); }

.lyn-ocard-body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1; }
.lyn-ocard-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lyn-ocard-tag {
    font-family: var(--font-display);
    font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), .08);
    border-radius: 999px; padding: 5px 12px;
}
.lyn-ocard-tag--time { color: var(--primary-color); background: rgba(var(--primary-color-rgb), .08); }
/* Tên ưu đãi — italic serif-ish (dùng Be Vietnam Pro italic để gợi "editorial") */
.lyn-ocard-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.2;
    color: var(--heading-color); margin: 0 0 10px;
}
.lyn-ocard-name a { color: inherit; }
.lyn-ocard-name a:hover { color: var(--primary-color); }
.lyn-ocard-desc {
    font-size: .92rem; line-height: 1.55; color: var(--text-color);
    margin: 0 0 14px;
}
.lyn-ocard-price { font-size: .9rem; color: var(--text-color); margin-bottom: 16px; }
.lyn-ocard-price strong { color: var(--primary-color); font-weight: 700; }

/* CTA: nút "Nhận ưu đãi" (pill nhạt) + link "Tìm hiểu thêm →" */
.lyn-ocard-actions { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.lyn-ocard-btn {
    font-family: var(--font-display); font-weight: 600;
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--primary-color);
    border-radius: 999px; padding: 10px 20px; text-decoration: none;
    transition: background .22s ease, transform .22s ease;
}
.lyn-ocard-btn:hover { background: var(--primary-color-hover); color: #fff; transform: translateY(-2px); }
.lyn-ocard-actions .lyn-link-arrow { font-size: .72rem; }

.lyn-oslider-footer { text-align: center; margin-top: clamp(28px, 3.5vw, 44px); }

@media (max-width: 767.98px) {
    .lyn-oslider-head { flex-direction: column; align-items: flex-start; }
    .lyn-oslider-title { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION "THƯỞNG VỊ TINH HOA" — slider ẩm thực NỀN TỐI (bố cục Hoiana cms_slider
   dark "Sunrise Bites"): header trái + mô tả phải (chữ trắng), card ảnh + tên nhà hàng
   (italic) + tag ẩm thực overlay đáy, mũi tên 2 bên, nút "Xem tất cả" viền trắng giữa-dưới.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-rslider {
    position: relative;
    background: var(--lyn-ink);          /* nền tối (than) — trên brand */
    overflow: hidden;
}
.lyn-rslider .container { max-width: var(--lyn-container); }

/* Header: tiêu đề trái + mô tả phải (chữ trắng, bất đối xứng) */
.lyn-rslider-head {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: clamp(20px, 4vw, 64px);
    align-items: start;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.lyn-rslider-head .lyn-eyebrow { color: var(--secondary-color); display: block; margin-bottom: 12px; }
.lyn-rslider-title {
    font-family: var(--font-display);
    font-weight: 400;                    /* ĐỒNG NHẤT với các section title khác */
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2; letter-spacing: .06em;
    color: var(--primary-color);
    max-width: 20ch; margin: 0;
    text-transform: uppercase;
    text-wrap: balance;
}
.lyn-rslider-desc {
    font-size: .96rem; line-height: 1.65;
    color: rgba(255,255,255,.72);
    max-width: 34ch; margin: 0; align-self: end;
}

/* Slider + card ảnh vuông, overlay tên + tag ở đáy */
.lyn-rslider-viewport { position: relative; }
.lyn-rslider-swiper { overflow: visible; }
.lyn-rslider-swiper .swiper-slide { width: min(320px, 78vw); height: auto; }

.lyn-rcard {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 1 / 1;                 /* vuông 1:1 */
    border-radius: var(--lyn-radius, 14px);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    transition: transform .35s ease;
}
.lyn-rcard:hover { transform: translateY(-5px); }
.lyn-rcard-media { position: absolute; inset: 0; z-index: -2; }
.lyn-rcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.lyn-rcard:hover .lyn-rcard-media img { transform: scale(1.06); }
.lyn-rcard::after {                      /* scrim tối đáy cho chữ trắng đọc rõ */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20,20,20,0) 38%, rgba(20,20,20,.45) 66%, rgba(20,20,20,.85) 100%);
}
.lyn-rcard-body { position: relative; z-index: 1; padding: clamp(16px, 1.8vw, 22px); color: #fff; }
.lyn-rcard-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.lyn-rcard-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(3px);
    border-radius: 4px; padding: 5px 10px;
}

/* Mũi tên 2 bên card — tròn viền sáng trên nền tối */
.lyn-rslider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 50px; height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.2); backdrop-filter: blur(4px);
    color: #fff; font-size: 1.1rem; cursor: pointer;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.lyn-rslider-prev, .lyn-rslider-next { display: none !important; }   /* bỏ mũi tên — dùng chuột kéo */
.lyn-rslider-arrow:hover { background: var(--primary-color); border-color: var(--primary-color); transform: translateY(-50%) scale(1.08); }

/* Nút "Xem tất cả" — viền trắng, giữa-dưới */
.lyn-rslider-footer { text-align: center; margin-top: clamp(28px, 3.5vw, 44px); }
.lyn-rslider-all {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600;
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: transparent;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 999px; padding: 14px 40px; text-decoration: none;
    transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.lyn-rslider-all:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-2px); }

@media (max-width: 767.98px) {
    .lyn-rslider-head { grid-template-columns: 1fr; gap: 12px; }
    .lyn-rslider-desc { align-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER BANNER --center — biến thể text CĂN GIỮA (bố cục "FEEL YOUR SWING" của Hoiana):
   1 cột giữa, overlay vignette (tối đều cho chữ nổi), 2 nút (sáng + viền).
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-chapter--center { text-align: center; }
.lyn-chapter--center .lyn-chapter-overlay {
    /* vignette: tối nhẹ đều + đậm hơn quanh chữ giữa để đọc rõ */
    background:
        radial-gradient(60% 55% at 50% 52%, rgba(20,20,20,.55) 0%, rgba(20,20,20,.25) 60%, rgba(20,20,20,.1) 100%),
        linear-gradient(180deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,.15) 30%, rgba(20,20,20,.15) 70%, rgba(20,20,20,.5) 100%);
}
.lyn-chapter--center .lyn-chapter-inner {
    display: block;                      /* bỏ grid 2 cột → 1 khối giữa */
    max-width: 640px;
    text-align: center;
}
.lyn-chapter--center .lyn-chapter-eyebrow { color: #EBD9B4; }
.lyn-chapter--center .lyn-chapter-title {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    letter-spacing: .04em;
    margin-bottom: 22px;
}
.lyn-chapter--center .lyn-chapter-desc {
    max-width: 46ch; margin: 0 auto 30px;
    color: rgba(255,255,255,.92);
}
/* 2 nút giữa */
.lyn-chapter-actions {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center;
}
.lyn-chapter--center .lyn-chapter-actions { justify-content: center; }
.lyn-chapter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    border-radius: 999px; padding: 14px 30px; text-decoration: none;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
/* Nút chính: nền TRẮNG chữ đậm (như "ĐẶT TEE TIME") */
.lyn-chapter-btn--light { background: #fff; color: #1c1c1c; border: 1.5px solid #fff; }
.lyn-chapter-btn--light:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-2px); }
/* Nút phụ: viền trắng trong suốt */
.lyn-chapter-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.lyn-chapter-btn--ghost:hover { background: #fff; color: #1c1c1c; border-color: #fff; transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════════
   MICE FEATURE — 2 cột (text trái + ảnh vuông phải + nút) — bố cục Hoiana
   "From Grand Gatherings". Nút → trang liên hệ.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-mice-feature .container { max-width: var(--lyn-container); }
.lyn-mice-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.lyn-mice-feature-text .lyn-eyebrow { display: block; margin-bottom: 14px; }
.lyn-mice-feature-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2; letter-spacing: .06em;
    color: var(--heading-color);
    margin: 0 0 18px; max-width: none;   /* dùng hết cột → 2 dòng */
    text-transform: uppercase;
    text-wrap: balance;
}
.lyn-mice-feature-desc {
    font-size: 1rem; line-height: 1.7; color: var(--text-color);
    max-width: 48ch; margin: 0 0 28px;
}
.lyn-mice-feature-btn { padding: 15px 32px; }
.lyn-mice-feature-media {
    aspect-ratio: 1 / 1;
    border-radius: var(--lyn-radius-lg, 22px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.lyn-mice-feature-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
    .lyn-mice-feature-grid { grid-template-columns: 1fr; gap: 28px; }
    .lyn-mice-feature-title { max-width: none; }
    .lyn-mice-feature-media { order: -1; }   /* mobile: ảnh lên trên */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIX + ANIMATION nâng cấp (rà soát tổng thể trang mẹ).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Tiêu đề section UPPERCASE bị CẮT trên mobile (nghỉ&nbsp;dưỡng quá dài) →
   cho phép xuống dòng bình thường + giảm cỡ + không tràn. */
@media (max-width: 575.98px) {
    .lyn-dslider-title, .lyn-oslider-title, .lyn-rslider-title,
    .lyn-explore-title, .lyn-mice-feature-title, .lyn-chapter-title,
    .lyn-story-title, .lyn-onsen-title, .lyn-insta-title, .lyn-destintro-title {
        font-size: clamp(1.02rem, 4.1vw, 1.22rem) !important;  /* nhỏ để KHÔNG tràn mép mobile */
        max-width: 100% !important;
        letter-spacing: 0 !important;                          /* bỏ tracking cho gọn tối đa */
        overflow-wrap: break-word;
        word-break: break-word;
        padding-inline: 2px;
    }
    /* Section head có chứa title canh giữa → chừa lề trong container cho mobile */
    .lyn-dslider-head, .lyn-rslider-head { padding-inline: 6px; }
}
/* Tiêu đề dslider dùng &nbsp; ("nghỉ dưỡng") — trên mobile nbsp gây tràn. Cho phép ngắt. */
@media (max-width: 575.98px) {
    .lyn-dslider-title { white-space: normal; }
    .lyn-dslider-title, .lyn-oslider-title { hyphens: none; }
}

/* ── ANIMATION: cơ chế .lyn-reveal / .lyn-reveal-stagger ĐÃ CÓ ở hospitality.css (gated
   .lyn-reveal-ready — an toàn nếu JS lỗi). KHÔNG định nghĩa lại ở đây để tránh xung đột.
   Chỉ NÂNG hiệu ứng: reveal mượt hơn (bezier + dịch xa hơn chút) — override transition thôi,
   vẫn giữ gate .lyn-reveal-ready. ── */
.lyn-reveal-ready .lyn-reveal {
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.lyn-reveal-ready .lyn-reveal-stagger > * {
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 KHỐI BỔ SUNG TRANG MẸ (docx: câu chuyện thương hiệu + onsen + instagram).
   Đồng bộ TUYỆT ĐỐI với .lyn-mice-feature (tiêu đề weight 400, cỡ clamp nhỏ,
   uppercase, letter-spacing .06em) — user yêu cầu tiêu đề THANH THOÁT.
   Màu nhấn CHÍNH = CAM var(--primary-color). Vàng đồng chỉ cho eyebrow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tiêu đề 3 khối: dùng CHUNG type scale với mice-feature (thanh thoát) ── */
.lyn-story-title, .lyn-onsen-title, .lyn-insta-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2; letter-spacing: .06em;
    color: var(--heading-color);
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0 0 18px;
}

/* ─────────────────────────  KHỐI 1 · BRAND STORY  ───────────────────────── */
.lyn-story .container { max-width: var(--lyn-container); }
.lyn-story-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;   /* chữ rộng hơn ảnh chút cho cân editorial */
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.lyn-story-text .lyn-eyebrow { display: block; margin-bottom: 14px; }
.lyn-story-title { max-width: 40ch; }   /* 3 dòng (58 ký tự) */
.lyn-story-lead {
    font-size: 1.02rem; line-height: 1.8; color: var(--text-color);
    max-width: 52ch; margin: 0 0 30px;
}
.lyn-story-pillars {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px;
}
.lyn-story-pillar { display: flex; gap: 16px; align-items: flex-start; }
.lyn-story-pillar-ic {
    flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    /* Gold nhạt thay cam (đồng bộ hệ màu tham khảo Hoiana). */
    background: rgba(221, 161, 94, .12);
    color: #af7432;
    font-size: 1.35rem;
}
.lyn-story-pillar-name {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; letter-spacing: .01em;
    color: var(--heading-color); margin: 2px 0 4px;
}
.lyn-story-pillar-desc {
    font-size: .94rem; line-height: 1.6; color: var(--text-color); margin: 0;
}
.lyn-story-media {
    border-radius: var(--lyn-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
    aspect-ratio: 4 / 5;   /* dọc, kiểu editorial */
}
.lyn-story-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
    .lyn-story-grid { grid-template-columns: 1fr; gap: 30px; }
    .lyn-story-title { max-width: none; }
    .lyn-story-media { order: -1; aspect-ratio: 16 / 10; }   /* mobile: ảnh lên trên, ngang lại */
}

/* ─────────────────────────  KHỐI 3 · ONSEN & WELLNESS  ──────────────────── */
.lyn-onsen .container { max-width: var(--lyn-container); }
.lyn-onsen-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;   /* ảnh trái hẹp hơn, chữ phải rộng hơn */
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.lyn-onsen-media {
    border-radius: var(--lyn-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
    aspect-ratio: 4 / 5;
}
.lyn-onsen-media img { width: 100%; height: 100%; object-fit: cover; }
.lyn-onsen-text .lyn-eyebrow { display: block; margin-bottom: 14px; }
.lyn-onsen-title { max-width: none; }   /* dùng hết cột → 2 dòng */
.lyn-onsen-lead {
    font-size: 1.02rem; line-height: 1.8; color: var(--text-color);
    max-width: 52ch; margin: 0 0 26px;
}
.lyn-onsen-points {
    list-style: none; margin: 0 0 30px; padding: 0;
    display: grid; gap: 16px;
}
.lyn-onsen-point { display: flex; gap: 14px; align-items: flex-start; }
.lyn-onsen-point-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    /* Gold nhạt thay cam (đồng bộ hệ màu tham khảo Hoiana). */
    background: rgba(221, 161, 94, .12);
    color: #af7432;
    font-size: 1.1rem;
}
.lyn-onsen-point-tx {
    font-size: .97rem; line-height: 1.55; color: var(--text-color);
    padding-top: 9px;
}
.lyn-onsen-btn { padding: 15px 32px; }

@media (max-width: 860px) {
    .lyn-onsen-grid { grid-template-columns: 1fr; gap: 30px; }
    .lyn-onsen-title { max-width: none; }
    .lyn-onsen-media { order: -1; aspect-ratio: 16 / 10; }
}

/* ─────────────────────  KHỐI 2 · INSTAGRAM VÔ CỰC  ──────────────────────── */
/* Băng ảnh 1:1 bo góc chạy ngang liên tục. Marquee CSS thuần (translateX -50%
   với track nhân đôi = seamless). Tôn trọng prefers-reduced-motion. */
.lyn-insta { overflow: hidden; }   /* băng ảnh tràn 2 mép, section không cho body cuộn ngang */
.lyn-insta-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.lyn-insta-head .lyn-eyebrow { justify-content: center; }
.lyn-insta-head .lyn-eyebrow::before { display: none; }   /* eyebrow căn giữa: bỏ gạch trái lệch */
.lyn-insta-title { max-width: none; }

.lyn-insta-marquee {
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lyn-insta-track {
    display: flex;
    gap: clamp(14px, 1.4vw, 22px);
    width: max-content;
    animation: lyn-insta-scroll 48s linear infinite;
    will-change: transform;
}
.lyn-insta-marquee:hover .lyn-insta-track { animation-play-state: paused; }   /* rê chuột thì dừng */

.lyn-insta-item {
    position: relative;
    flex: 0 0 auto;
    width: clamp(180px, 20vw, 260px);
    aspect-ratio: 1 / 1;                      /* TỈ LỆ 1:1 (yêu cầu) */
    border-radius: var(--lyn-radius-lg);      /* BO GÓC (yêu cầu) */
    overflow: hidden;
    display: block;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.lyn-insta-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.lyn-insta-item:hover img { transform: scale(1.06); }
.lyn-insta-ic {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #fff; font-size: 1.8rem;
    background: rgba(var(--primary-color-rgb), .0);
    opacity: 0; transition: opacity .4s ease, background .4s ease;
}
.lyn-insta-item:hover .lyn-insta-ic {
    opacity: 1;
    background: rgba(var(--primary-color-rgb), .34);   /* phủ CAM khi hover */
}

.lyn-insta-foot { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
.lyn-insta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 30px; border-radius: 999px;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600; font-size: .95rem; letter-spacing: .02em;
    text-transform: uppercase;
    background: transparent;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.lyn-insta-btn:hover {
    background: var(--primary-color); color: #fff;
    transform: translateY(-2px);
}

@keyframes lyn-insta-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* track nhân đôi → -50% là hết 1 vòng, liền mạch */
}
@media (prefers-reduced-motion: reduce) {
    .lyn-insta-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .lyn-insta-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ── DẢI CARD DỊCH VỤ chạy vô cực, FULL-BLEED (.lyn-srvmarq) — ảnh 1:1 + overlay
   tên/mô tả. Tràn 2 mép màn hình. ──
   Trang chi tiết bọc nội dung trong .container (max 1320px). Để tràn full màn, CHÍNH
   SECTION phải thoát .container bằng 100vw + margin âm theo viewport. KHÔNG đặt
   overflow:hidden ở section (sẽ cắt cụt); clip nằm ở .lyn-srvmarq-track-wrap. */
.lyn-srvmarq {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}
.lyn-srvmarq-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.lyn-srvmarq-head .lyn-eyebrow { justify-content: center; }
.lyn-srvmarq-head .lyn-eyebrow::before { display: none; }
.lyn-srvmarq-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.2;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--heading-color); margin: 0;
}
/* Section đã full-bleed → track-wrap chỉ cần rộng 100% + clip marquee ở đây. */
.lyn-srvmarq-track-wrap {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.lyn-srvmarq-track {
    display: flex;
    gap: clamp(14px, 1.4vw, 22px);
    width: max-content;
    padding-inline: clamp(14px, 1.4vw, 22px);
    animation: lyn-insta-scroll 55s linear infinite;
    will-change: transform;
}
.lyn-srvmarq-track-wrap:hover .lyn-srvmarq-track { animation-play-state: paused; }
.lyn-srvmarq-item {
    position: relative;
    flex: 0 0 auto;
    width: clamp(240px, 24vw, 320px);
    aspect-ratio: 1 / 1;
    border-radius: var(--lyn-radius-lg);
    overflow: hidden;
    display: block;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.lyn-srvmarq-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.lyn-srvmarq-item:hover img { transform: scale(1.06); }
/* Overlay chữ: gradient tối từ đáy lên → tên + mô tả + "Xem thêm". */
.lyn-srvmarq-cap {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 4px; padding: 18px 18px 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 72%);
}
.lyn-srvmarq-name {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.12rem; line-height: 1.2;
}
.lyn-srvmarq-desc {
    font-size: .86rem; line-height: 1.45;
    color: rgba(255,255,255,.9);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lyn-srvmarq-go {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-family: var(--font-display); font-weight: 600; font-size: .82rem;
    letter-spacing: .03em; text-transform: uppercase;
    color: #fff;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.lyn-srvmarq-item:hover .lyn-srvmarq-go { opacity: 1; transform: translateY(0); }
.lyn-srvmarq-go i { transition: transform .3s ease; }
.lyn-srvmarq-item:hover .lyn-srvmarq-go i { transform: translateX(4px); }
.lyn-srvmarq-foot { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
@media (prefers-reduced-motion: reduce) {
    .lyn-srvmarq-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .lyn-srvmarq-track-wrap { -webkit-mask-image: none; mask-image: none; }
}

/* ─────────────────  SECTION MỜI KHÁM PHÁ ĐIỂM ĐẾN (destintro)  ────────────
   Chèn giữa Instagram và "Các khu nghỉ dưỡng". Bố cục ẢNH TRÁI + CHỮ PHẢI (SO LE
   với mice-feature). Ảnh VUÔNG 1:1. Đồng bộ type scale + màu cam. */
.lyn-destintro .container { max-width: var(--lyn-container); }
.lyn-destintro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.lyn-destintro-media {
    aspect-ratio: 1 / 1;                    /* VUÔNG 1:1 (yêu cầu) */
    border-radius: var(--lyn-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.lyn-destintro-media img { width: 100%; height: 100%; object-fit: cover; }
.lyn-destintro-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2; letter-spacing: .06em;
    color: var(--heading-color);
    text-transform: uppercase; text-wrap: balance;
    margin: 0 0 18px; max-width: none;   /* dùng hết cột → 2 dòng */
}
.lyn-destintro-text .lyn-eyebrow { display: block; margin-bottom: 14px; }
.lyn-destintro-lead {
    font-size: 1.02rem; line-height: 1.8; color: var(--text-color);
    max-width: 52ch; margin: 0 0 28px;
}
.lyn-destintro-btn { padding: 15px 32px; }

@media (max-width: 860px) {
    .lyn-destintro-grid { grid-template-columns: 1fr; gap: 30px; }
    .lyn-destintro-title { max-width: none; }
    .lyn-destintro-media { order: -1; }     /* mobile: ảnh lên trên */
}

/* ── Tên resort trong marquee "Các khu nghỉ dưỡng" → MÀU CAM (yêu cầu) ── */
.lyn-marquee .lyn-resort-card-name { color: var(--primary-color) !important; }

/* ── ĐỒNG BỘ tiêu đề "Các khu nghỉ dưỡng" (marquee) với các section khác ──
   Bản gốc ở hospitality.css để CAM + weight 700 (lệch chuẩn). Override tại đây
   (design-system nạp sau) về: thanh mảnh 400, UPPERCASE, giãn chữ, MÀU HEADING (không cam). */
.lyn-marquee-title {
    font-family: var(--font-display);
    font-weight: 400 !important;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem) !important;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--heading-color) !important;   /* KHÔNG cam — tiêu đề section dùng màu heading */
    text-wrap: balance;
}
/* Eyebrow marquee "HỆ THỐNG LYNNTIMES" → vàng đồng như eyebrow các section khác (bản gốc để cam). */
.lyn-marquee-sub { color: var(--secondary-color) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRANG PHỤ LISTING (lưu trú/ẩm thực/MICE) — giao diện kiểu hoiana.com/hotels,
   /dining, /meetings: section INTRO 2 cột + GRID CARD LỚN (ảnh to + tag trên ảnh
   + tên + thông số + 2 CTA). Data Lynntimes. Đồng bộ token + màu cam + font thanh mảnh.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section INTRO đầu trang phụ (2 cột text + ảnh, kiểu Hoiana "giới thiệu khái quát") ── */
.lyn-lpintro { padding-block: clamp(56px, 6vw, 96px); }
.lyn-lpintro .container { max-width: var(--lyn-container); }
.lyn-lpintro-grid {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 5vw, 72px); align-items: center;
}
.lyn-lpintro-text .lyn-eyebrow { display: block; margin-bottom: 14px; }
.lyn-lpintro-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2;
    letter-spacing: .04em; text-transform: uppercase; color: var(--heading-color);
    text-wrap: balance; margin: 0 0 18px;
}
.lyn-lpintro-lead { font-size: 1.02rem; line-height: 1.8; color: var(--text-color); max-width: 54ch; margin: 0; }
.lyn-lpintro-media {
    aspect-ratio: 4 / 3; border-radius: var(--lyn-radius-lg); overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.lyn-lpintro-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
    .lyn-lpintro-grid { grid-template-columns: 1fr; gap: 30px; }
    .lyn-lpintro-media { order: -1; }
}

/* ── GRID CARD LỚN kiểu Hoiana ── */
.lyn-lp { padding-block: clamp(40px, 5vw, 80px); }
.lyn-lp .container { max-width: var(--lyn-container); }
.lyn-lp-head { margin-bottom: clamp(30px, 4vw, 48px); }
.lyn-lp-head .lyn-eyebrow { display: block; margin-bottom: 12px; }
.lyn-lp-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.2;
    letter-spacing: .06em; text-transform: uppercase; color: var(--heading-color); margin: 0;
}
.lyn-lp-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 2.6vw, 40px);
}
@media (min-width: 1100px) { .lyn-lp-grid.lyn-lp-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .lyn-lp-grid { grid-template-columns: 1fr; } }

.lyn-lpcard {
    display: flex; flex-direction: column;
    background: var(--lyn-surface);
    border-radius: var(--lyn-radius-lg); overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
    height: 100%;
}
.lyn-lpcard:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(0,0,0,.14); }

/* Ảnh lớn + tag nổi trên ảnh (INDOOR/OUTDOOR, loại ẩm thực...) */
.lyn-lpcard-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.lyn-lpcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.lyn-lpcard:hover .lyn-lpcard-media img { transform: scale(1.06); }
.lyn-lpcard-tags { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.lyn-lpcard-tag {
    background: rgba(255,255,255,.92); color: var(--heading-color);
    font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}
.lyn-lpcard-tag--accent { background: var(--primary-color); color: #fff; }

/* Thân card */
.lyn-lpcard-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.lyn-lpcard-name {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.3;
    color: var(--heading-color); margin: 0 0 12px;
}
.lyn-lpcard-name a { color: inherit; }
.lyn-lpcard-name a:hover { color: var(--primary-color); }
.lyn-lpcard-facts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lyn-lpcard-facts > li { font-size: .88rem; color: var(--text-color); display: inline-flex; align-items: center; gap: 5px; }
.lyn-lpcard-facts > li i { color: var(--primary-color); font-size: .95rem; }
.lyn-lpcard-desc { font-size: .94rem; line-height: 1.65; color: var(--text-color); margin: 0 0 20px; }

/* Giá + CTA kép — đẩy xuống đáy card */
.lyn-lpcard-foot { margin-top: auto; }
.lyn-lpcard-price { font-size: .9rem; color: var(--text-color); margin: 0 0 14px; }
.lyn-lpcard-price strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--primary-color); font-weight: 600; }
.lyn-lpcard-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lyn-lpcard-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-color); color: #fff;
    font-size: .84rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 12px 24px; border-radius: 999px;
    transition: background .3s ease, transform .3s ease;
}
.lyn-lpcard-btn:hover { background: var(--primary-color-hover); color: #fff; transform: translateY(-2px); }
.lyn-lpcard-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--heading-color); font-size: .84rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease;
}
.lyn-lpcard-link i { transition: transform .3s ease; }
.lyn-lpcard-link:hover { color: var(--primary-color); border-color: var(--primary-color); }
.lyn-lpcard-link:hover i { transform: translateX(4px); }

/* Empty + pagination căn giữa (giữ) */
.lyn-lp-empty { text-align: center; color: var(--text-color); padding-block: clamp(48px, 8vw, 96px); }

/* ── GÓI DỊCH VỤ (.lyn-pkg) — card không ảnh: tên + giá nổi bật + quyền lợi + CTA.
   Dùng chung khung .lyn-lp (head/eyebrow/tiêu đề) với card phòng để đồng bộ. ── */
.lyn-pkg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 2 cột/dòng */
    gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 767.98px) { .lyn-pkg-grid { grid-template-columns: 1fr; } }
.lyn-pkgcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: var(--lyn-radius-lg, 20px);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.lyn-pkgcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .1);
    border-color: rgba(var(--secondary-color-rgb, 201,162,75), .5);
}
/* Ảnh trên đầu card + badge giá góc trên (kiểu card phòng). */
.lyn-pkgcard-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.lyn-pkgcard-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.lyn-pkgcard:hover .lyn-pkgcard-media img { transform: scale(1.06); }
.lyn-pkgcard-badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--primary-color); color: #fff;
    font-family: var(--font-display); font-weight: 600; font-size: .82rem;
    padding: 6px 13px; border-radius: 999px;
}
.lyn-pkgcard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(22px, 2.2vw, 30px);
}
.lyn-pkgcard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.lyn-pkgcard-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.18rem;
    color: var(--heading-color);
    margin: 0;
}
.lyn-pkgcard-price {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
}
.lyn-pkgcard-price span {
    display: inline;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .82rem;
    color: var(--text-color);
    margin-left: 4px;
}
.lyn-pkgcard-sub { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-color); }
.lyn-pkgcard-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}
.lyn-pkgcard-list > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .94rem;
    line-height: 1.5;
    color: var(--text-color);
}
.lyn-pkgcard-list > li i {
    color: var(--secondary-color);
    font-size: 1rem;
    margin-top: 2px;
    flex: 0 0 auto;
}
.lyn-pkgcard-btn {
    width: 100%;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .02em;
    transition: background .25s ease, transform .25s ease;
}
.lyn-pkgcard-btn:hover {
    background: var(--primary-color-hover);
    color: #fff;
    transform: translateY(-2px);
}

/* ── "Xem thêm N gói" — <details> thuần, không JS. Phần dư (ô 5+) ẩn/hiện. ── */
.lyn-pkg-more { margin-top: 0; }
.lyn-pkg-more > .lyn-pkg-grid { margin-top: clamp(24px, 2.6vw, 40px); }
/* Grid ẩn khi chưa mở; hiện khi <details open>. */
.lyn-pkg-more:not([open]) > .lyn-pkg-grid { display: none; }
/* Summary = nút căn giữa (như .lyn-insta-btn), đặt DƯỚI grid nhờ order. */
.lyn-pkg-more { display: flex; flex-direction: column; }
.lyn-pkg-more > .lyn-pkg-grid { order: 1; }
.lyn-pkg-more-btn { order: 2; }
.lyn-pkg-more-btn {
    list-style: none; cursor: pointer;
    align-self: center;
    margin-top: clamp(28px, 3.4vw, 44px);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 32px; border-radius: 999px;
    border: 1.5px solid var(--primary-color); color: var(--primary-color);
    font-family: var(--font-display); font-weight: 600; font-size: .92rem;
    letter-spacing: .03em; text-transform: uppercase;
    background: transparent;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.lyn-pkg-more-btn::-webkit-details-marker { display: none; }
.lyn-pkg-more-btn:hover { background: var(--primary-color); color: #fff; transform: translateY(-2px); }
.lyn-pkg-more-btn i { transition: transform .3s ease; }
/* Đổi nhãn Show ⇄ Hide theo trạng thái open. */
.lyn-pkg-more[open] .lyn-pkg-more-show { display: none; }
.lyn-pkg-more:not([open]) .lyn-pkg-more-hide { display: none; }
.lyn-pkg-more-show, .lyn-pkg-more-hide { display: inline-flex; align-items: center; gap: 8px; }


/* ── FIX nền loang lổ trang phụ listing ──
   .lyn-section:nth-of-type(even) tự cho nền kem → trên trang phụ khiến khối grid/instagram/
   explore bị nền kem như box riêng lạc lõng (xấu). Ép các section trang phụ về NỀN TRẮNG
   liền mạch (giống Hoiana — nền trắng xuyên suốt). */
.lyn-lpintro, .lyn-lp, .lyn-xplore.lyn-section, .lyn-insta.lyn-section {
    background: var(--lyn-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION "KHÁM PHÁ THÊM" cho TRANG PHỤ (.lyn-xplore) — CSS COPY Y HỆT .lyn-explore
   của trang mẹ, đổi prefix để ĐỘC LẬP (sửa trang phụ không đụng trang mẹ). Chấp nhận lặp.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-xplore .container { max-width: var(--lyn-container); }

/* Header: tiêu đề trái (rộng) + mô tả phải (nhỏ, màu accent) — bất đối xứng editorial */
.lyn-xplore-head {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: clamp(20px, 4vw, 64px);
    align-items: start;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.lyn-xplore-head-main { min-width: 0; }
/* Eyebrow trên tiêu đề: gạch vàng + chữ, đồng bộ với các section head khác. */
.lyn-xplore-head-main .lyn-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0 0 14px;
}
.lyn-xplore-head-main .lyn-eyebrow::before {
    content: "";
    width: 30px; height: 2px;
    background: var(--secondary-color);
    flex: 0 0 30px;
}
.lyn-xplore-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--heading-color);
    max-width: 20ch;
    margin: 0;
    text-wrap: balance;
}
.lyn-xplore-desc {
    color: var(--primary-color);
    font-size: .98rem;
    line-height: 1.6;
    max-width: 40ch;
    margin: 0;
    align-self: end;
}

.lyn-xplore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
}

.lyn-xplore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1 / 1;
    border-radius: var(--lyn-radius, 14px);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    box-shadow: var(--lyn-shadow, 0 6px 24px rgba(0,0,0,.07));
    transition: transform .35s ease, box-shadow .35s ease;
}
.lyn-xplore-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lyn-shadow-hover, 0 14px 38px rgba(0,0,0,.16));
}
.lyn-xplore-card-media {
    position: absolute; inset: 0; z-index: -2;
}
.lyn-xplore-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s ease;
}
.lyn-xplore-card:hover .lyn-xplore-card-media img { transform: scale(1.06); }
.lyn-xplore-card::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20,32,31,0) 30%, rgba(20,32,31,.35) 62%, rgba(20,32,31,.82) 100%);
}
.lyn-xplore-card-body {
    position: relative; z-index: 1;
    padding: clamp(18px, 2vw, 26px);
    color: #fff;
}
.lyn-xplore-card-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.2;
    margin-bottom: 12px;
    text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
.lyn-xplore-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 3px;
    border-bottom: 1.5px solid rgba(255,255,255,.5);
    transition: gap .25s ease, border-color .25s ease;
}
.lyn-xplore-card:hover .lyn-xplore-card-cta {
    gap: 12px;
    border-bottom-color: var(--primary-color);
}
.lyn-xplore-card-cta i { transition: transform .25s ease; }
.lyn-xplore-card:hover .lyn-xplore-card-cta i { transform: translateX(3px); }

@media (max-width: 767.98px) {
    .lyn-xplore-head { grid-template-columns: 1fr; gap: 12px; }
    .lyn-xplore-desc { align-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANG CHI TIẾT hospitality (.lyn-dt-*) — room/restaurant/experience/mice-space/offer.
   CSS RIÊNG (clone tinh thần trang mẹ: eyebrow vàng đồng, tiêu đề thanh mảnh uppercase,
   card mềm bỏ border thô, aside sticky đẹp). Độc lập — không đụng trang đang dùng.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-dt { padding-block: clamp(48px, 6vw, 96px); }
.lyn-dt .container { max-width: var(--lyn-container); }
.lyn-dt-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(28px, 4vw, 60px); align-items: start;
}
@media (max-width: 991.98px) { .lyn-dt-grid { grid-template-columns: 1fr; } }

.lyn-dt-eyebrow {
    display: inline-block; color: var(--secondary-color);
    font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    margin-bottom: 14px;
}
.lyn-dt-lead {
    font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.8;
    color: var(--heading-color); font-weight: 400; margin: 0 0 24px;
}
.lyn-dt-content { color: var(--text-color); line-height: 1.8; }
.lyn-dt-content h2, .lyn-dt-content h3 { color: var(--heading-color); font-weight: 500; margin-top: 1.6em; }
.lyn-dt-content img { max-width: 100%; height: auto; border-radius: var(--lyn-radius-lg); margin: 1em 0; }

.lyn-dt-subtitle {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem); letter-spacing: .04em; text-transform: uppercase;
    color: var(--heading-color); margin: clamp(40px, 4.5vw, 60px) 0 22px;
    text-wrap: balance;
}

.lyn-dt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.lyn-dt-card {
    background: var(--lyn-surface-2); border: 0; border-radius: var(--lyn-radius-lg);
    padding: 22px 22px; height: 100%;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.lyn-dt-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.09); }
.lyn-dt-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--lyn-radius-lg) - 8px); margin-bottom: 14px; }
.lyn-dt-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--heading-color); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lyn-dt-card p { font-size: .92rem; line-height: 1.6; color: var(--text-color); margin: 0; }
.lyn-dt-card-price { font-family: var(--font-display); color: var(--primary-color); font-weight: 600; }
.lyn-dt-card ul { margin: 8px 0 0; padding-left: 18px; }
.lyn-dt-card li { font-size: .9rem; line-height: 1.6; color: var(--text-color); }
.lyn-dt-badge { background: rgba(var(--primary-color-rgb), .12); color: var(--primary-color); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }

.lyn-dt-packages { list-style: none; margin: 0; padding: 0; }
.lyn-dt-packages > li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.lyn-dt-packages strong { font-weight: 600; color: var(--heading-color); }
.lyn-dt-packages .lyn-dt-card-price { white-space: nowrap; }

.lyn-dt-facts { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.lyn-dt-facts > li { background: rgba(var(--primary-color-rgb), .07); color: var(--heading-color); border-radius: 999px; padding: 8px 16px; font-size: .9rem; }
.lyn-dt-facts > li strong { color: var(--primary-color); }

.lyn-dt .accordion-item { border: 0; border-bottom: 1px solid rgba(0,0,0,.08); background: transparent; }
.lyn-dt .accordion-button { background: transparent; font-weight: 500; color: var(--heading-color); padding-inline: 0; font-size: 1.02rem; }
.lyn-dt .accordion-button:not(.collapsed) { color: var(--primary-color); box-shadow: none; }
.lyn-dt .accordion-button:focus { box-shadow: none; }
.lyn-dt .accordion-body { padding-inline: 0; color: var(--text-color); line-height: 1.7; }

.lyn-dt-aside {
    /* KHÔNG đóng khung thành "cục hộp": bỏ nền/shadow/border, chỉ 1 đường kẻ mảnh bên trái
       (accent cam) làm mốc — giá + nút nổi trực tiếp trên nền trang, thanh thoát, không lạc lõng. */
    background: transparent; border: 0;
    border-left: 2px solid rgba(var(--primary-color-rgb), .25);
    border-radius: 0; padding: 6px 0 6px 24px;
    box-shadow: none; position: sticky; top: 110px;
}
.lyn-dt-aside-label { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-color); margin: 0 0 4px; }
.lyn-dt-aside-price { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 2.8vw, 2.15rem); color: var(--primary-color); margin: 0 0 22px; line-height: 1.05; }
.lyn-dt-aside-price small { color: var(--text-color); font-weight: 400; font-size: .9rem; }
.lyn-dt-aside-meta { font-size: .92rem; color: var(--text-color); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.lyn-dt-aside-hours { list-style: none; margin: 0 0 18px; padding: 0; font-size: .86rem; color: var(--text-color); }
.lyn-dt-aside-hours > li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.lyn-dt-aside-hours strong { color: var(--heading-color); font-weight: 600; text-transform: uppercase; font-size: .78rem; }
/* Nút .lyn-btn trong aside: full-width, xếp dọc */
.lyn-dt-aside .lyn-btn, .lyn-dt-aside .btn { display: flex; width: 100%; justify-content: center; padding: 14px 22px; font-weight: 600; margin-top: 4px; }
.lyn-dt-aside .lyn-btn + .lyn-btn { margin-top: 10px; }
.lyn-dt-aside hr { border: 0; border-top: 1px solid rgba(0,0,0,.08); margin: 20px 0; }
.lyn-dt-aside-dest { font-size: .86rem; color: var(--text-color); margin: 0; }
.lyn-dt-aside-dest a { color: var(--primary-color); }

.lyn-dt-more { padding-block: clamp(48px, 5vw, 80px); background: var(--lyn-surface-2); }
.lyn-dt-more .container { max-width: var(--lyn-container); }
.lyn-dt-more-head { text-align: center; margin-bottom: clamp(28px, 3.5vw, 44px); }
.lyn-dt-more-head .lyn-dt-eyebrow { display: block; }
.lyn-dt-more-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.1vw, 1.85rem); letter-spacing: .06em; text-transform: uppercase; color: var(--heading-color); margin: 0; }
.lyn-dt-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 2vw, 32px); margin-top: clamp(20px, 2.5vw, 36px); }
.lyn-dt-more-card { display: flex; flex-direction: column; background: var(--lyn-surface); border-radius: var(--lyn-radius-lg); overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.07); transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; text-decoration: none; }
.lyn-dt-more-card:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(0,0,0,.13); }
.lyn-dt-more-media { aspect-ratio: 3 / 2; overflow: hidden; }
.lyn-dt-more-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.lyn-dt-more-card:hover .lyn-dt-more-media img { transform: scale(1.06); }
.lyn-dt-more-body { padding: 20px 22px; }
.lyn-dt-more-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--heading-color); margin: 0 0 6px; }
.lyn-dt-more-price { font-size: .9rem; color: var(--text-color); }
.lyn-dt-more-price strong { color: var(--primary-color); font-family: var(--font-display); font-size: 1.05rem; }

/* Bảng sức chứa MICE — mềm, đồng bộ */
.lyn-dt-table { width: 100%; margin: 0; }
.lyn-dt-table th, .lyn-dt-table td { padding: 12px 4px; border-bottom: 1px solid rgba(0,0,0,.07); font-size: .95rem; }
.lyn-dt-table th { font-weight: 600; color: var(--heading-color); }
.lyn-dt-table td { color: var(--text-color); text-align: right; }

/* ── Gallery ảnh trang chi tiết (.lyn-dtgallery) — 1 ảnh lớn + lưới ảnh nhỏ, lightbox ── */
.lyn-dtgallery { padding-top: clamp(28px, 4vw, 52px); padding-bottom: 0; }
.lyn-dtgallery .container { max-width: var(--lyn-container); }
/* Tiêu đề + subtitle CĂN GIỮA ngay dưới hero, trên gallery */
.lyn-dtgallery-head { text-align: center; margin: 0 auto clamp(22px, 3vw, 36px); max-width: 760px; }
.lyn-dtgallery-head .lyn-eyebrow {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; margin: 0 0 12px;
}
.lyn-dtgallery-head .lyn-eyebrow::before,
.lyn-dtgallery-head .lyn-eyebrow::after {
    content: ""; width: 30px; height: 2px; background: var(--secondary-color); flex: 0 0 30px;
}
.lyn-dtgallery-title {
    display: block; margin: 0;
    color: var(--heading-color);
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: .04em;
}
.lyn-dtgallery-grid {
    display: grid; grid-template-columns: 1.6fr 1fr;
    gap: clamp(12px, 1.2vw, 18px);
    border-radius: var(--lyn-radius-lg); overflow: hidden;
    aspect-ratio: 21 / 9;
}
.lyn-dtgallery-grid--solo { grid-template-columns: 1fr; aspect-ratio: 16 / 7; }
.lyn-dtgallery-big { display: block; overflow: hidden; position: relative; }
.lyn-dtgallery-big img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.lyn-dtgallery-big:hover img { transform: scale(1.04); }
.lyn-dtgallery-side {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.2vw, 18px);
    grid-auto-rows: 1fr;
}
.lyn-dtgallery-side:has(.lyn-dtgallery-thumb:only-child) { grid-template-columns: 1fr; }
.lyn-dtgallery-thumb { display: block; overflow: hidden; position: relative; }
.lyn-dtgallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.lyn-dtgallery-thumb:hover img { transform: scale(1.06); }
/* Icon phóng to khi hover */
.lyn-dtgallery-big::after, .lyn-dtgallery-thumb::after {
    content: "\F3E5"; font-family: "bootstrap-icons";
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 1.6rem; background: rgba(20,32,31,0);
    opacity: 0; transition: opacity .35s ease, background .35s ease;
}
.lyn-dtgallery-big:hover::after, .lyn-dtgallery-thumb:hover::after {
    opacity: 1; background: rgba(20,32,31,.28);
}
@media (max-width: 767.98px) {
    .lyn-dtgallery-grid { grid-template-columns: 1fr; aspect-ratio: auto; }
    .lyn-dtgallery-big { aspect-ratio: 16 / 10; }
    .lyn-dtgallery-side { grid-template-columns: 1fr 1fr; }
    .lyn-dtgallery-thumb { aspect-ratio: 4 / 3; }
}

/* ── Điểm nổi bật: card có ICON tròn cam (thân thiện hơn card chữ trơ) ── */
.lyn-dt-hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.lyn-dt-hlcard {
    background: var(--lyn-surface-2); border-radius: var(--lyn-radius-lg);
    padding: 26px 24px; height: 100%;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.lyn-dt-hlcard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.09); }
.lyn-dt-hlcard-ic {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; margin-bottom: 16px;
    background: rgba(var(--primary-color-rgb), .10); color: var(--primary-color); font-size: 1.4rem;
}
.lyn-dt-hlcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--heading-color); margin: 0 0 6px; }
.lyn-dt-hlcard p { font-size: .92rem; line-height: 1.6; color: var(--text-color); margin: 0; }

/* ── Tiện nghi: mỗi mục ICON + tên trong ô mềm (grid gọn, dễ quét) ── */
.lyn-dt-amenity-group { margin-top: clamp(22px, 2.5vw, 32px); }
.lyn-dt-amenity-group-name {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--secondary-color); margin: 0 0 14px;
}
.lyn-dt-amenity-group-name::before { content: ""; width: 22px; height: 2px; background: var(--secondary-color); border-radius: 2px; }
.lyn-dt-amenity-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; }
.lyn-dt-amenity-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--lyn-surface); border: 1px solid rgba(0,0,0,.06); border-radius: 12px;
    padding: 11px 14px; font-size: .94rem; color: var(--heading-color);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.lyn-dt-amenity-item:hover { border-color: rgba(var(--primary-color-rgb), .35); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.lyn-dt-amenity-item i { color: var(--primary-color); font-size: 1.15rem; flex: 0 0 auto; }

/* ── Thông tin nhanh: pill có icon (rõ ràng hơn) ── */
.lyn-dt-quickfacts { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.lyn-dt-quickfacts > li {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(var(--primary-color-rgb), .07); color: var(--heading-color);
    border-radius: 999px; padding: 10px 18px; font-size: .95rem;
}
.lyn-dt-quickfacts > li i { color: var(--primary-color); font-size: 1.05rem; }
.lyn-dt-quickfacts > li strong { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   FIX căn cột + nền trang chi tiết (user: nền kem nhờ nhờ + title banner lệch cột).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) BỎ nền kem của .lyn-dt (nth-of-type even tự nhuộm) → TRẮNG liền mạch với gallery. */
.lyn-dt.lyn-section, .lyn-dtgallery.lyn-section { background: var(--lyn-surface) !important; }

/* 2) ĐỒNG BỘ MÉP: banner title + gallery + thân đều dùng CÙNG max-width (--lyn-container).
   .container Bootstrap đổi max-width theo breakpoint (1140/1320) → lệch cột với section
   body (1200). Ép banner container về đúng --lyn-container để title thẳng cột. */
.lyn-page-banner .container { max-width: var(--lyn-container) !important; }

/* 3) GALLERY + THÂN = 1 SECTION LIỀN MẠCH (ảnh mô tả cho sản phẩm ngay dưới).
   Dòng "SECTION RHYTHM" ép .lyn-section padding 150px !important → tạo khoảng trống lớn
   giữa gallery và thân. Dùng selector 2-class (specificity cao hơn) để BỎ khoảng cách GIỮA:
   gallery bỏ padding-bottom, thân bỏ padding-top → 2 khối dính liền. */
.lyn-section.lyn-dtgallery { padding-bottom: 0 !important; }
.lyn-section.lyn-dt { padding-top: clamp(20px, 2.4vw, 32px) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM THU LEAD (.lyn-lead — Đặt bàn / Gọi tư vấn / Báo giá) — đồng bộ với web:
   bỏ nền hồng cục → nền kem nhã, input BO TRÒN, font đồng bộ, tiêu đề thanh mảnh.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Giãn dòng rộng hơn cho thoáng (bố cục 2 cột — cột phải là form) */
.lyn-lead form.row { row-gap: clamp(20px, 2.4vw, 30px) !important; }

/* Nhãn field — nhỏ, nhẹ, MÀU CAM (chủ đạo) */
.lyn-lead .form-label {
    font-family: var(--font-body);
    font-weight: 600; font-size: .78rem;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 4px;
}

/* Input / select / textarea — GẠCH CHÂN tinh tế (không hộp viền dày), nền trong suốt,
   mảnh mai, thanh thoát — kiểu form resort cao cấp. */
.lyn-lead .form-control,
.lyn-lead .form-select {
    font-family: var(--font-body); font-size: 1rem;
    color: var(--heading-color);
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.16) !important;
    border-radius: 0 !important;
    padding: 8px 2px !important;
    min-height: 42px;
    box-shadow: none !important;
    transition: border-color .3s ease;
}
.lyn-lead textarea.form-control { min-height: 90px; border: 1px solid rgba(0,0,0,.14) !important; border-radius: 12px; padding: 12px 14px !important; }
.lyn-lead .form-control::placeholder { color: rgba(0,0,0,.3); }
.lyn-lead .form-control:focus,
.lyn-lead .form-select:focus {
    border-bottom-color: var(--primary-color) !important;
    box-shadow: none !important; outline: none;
}
.lyn-lead textarea.form-control:focus { border-color: var(--primary-color) !important; }

/* Nút "Gửi yêu cầu" — CHỈ nhắm nút submit (KHÔNG nhắm .btn chung vì bootstrap-select
   bọc <select> thành .btn dropdown-toggle → nếu nhuộm cam sẽ hỏng ô "Loại sự kiện"). */
.lyn-lead button[type="submit"] {
    background: var(--primary-color) !important;
    border: 0 !important; color: #fff !important;
    border-radius: 999px !important;
    padding: 13px 40px !important;
    font-family: var(--font-display); font-weight: 600;
    font-size: .92rem; letter-spacing: .04em;
    box-shadow: none;
    transition: background .3s ease, transform .3s ease;
    margin-top: 8px;
}
.lyn-lead button[type="submit"]:hover {
    background: var(--primary-color-hover) !important;
    transform: translateY(-2px);
}

/* Ô "Loại sự kiện" (bootstrap-select bọc select → .btn.dropdown-toggle):
   khớp CHÍNH XÁC phong cách + CHIỀU CAO gạch chân của input khác (thẳng hàng). */
.lyn-lead .bootstrap-select { width: 100% !important; border: 0 !important; box-shadow: none !important; }
/* Bỏ MỌI đường viền/gạch PHỤ của bootstrap-select — chỉ giữ 1 gạch chân duy nhất ở
   .dropdown-toggle (user báo bị 2 gạch, gạch 2 thừa). */
.lyn-lead .bootstrap-select::before, .lyn-lead .bootstrap-select::after,
.lyn-lead .bootstrap-select .filter-option,
.lyn-lead .bootstrap-select .filter-option-inner { border: 0 !important; box-shadow: none !important; }
/* .form-control cao 42px, padding 8px 2px → phần text baseline ~cùng vị trí. Ép ô select
   ĐÚNG như vậy để gạch chân thẳng hàng tuyệt đối với ô bên cạnh. */
.lyn-lead .bootstrap-select > .btn.dropdown-toggle {
    background: transparent !important;
    color: var(--heading-color) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.16) !important;
    border-radius: 0 !important;
    height: 42px !important; min-height: 42px !important;
    padding: 8px 24px 8px 2px !important;
    box-shadow: none !important; outline: none !important;
    font-family: var(--font-body); font-weight: 400; font-size: 1rem;
    display: inline-flex !important; align-items: center;
    white-space: nowrap;
}
.lyn-lead .bootstrap-select > .btn.dropdown-toggle:focus,
.lyn-lead .bootstrap-select > .btn.dropdown-toggle:active,
.lyn-lead .bootstrap-select.show > .btn.dropdown-toggle {
    border-bottom-color: var(--primary-color) !important;
    box-shadow: none !important; outline: none !important;
}
/* Mũi tên dropdown → MÀU CAM (màu chủ đạo) thay xám */
.lyn-lead .bootstrap-select > .btn.dropdown-toggle::after,
.lyn-lead .bootstrap-select > .btn.dropdown-toggle .caret {
    color: var(--primary-color) !important;
    border-top-color: var(--primary-color) !important;
}
.lyn-lead .bootstrap-select .filter-option-inner-inner { color: var(--heading-color); }
/* Item được chọn trong dropdown menu → nền/chữ cam */
.lyn-lead .bootstrap-select .dropdown-menu { border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.12); border: 0; }
.lyn-lead .bootstrap-select .dropdown-menu .active > a,
.lyn-lead .bootstrap-select .dropdown-menu a:active { background: var(--primary-color) !important; color: #fff !important; }
.lyn-lead .bootstrap-select .dropdown-menu a:hover { background: rgba(var(--primary-color-rgb), .10) !important; color: var(--heading-color) !important; }

/* Alert (thành công/lỗi) — bo tròn cho hợp */
.lyn-lead .alert { border-radius: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM THU LEAD — BỐ CỤC 2 CỘT: trái = eyebrow + title + 2 ẢNH SO LE (hover scale),
   phải = form. Tránh form trơ trọi, thô. Nền trắng phẳng, thanh thoát.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-lead.lyn-section { background: var(--lyn-surface) !important; }
.lyn-lead .container { max-width: var(--lyn-container); }

.lyn-lead-grid {
    display: grid; grid-template-columns: .95fr 1.05fr;
    gap: clamp(36px, 5vw, 84px); align-items: center;
}
@media (max-width: 900px) { .lyn-lead-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── CỘT TRÁI: text + 2 ảnh so le ── */
.lyn-lead-visual .lyn-eyebrow { display: block; margin-bottom: 14px; }
.lyn-lead-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--heading-color); margin: 0 0 16px; text-wrap: balance;
}
.lyn-lead-sub { font-size: 1rem; line-height: 1.75; color: var(--text-color); max-width: 42ch; margin: 0 0 clamp(28px, 3.5vw, 44px); }

/* 2 ảnh SO LE: ảnh trên đẩy trái, ảnh dưới đẩy phải + tụt xuống (lệch nhau) */
.lyn-lead-photos { position: relative; }
.lyn-lead-photo {
    border-radius: var(--lyn-radius-lg); overflow: hidden;
    box-shadow: 0 22px 55px rgba(0,0,0,.14);
    width: 68%;
}
.lyn-lead-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.lyn-lead-photo:hover img { transform: scale(1.08); }        /* HOVER SCALE */
.lyn-lead-photo--top { aspect-ratio: 4 / 3; margin-left: 0; }
.lyn-lead-photo--bottom {
    aspect-ratio: 3 / 4; width: 52%;
    margin-left: auto; margin-top: -22%;                     /* SO LE: chồng lệch lên ảnh trên */
    position: relative; z-index: 2;
    border: 5px solid var(--lyn-surface);                    /* viền trắng tách khỏi ảnh trên */
}
/* Animation vào: 2 ảnh trồi lên lệch nhịp. Gate bằng .lyn-reveal-ready (chỉ ẩn khi JS chạy
   → nếu JS lỗi, ảnh hiện bình thường, AN TOÀN). Hiện khi section có .is-revealed. */
.lyn-reveal-ready .lyn-lead-photo { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.lyn-reveal-ready .lyn-lead.is-revealed .lyn-lead-photo--top { opacity: 1; transform: none; transition-delay: .05s; }
.lyn-reveal-ready .lyn-lead.is-revealed .lyn-lead-photo--bottom { opacity: 1; transform: none; transition-delay: .22s; }

@media (max-width: 900px) {
    .lyn-lead-photo--top { width: 74%; }
    .lyn-lead-photo--bottom { width: 56%; margin-top: -18%; }
}

/* ── CỘT PHẢI: form (giữ style gạch chân thanh thoát đã có) ── */
.lyn-lead-submit { text-align: left; margin-top: 6px; }
@media (max-width: 900px) { .lyn-lead-submit { text-align: center; } }



/* ═══════════════════════════════════════════════════════════════════════════
   TRANG TIN TỨC — TẤT CẢ scope trong .lyn-news-page (wrapper riêng ở blog-with-sidebar.blade).
   → An toàn tuyệt đối: footer + trang khác NẰM NGOÀI wrapper nên KHÔNG bị ảnh hưởng.
   Đồng bộ font (Be Vietnam Pro/Inter như web) + màu CAM chủ đạo. Giữ bố cục.
   Gốc màu Travlla: .widget-title border vàng+nền gradient ; .post-date/link teal #066168 ;
   .trv-sidebar-nl nền vàng + nút teal ; .tagcloud teal nhạt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FONT: KHÔNG ép font-family cho title blog. hospitality.css đã ép các class trv-
   và h1-h6 → 'Inter' (font mảnh, đồng bộ toàn web). Nếu ép var(--font-body)=Be Vietnam Pro
   ở đây sẽ render ĐẬM/DÀY hơn → "chỗ đậm chỗ nhạt". Bỏ đi để title blog dùng CÙNG Inter. ── */

/* ── TITLE SECTION lớn ("TIN TỨC & SỰ KIỆN" = widget-title ; "TIN TỨC" = trv-head-title):
   bỏ nền gradient + border vàng → gạch CAM, uppercase thanh mảnh, cỡ section.
   Selector kèm .widget.trv-featured-posts + h4.widget-title để THẮNG specificity của
   base Travlla (rule .widget-title minified) — nếu không, title này lạc font/cỡ. ── */
.lyn-news-page .trv-featured-posts .widget-title,
.lyn-news-page .widget.trv-featured-posts h4.widget-title,
.lyn-news-page .widget.trv-featured-posts .widget-title,
.lyn-news-page .trv-head-title,
.lyn-news-page .trv-lg-title {
    background: none !important; border: 0 !important;
    border-left: 3px solid var(--primary-color) !important;
    padding: 2px 0 2px 16px !important;
    /* font-family: var(--font-display) !important; */
    font-weight: 400 !important; font-size: clamp(1.4rem, 2.1vw, 1.85rem) !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
    color: var(--heading-color) !important; line-height: 1.2 !important;
    display: inline-block !important;
    margin-bottom: 24px !important;
}

/* ── SIDEBAR widget-title ("Categories", "Bài viết gần đây", "Tags"):
   bỏ nền gradient + border vàng → gạch CAM, chữ vừa (không uppercase to). ── */
.lyn-news-page .rightSidebar .widget-title {
    background: none !important; border: 0 !important;
    border-left: 3px solid var(--primary-color) !important;
    padding: 2px 0 2px 14px !important;
    font-weight: 600 !important; font-size: 1.15rem !important;
    letter-spacing: .01em !important; text-transform: none !important;
    color: var(--heading-color) !important; display: inline-block !important;
}

/* ── BADGE NGÀY (12 TH07) trên card + sidebar: teal → CAM ── */
.lyn-news-page .post-date { background: var(--primary-color) !important; }
.lyn-news-page .post-date, .lyn-news-page .post-date * { color: #fff !important; }

/* ── CARD TIN TỨC (nền ảnh tối): tên bài + "Qua" TRẮNG/CAM để đọc ── */
.lyn-news-page .trv-blog-st .trv-post-title a,
.lyn-news-page .trv-blog-st1 .trv-post-title a,
.lyn-news-page .trv-blog-st2 .trv-post-title a,
.lyn-news-page .trv-blog-st3 .trv-post-title a { color: #fff !important; }
.lyn-news-page .trv-blog-st .trv-post-title a:hover,
.lyn-news-page .trv-blog-st1 .trv-post-title a:hover,
.lyn-news-page .trv-blog-st2 .trv-post-title a:hover,
.lyn-news-page .trv-blog-st3 .trv-post-title a:hover { color: var(--primary-color) !important; }
/* "Qua" (thời gian) + nhãn category trên card → CAM */
.lyn-news-page .trv-blog-st .trv-post-info time,
.lyn-news-page .trv-blog-st .trv-post-date,
.lyn-news-page .trv-blog-st .post-category a,
.lyn-news-page .trv-blog-st .trv-cat a,
.lyn-news-page .trv-blog-st [class*="date"] { color: var(--primary-color) !important; }

/* ── SIDEBAR "Bài viết gần đây": tên bài nền SÁNG → heading (KHÔNG trắng/cam), hover cam ── */
.lyn-news-page .rightSidebar .trv-post-title a,
.lyn-news-page .trv-recent-posts .trv-post-title a,
.lyn-news-page .trv-rc-po-st1 .trv-post-title a { color: var(--heading-color) !important; }
.lyn-news-page .rightSidebar .trv-post-title a:hover,
.lyn-news-page .trv-recent-posts .trv-post-title a:hover { color: var(--primary-color) !important; }

/* ── SIDEBAR Categories: link + badge số ── */
.lyn-news-page .rightSidebar .widget_services li a,
.lyn-news-page .rightSidebar .widget li a { color: var(--heading-color) !important; }
.lyn-news-page .rightSidebar .widget_services li a:hover,
.lyn-news-page .rightSidebar .widget li a:hover { color: var(--primary-color) !important; }
.lyn-news-page .rightSidebar .badge {
    background: rgba(var(--primary-color-rgb), .10) !important; color: var(--primary-color) !important;
    border-radius: 999px !important; padding: 2px 10px !important;
}
/* Nút tìm kiếm sidebar → cam */
.lyn-news-page .rightSidebar .search-btn,
.lyn-news-page .rightSidebar button[type="submit"] { color: var(--primary-color) !important; }

/* ── WIDGET "Đăng ký nhận bản tin" (.trv-sidebar-nl): nền VÀNG → CAM + BO GÓC ; nút teal → trắng ── */
.lyn-news-page .trv-sidebar-nl,
.lyn-news-page .trv-sidebar-nl-inner {
    background: var(--primary-color) !important;
    border-radius: var(--lyn-radius-lg) !important;
    overflow: hidden;
}
.lyn-news-page .trv-sidebar-nl-heading,
.lyn-news-page .trv-sidebar-nl h2, .lyn-news-page .trv-sidebar-nl h3,
.lyn-news-page .trv-sidebar-nl p, .lyn-news-page .trv-sidebar-nl * { color: #fff !important; }
.lyn-news-page .trv-sidebar-nl input { border-radius: 999px !important; }
/* Nút "Đăng ký" trong newsletter cam: nền TRẮNG chữ cam (nổi trên nền cam) */
.lyn-news-page .trv-sidebar-nl-btn {
    background: #fff !important; color: var(--primary-color) !important;
    border: 0 !important; border-radius: 999px !important; font-weight: 600 !important;
}
.lyn-news-page .trv-sidebar-nl-btn:hover { background: rgba(255,255,255,.9) !important; color: var(--primary-color-hover) !important; }

/* ── TAGS (.tagcloud): nền teal nhạt → cam nhạt, hover cam đặc ── */
.lyn-news-page .tagcloud a, .lyn-news-page .widget_tag_cloud a {
    background: rgba(var(--primary-color-rgb), .08) !important;
    color: var(--heading-color) !important;
    border: 1px solid rgba(var(--primary-color-rgb), .18) !important;
    border-radius: 999px !important;
}
.lyn-news-page .tagcloud a:hover, .lyn-news-page .widget_tag_cloud a:hover {
    background: var(--primary-color) !important; color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* ── PHÂN TRANG: teal → heading, active nền cam ── */
.lyn-news-page .pagination a, .lyn-news-page .pagination .page-link { color: var(--heading-color) !important; }
.lyn-news-page .pagination a:hover, .lyn-news-page .pagination .page-link:hover { color: var(--primary-color) !important; }
.lyn-news-page .pagination .active a, .lyn-news-page .pagination .active .page-link,
.lyn-news-page .pagination .page-item.active .page-link {
    background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important;
}

/* ── Nút "Đọc tiếp"/"Xem thêm" trên card → cam ── */
.lyn-news-page .trv-new-info-btn, .lyn-news-page .trv-new-info-btn a { color: var(--primary-color) !important; }

/* ── Căn cột: banner (.lyn-page-banner .container = 1200) và content blog phải CÙNG max-width
   để title "Tin tức" (banner) thẳng cột "TIN TỨC & SỰ KIỆN" (content). Ép .container trong
   trang tin tức = --lyn-container. Scope .lyn-news-page → không đụng trang khác. ── */
.lyn-news-page .trv-blog-grid-inner > .container,
.lyn-news-page .section-full > .container { max-width: var(--lyn-container) !important; }

/* ── Danh mục: mỗi dòng flex (tên trái + badge tròn phải căn giữa) ── */
.lyn-news-page .rightSidebar .widget_services ul li,
.lyn-news-page .rightSidebar .widget ul li {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px; padding: 7px 0;
}
.lyn-news-page .rightSidebar .badge {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 8px !important;
    background: rgba(var(--primary-color-rgb), .10) !important; color: var(--primary-color) !important;
    border-radius: 999px !important; font-size: .8rem; font-weight: 600; flex: 0 0 auto;
    line-height: 1;
}

/* ── HOVER card tin tức: ảnh bên trong SCALE lên (mượt) ── */
.lyn-news-page .trv-post-media { overflow: hidden; }
.lyn-news-page .trv-post-media img {
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.lyn-news-page .trv-blog-st:hover .trv-post-media img,
.lyn-news-page .trv-blog-st1:hover .trv-post-media img,
.lyn-news-page .trv-blog-st2:hover .trv-post-media img,
.lyn-news-page .trv-blog-st3:hover .trv-post-media img,
.lyn-news-page article:hover .trv-post-media img { transform: scale(1.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: title "Tin tức & Sự kiện" (FeaturedPosts widget /blog) lạc font/cỡ so với
   các title khác. Nguyên nhân: ép var(--font-display)=Be Vietnam Pro (file woff2
   subset LỖI — thiếu glyph, chồng font Segoe UI/Inter → "chỗ đậm chỗ nhạt").
   Cả site ép .widget-title/h1-h6 → 'Inter' (đủ tiếng Việt). Ép Inter Ở ĐÂY luôn
   cho đồng bộ, KHÔNG dùng --font-display.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-news-page .trv-featured-posts .widget-title {
    /* Dùng token để đồng bộ khi đổi font toàn site (trước hardcode 'Inter'). */
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--heading-color) !important;
    line-height: 1.2 !important;
    background: none !important;
    border: 0 !important;
    border-left: 3px solid var(--primary-color) !important;
    padding: 2px 0 2px 16px !important;
    display: inline-block !important;
    margin-bottom: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — theo bản tham khảo Hoiana (.footer_*)
     .footer_logo / .footer_social_link : color = --swatch--brand-primary (gold)
     .footer_nav  : viền TRÊN+DƯỚI màu --swatch--brand-secondary (be #f2d3b5),
                    độ dày --border-width--main (.094rem)
     .footer_nav_link : font accent (Raleway), weight 500
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. LỀ — footer đang 133..1453 (1320px) trong khi nội dung 169..1417 (1248px).
   Dùng ĐÚNG cơ chế container mới để thẳng một đường lề dọc suốt trang. */
.site-footer .container {
    width: calc(100% - var(--lyn-gutter) * 2);
    max-width: var(--lyn-container);
    margin-inline: auto;
    padding-inline: 0;
}

/* 2. NỀN — KEM #fff8f0, KHÔNG phải teal đậm.
   ⚠️ Lần trước tôi làm sai: đọc .footer_* rồi suy ra nền tối. Thực tế markup
   bản gốc là:
     <footer class="u-section footer">
       <div class="footer_palette">…PATTERN1.avif…</div>       ← dải hoa văn đỉnh
       <div class="background_wrap" data-…background-color="background-2">
   background-2 trong ngữ cảnh SÁNG = --swatch--light-300 = #fff8f0.
   Vì nền sáng nên chữ phải chuyển sang TỐI (xem mục 2b). */
.site-footer.footer-dark,
.site-footer {
    background-color: #fff8f0 !important;
}

/* 2b. CHỮ trên nền kem — trước là chữ sáng cho nền tối, nay phải đảo lại. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .widget ul li a,
.site-footer .widget_services a {
    color: #1a1a1a !important;
}
/* Tiêu đề cột: bản gốc dùng màu GOLD nhạt hơn chữ (xem ảnh: "Khách sạn",
   "Khám phá Hoiana"… đều gold). */
.site-footer .widget-title,
.site-footer .footer-title {
    /* #af7432 chứ không phải #c88943: trên nền kem, #c88943 chỉ đạt 2.80:1 —
       dưới ngưỡng 3:1 cho chữ lớn. #af7432 đạt 3.71:1. */
    color: #af7432 !important;
    font-weight: 500;
}
/* Dòng chân trang (copyright) — xám nhưng vẫn đọc được.
   #7d7c7c trên nền kem chỉ 3.95:1; dùng #5a5a5a (6.3:1) cho chắc. */
.site-footer .footer-bottom,
.site-footer .footer-bottom p,
.site-footer .footer-bottom a,
.site-footer .copyrights-text {
    color: #5a5a5a !important;
}

/* Newsletter trong cột giới thiệu: cần tách khỏi hàng icon social phía trên,
   nếu không tiêu đề "Nhận ưu đãi" dính sát icon (thấy khi xem ảnh chụp). */
.site-footer .lyn-footer-newsletter {
    margin-top: 2rem;
}

/* ── ĐẢO MÀU CÁC PHẦN VỐN DÀNH CHO NỀN TỐI ──
   Footer trước là nền teal nên nhiều thành phần để màu TRẮNG. Sang nền kem thì
   chúng gần như vô hình. Phát hiện khi tự xem ảnh chụp, số đo không bắt được. */

/* Logo chữ + wordmark */
.site-footer .logo-footer,
.site-footer .logo-footer a,
.site-footer .lyn-footer-logo-text {
    color: #1a1a1a !important;
}
.site-footer .logo-footer img {
    /* Logo ảnh bản trắng → tô về gold đậm cho đọc được trên nền kem. */
    filter: brightness(0) invert(72%) sepia(31%) saturate(760%)
            hue-rotate(340deg) brightness(85%) contrast(88%);
}

/* ICON cột "Kết nối": giữ lại nhưng bỏ khung tròn — chỉ còn glyph ĐEN, cỡ
   BẰNG CHỮ (1rem) để đồng bộ với 3 cột kia. */
.site-footer .widget_address .trv-icon {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin-right: .5rem !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}
.site-footer .widget_address .trv-icon i,
.site-footer .widget_address .trv-icon svg {
    color: #1a1a1a !important;
    font-size: 1rem !important;
    width: 1rem;
    height: 1rem;
}
/* Icon + chữ trên CÙNG một dòng.
   CHỈ áp cho .widget_address (cột Kết nối) — nếu để lan sang .widget_services
   thì flex làm text căn lại và chữ dịch ~5px khi hover. */
.site-footer .widget_address > ul > li {
    display: flex !important;
    align-items: center;
    padding-left: 0 !important;
}
/* Điện thoại dùng .trv-contact, còn email/địa chỉ chỉ là <span> trần trong <li>
   → phải nhắm cả `li span` và `li a`, nếu không hai dòng đó vẫn nhạt.
   (Phát hiện khi tự xem ảnh chụp: số điện thoại đậm nhưng email/địa chỉ mờ.) */
/* ── ĐỒNG BỘ CỠ CHỮ CỘT "KẾT NỐI" với 3 cột còn lại ──
   Đo được: link cột Khám phá 16px/w500, còn Kết nối 21.6px/w700 và địa chỉ
   18px/w600 → cột này nổi hẳn, phá sự tương đồng giữa 4 cột. */
.site-footer .widget_address li,
.site-footer .widget_address li a,
.site-footer .widget_address li span,
.site-footer .widget_address .trv-contact {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.site-footer .widget_getintuch li,
.site-footer .widget_getintuch li a,
.site-footer .widget_getintuch li span,
.site-footer .widget_getintuch p,
.site-footer .trv-contact,
.site-footer li > a > span,
/* Địa chỉ là <span> con TRỰC TIẾP của <li> (không có <a> bọc như phone/email)
   nên `li > a > span` không bắt được → thêm `li > span`. */
.site-footer li > span {
    color: #1a1a1a !important;
}

/* Ô nhập email (newsletter): nền trắng mờ + chữ trắng → đổi sang nền trắng đặc,
   chữ tối, viền gold nhạt. */
.site-footer .newsletter-form,
.site-footer .lyn-newsletter {
    background-color: #fff !important;
    border: 1px solid rgba(221, 161, 94, .45) !important;
}
.site-footer .newsletter-form input,
.site-footer .lyn-newsletter input {
    color: #1a1a1a !important;
    background: transparent !important;
}
.site-footer .newsletter-form input::placeholder,
.site-footer .lyn-newsletter input::placeholder {
    color: #7d7c7c !important;
    opacity: 1;
}

/* 2c. ⚠️ ĐÃ BỎ dải hoa văn đỉnh footer (.footer_palette của bản gốc).
   Ta không có file PATTERN1.avif nên phải vẽ gradient tạm — user thấy không
   hợp, bỏ hẳn. Footer nay bắt đầu thẳng bằng nền kem, chỉ cần cân đều trên dưới.
   Muốn khôi phục: thêm ảnh pattern vào rồi dựng lại .site-footer::before. */

/* 3. ICON MẠNG XÃ HỘI — gold #dda15e (--swatch--brand-primary) thay vàng đồng cũ,
   chữ/icon bên trong dùng teal đậm cho tương phản. */
/* Icon mạng xã hội: bản gốc là VIỀN gold + nền TRONG (xem ảnh — icon rỗng,
   chỉ có đường viền). Nền gold đặc sẽ chói trên nền kem.
   Cần `li` + !important vì .footer-dark .social-icons li a đặt
   var(--secondary-color) !important — selector thiếu `li` sẽ thua. */
.site-footer .social-icons li a,
.site-footer.footer-dark .social-icons li a {
    background-color: transparent !important;
    border: 1px solid #dda15e !important;
    color: #c88943 !important;
    transition: background-color .4s cubic-bezier(.625,.05,0,1),
                color .4s cubic-bezier(.625,.05,0,1);
}
.site-footer .social-icons li a:hover,
.site-footer.footer-dark .social-icons li a:hover {
    background-color: #dda15e !important;
    color: #fff8f0 !important;
}

/* 4. ĐƯỜNG KẺ NGĂN — bản gốc dùng viền BE mảnh .094rem ở trên/dưới khối nav,
   thay vì kẻ trắng mờ. */
.site-footer .footer-top {
    /* Trên nền KEM, viền be mờ (.35) gần như vô hình → dùng gold nhạt đặc hơn. */
    border-bottom: .094rem solid rgba(221, 161, 94, .45);
    padding-bottom: var(--lyn-gutter);
}

/* 5. LINK — font accent (Raleway) + weight 500 như .footer_nav_link.
   Màu phải ép về chữ TỐI: link thừa hưởng `a { color: var(--primary-ink) }`
   toàn cục nên bị gold, trong khi bản gốc link menu footer là chữ tối
   (chỉ TIÊU ĐỀ cột mới gold). Hover mới chuyển gold. */
.site-footer .widget_services a,
.site-footer .widget ul li a,
.site-footer .widget_address li a,
.site-footer .widget_address li > span {
    font-family: var(--font-accent);
    font-weight: 500;
    color: #1a1a1a !important;
    /* inline-block: thẻ <a> mặc định là inline nên khi thêm text-decoration,
       chữ bên trong bị căn lại và dịch ~5px (đo được: chữ 593 -> 598 dù hộp <a>
       đứng yên). inline-block neo chữ cố định -> hover tuyệt đối không xê dịch. */
    display: inline-block;
    transition: color .4s cubic-bezier(.625,.05,0,1);
}
/* HOVER = GẠCH CHÂN CHẠY TỪ TRÁI SANG PHẢI, không đổi màu, không xê dịch.
   Dùng ::after + scaleX với transform-origin:left (text-decoration không tạo
   được chuyển động quét). position:absolute nên KHÔNG chiếm chỗ → layout đứng yên. */
.site-footer .widget_services a,
.site-footer .widget ul li a,
.site-footer .widget_address li a {
    position: relative;
}
.site-footer .widget_services a::after,
.site-footer .widget ul li a::after,
.site-footer .widget_address li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* bottom: 2px (TRONG hộp) chứ không phải -3px: <li> của cột "Khám phá" có
       overflow:hidden nên gạch nằm ngoài hộp bị CẮT — đó là lý do chỉ cột
       "Kết nối" (overflow:visible) thấy gạch chân.
       Đặt trong hộp thì cả 4 cột đều hiện, không phải đụng overflow của theme. */
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.625,.05,0,1);
}
.site-footer .widget_services a:hover::after,
.site-footer .widget ul li a:hover::after,
.site-footer .widget_address li a:hover::after {
    transform: scaleX(1);
}
/* Giữ nguyên màu khi hover (không đổi sang gold) VÀ chặn xê dịch.
   ⚠️ style.css của Travlla thêm `padding-left: 5px` khi hover (hiệu ứng trượt
   của theme gốc) → chữ nhích sang phải. Đo được: padL 0px → 5px.
   Ép padding/margin về 0 ở CẢ hai trạng thái để chữ đứng yên tuyệt đối. */
.site-footer .widget_services a,
.site-footer .widget ul li a,
.site-footer .widget_address li a,
.site-footer .widget_services a:hover,
.site-footer .widget ul li a:hover,
.site-footer .widget_address li a:hover {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.site-footer .widget_services a:hover,
.site-footer .widget ul li a:hover,
.site-footer .widget_address li a:hover {
    color: #1a1a1a !important;
    text-decoration: none !important;
}