/*!
 * ═══════════════════════════════════════════════════════════════════════════
 * LYNNTIMES FOUNDATION — BỘ BASE CLASS + TOKEN DÙNG CHUNG (nguồn chân lý duy nhất).
 * Xem DESIGN-STANDARD.md. NẠP CUỐI CÙNG (config.php, dep ['pages-refined']) nên
 * THẮNG mọi cascade → đây là nơi chốt: lưới, nhịp dọc, màu, typography tiêu đề.
 *
 * ⚠️ File nguồn ở platform/.../public/css/ — PHẢI copy sang public/themes/lynntimes/css/
 *    thì frontend mới load (xem memory theme-css-publish-path).
 *
 * MỤC TIÊU (4 trụ cột user chốt):
 *   1. Đầu mục tương đương → CÙNG style + CÙNG lề 2 bên (canh dọc bằng nhau).
 *   2. Khoảng cách giữa các section → TƯƠNG ĐỒNG (một --lyn-section-y duy nhất).
 *   3. Khoảng hero → content đầu tiên = khoảng giữa các section (BẰNG NHAU).
 *   4. Chỉ 3 vai trò màu: Cam (nhấn) · Vàng đồng (eyebrow) · Trung tính (title/nền).
 *
 * NGUYÊN TẮC MÀU TITLE/EYEBROW: theo NỀN thật của section, KHÔNG đoán theo tên class.
 *   Nền TỐI  = section mang .lyn-section--dark HOẶC .lyn-offers → title kem, eyebrow vàng sáng.
 *   Nền SÁNG = còn lại → title đen (#222), eyebrow vàng đồng.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 1 — TOKEN (nguồn chân lý). Sửa Ở ĐÂY, cả web đổi theo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── LƯỚI & LỀ (trụ cột 1) — MỘT container + MỘT gutter cho mọi section ── */
    /* 1248px = 78rem — đúng --max-width--main của bản tham khảo Hoiana
       (calc(var(--site--viewport-max) * 1rem), viewport-max = 78). */
    --lyn-container: 1248px;
    --lyn-gutter: clamp(20px, 5vw, 64px);

    /* ── NHỊP DỌC (trụ cột 2 & 3) — MỘT giá trị cho MỌI section, kể cả khối dưới hero ── */
    --lyn-section-y: clamp(72px, 8vw, 128px);

    /* ── NHỊP TRONG KHỐI HEADING (eyebrow → title → mô tả) ── */
    --lyn-eyebrow-mb: 14px;
    --lyn-title-mb: 12px;
    --lyn-eyebrow-dash: 30px;   /* dài gạch vàng 2 bên eyebrow */
    --lyn-eyebrow-gap: 10px;    /* khoảng cách gạch ↔ chữ (khớp design-system, đồng bộ mọi eyebrow) */

    /* ── 3 VAI TRÒ MÀU (trụ cột 4). Kế thừa biến brand ở design-system.css ── */
    --lyn-title-color: var(--heading-color);       /* title nền sáng: #222 */
    --lyn-title-color-on-dark: #F4EFE4;            /* title nền tối: kem */
    --lyn-eyebrow-color: var(--secondary-color);   /* eyebrow nền sáng: vàng đồng #c9a24b */
    --lyn-eyebrow-color-on-dark: #EBD9B4;          /* eyebrow nền tối: vàng sáng */
    --lyn-body-on-dark: #B9C2C0;

    /* ── TYPOGRAPHY TIÊU ĐỀ ── */
    /* Tiêu đề section của bản tham khảo là thẻ <h2> nhưng mang biến thể style H3
       (data-wf--typography-heading--font-style="h3" → .c-heading variant
       701c4b6c… = --_typography---font-size--h3), KHÔNG phải bậc h2.
       h3 gốc = clamp(2.25rem … 2.5rem) = 36→40px.
       Hạ min xuống 1.9rem để mobile an toàn với tiếng Việt có dấu + tiêu đề dài. */
    --lyn-title-size: clamp(1.9rem, 2.6vw, 2.5rem);
    --lyn-title-weight: 400;
    --lyn-title-track: .06em;
    --lyn-title-lh: 1.2;

    --lyn-eyebrow-size: .8rem;
    --lyn-eyebrow-weight: 600;
    --lyn-eyebrow-track: .16em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 2 — LƯỚI & NHỊP DỌC (trụ cột 1, 2, 3).
   ═══════════════════════════════════════════════════════════════════════════ */
/* .lyn-marquee-section KHÔNG mang class .lyn-section → thêm vào để cùng nhịp dọc. */
.lyn-section, .lyn-marquee-section { padding-block: var(--lyn-section-y) !important; }

/* CƠ CHẾ CONTAINER theo bản tham khảo Hoiana (.u-container):
     width: calc(100% - margin*2); max-width: …; margin-inline: auto;
   Lề tạo bằng cách THU HẸP CHIỀU RỘNG, KHÔNG dùng padding-inline.
   Khác biệt thực tế: trước đây max-width 1248 rồi trừ padding 64px mỗi bên →
   nội dung chỉ còn 1120px. Nay nội dung đúng 1248px (rộng thêm 128px), nhờ vậy
   card grid đạt ~405px — khớp bản gốc (~395px).
   --lyn-gutter giữ nguyên vai trò "lề mép màn hình" khi màn hẹp hơn container. */
.lyn-section > .container {
    width: calc(100% - var(--lyn-gutter) * 2);
    max-width: var(--lyn-container);
    margin-inline: auto;
    padding-inline: 0;
}

/* Ranh giới 2 section SÁNG liền nhau: đường kẻ mảnh căn giữa ĐÚNG ranh giới (đỉnh B)
   để khoảng trắng lớn có chủ đích. KHÔNG kẻ ở ranh giới nền tối (đổi màu đã đủ tách). */
.lyn-section + .lyn-section { position: relative; }
.lyn-section + .lyn-section::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(var(--lyn-container), 92vw);
    height: 1px;
    background: var(--lyn-line);
}
.lyn-section.lyn-offers::before,
.lyn-section.lyn-section--dark::before,
.lyn-offers + .lyn-section::before,
.lyn-section--dark + .lyn-section::before { content: none; }

/* ── CĂN HERO + BOOKING BAR THẲNG LỀ VỚI NỘI DUNG SECTION ──
   Trước: hero/booking thụt ~22px riêng, còn section thụt =gutter (tới 64px) → lệch.
   Cho cả hai dùng CHUNG container + gutter → 1 đường lề dọc thẳng suốt trang. */
/* Dùng ĐÚNG cơ chế của .lyn-section > .container (bản gốc .u-container):
   thu hẹp chiều rộng + căn giữa, KHÔNG padding. Giữ padding thì hộp thẳng lề
   nhưng CHỮ bên trong thụt thêm 64px → lệch so với nội dung section. */
.lyn-hero-resort-inner {
    width: calc(100% - var(--lyn-gutter) * 2) !important;
    max-width: var(--lyn-container) !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Booking bar co 2 bên đúng bằng gutter → mép bar trùng mép nội dung section.
   CHỈ desktop (mobile booking bar là thanh fixed full-width, không đụng). */
@media (min-width: 768px) {
    /* Cùng cơ chế container mới: bề rộng = min(container, 100vw - gutter*2).
       KHÔNG trừ thêm 2*gutter nữa — phần trừ đó bù cho padding của cơ chế cũ,
       nay container không còn padding nên trừ nữa sẽ hẹp hơn nội dung 128px. */
    .lyn-sticky-booking {
        width: min(var(--lyn-container), calc(100vw - var(--lyn-gutter) * 2)) !important;
        margin-left: calc(-0.5 * min(var(--lyn-container), 100vw - var(--lyn-gutter) * 2)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 3 — BASE CLASS DÙNG CHUNG (markup MỚI dùng bộ này thay cho .lyn-*-title).
     <div class="lyn-heading">                     ← thêm .lyn-heading--on-dark nếu nền tối
        <span class="lyn-eyebrow">Nhãn phụ</span>
        <h2 class="lyn-title">Tiêu đề chính</h2>
        <p class="lyn-heading-desc">Mô tả…</p>
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-heading { text-align: left; }
.lyn-heading > * { text-align: left; }

.lyn-title {
    display: block;
    margin: 0 0 var(--lyn-title-mb);
    font-family: var(--font-display);
    font-size: var(--lyn-title-size);
    font-weight: var(--lyn-title-weight);
    line-height: var(--lyn-title-lh);
    letter-spacing: var(--lyn-title-track);
    text-transform: uppercase;
    color: var(--lyn-title-color);
    text-wrap: balance;
}
.lyn-heading-desc {
    margin: 0;
    max-width: 60ch;
    color: var(--text-color);
    font-size: 1.04rem;
    line-height: 1.6;
}
.lyn-heading--on-dark .lyn-title,   .lyn-title--on-dark  { color: var(--lyn-title-color-on-dark); }
.lyn-heading--on-dark .lyn-heading-desc { color: var(--lyn-body-on-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 4 — CHUẨN HOÁ CÁC CLASS ĐANG CÓ về đúng chuẩn (không sửa markup).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DANH SÁCH title chính section (tái dùng cho typography + màu) ── */
/* ── 4a. TYPOGRAPHY title — đồng bộ font/cỡ/đậm/hoa/giãn (KHÔNG đụng màu) ── */
.lyn-section .section-title,
.lyn-destintro-title, .lyn-dslider-title, .lyn-oslider-title, .lyn-rslider-title,
.lyn-explore-title, .lyn-xplore-title, .lyn-mice-feature-title,
.lyn-story-title, .lyn-onsen-title, .lyn-insta-title, .lyn-gvoices-title,
.lyn-lp-title, .lyn-lpintro-title, .lyn-marquee-title, .lyn-lead-cta-title,
.lyn-lead-title {
    font-family: var(--font-display) !important;
    font-size: var(--lyn-title-size) !important;
    font-weight: var(--lyn-title-weight) !important;
    line-height: var(--lyn-title-lh);
    letter-spacing: var(--lyn-title-track) !important;
    text-transform: uppercase;
}

/* ── 4b. MÀU title — MẶC ĐỊNH nền sáng = trung tính đậm ── */
.lyn-section .section-title,
.lyn-destintro-title, .lyn-dslider-title, .lyn-oslider-title, .lyn-rslider-title,
.lyn-xplore-title, .lyn-mice-feature-title,
.lyn-story-title, .lyn-onsen-title, .lyn-insta-title, .lyn-gvoices-title,
.lyn-lp-title, .lyn-lpintro-title, .lyn-marquee-title, .lyn-lead-cta-title,
.lyn-lead-title {
    color: var(--lyn-title-color) !important;
}
/* .lyn-explore-title TÁCH RIÊNG → teal #00504b như bản gốc (u-text-brand-500).
   Khai !important ở đây để thắng nhóm rule trên (cùng file, cùng độ đặc hiệu). */
.lyn-explore-title {
    color: #00504b !important;
}
/* Ghi đè cho NỀN TỐI (theo ngữ cảnh section, thắng vì specificity cao hơn) → kem. */
.lyn-section--dark .section-title, .lyn-offers .section-title,
.lyn-section--dark .lyn-dslider-title, .lyn-section--dark .lyn-rslider-title,
.lyn-section--dark .lyn-gvoices-title, .lyn-section--dark .lyn-lead-cta-title {
    color: var(--lyn-title-color-on-dark) !important;
}

/* ── 4c. EYEBROW — MỘT rule cho MỌI biến thể: typography + gạch 2 ĐẦU + màu mặc định ──
   Dùng inline-flex để căn được cả trái lẫn GIỮA (section đặt eyebrow ở giữa vẫn đúng).
   Gạch ::before + ::after cùng currentColor → tự đổi theo màu eyebrow (sáng/tối). */
.lyn-eyebrow, .sub-title, .section-head .sub-title,
.lyn-chapter-eyebrow, .lyn-dt-eyebrow, .lyn-lead-cta-eyebrow,
.lyn-marquee-sub, .trv-subtitle,
.trv-head-small-title, .trv-head-sm-title, .trv-title-small {
    display: inline-flex !important;   /* inline-level → TỰ bám text-align của cha (cha trái→trái, cha giữa→giữa) */
    align-items: center;
    gap: var(--lyn-eyebrow-gap);
    width: fit-content;
    margin-bottom: var(--lyn-eyebrow-mb);
    font-family: var(--font-display) !important;
    font-size: var(--lyn-eyebrow-size) !important;
    font-weight: var(--lyn-eyebrow-weight) !important;
    letter-spacing: var(--lyn-eyebrow-track) !important;
    text-transform: uppercase;
    color: var(--lyn-eyebrow-color) !important;   /* mặc định vàng đồng (nền sáng) */
}
.lyn-eyebrow::before, .lyn-eyebrow::after,
.sub-title::before, .sub-title::after,
.lyn-chapter-eyebrow::before, .lyn-chapter-eyebrow::after,
.lyn-dt-eyebrow::before, .lyn-dt-eyebrow::after,
.lyn-lead-cta-eyebrow::before, .lyn-lead-cta-eyebrow::after,
.lyn-marquee-sub::before, .lyn-marquee-sub::after,
.trv-subtitle::before, .trv-subtitle::after,
.trv-head-small-title::before, .trv-head-small-title::after,
.trv-head-sm-title::before, .trv-head-sm-title::after,
.trv-title-small::before, .trv-title-small::after {
    content: "";
    flex: 0 0 var(--lyn-eyebrow-dash);
    width: var(--lyn-eyebrow-dash);
    height: 2px;
    background: currentColor;
    display: block !important;   /* thắng .lyn-insta-head .lyn-eyebrow::before{display:none} cũ → gạch 2 đầu đều */
}
/* Ghi đè màu eyebrow cho NỀN TỐI → vàng sáng (theo ngữ cảnh section + 2 khối hero/chapter). */
.lyn-section--dark .lyn-eyebrow, .lyn-section--dark .sub-title,
.lyn-offers .lyn-eyebrow, .lyn-offers .sub-title,
.lyn-chapter-eyebrow, .lyn-lead-cta-eyebrow {
    color: var(--lyn-eyebrow-color-on-dark) !important;
}
/* HERO tách riêng: bản tham khảo Hoiana dùng eyebrow TRẮNG mờ (không vàng) +
   tracking .07em, để chữ gold của title là điểm nhấn màu duy nhất. */
.lyn-hero-resort-eyebrow {
    color: #fff !important;
    letter-spacing: .07em !important;
    opacity: .85;
}

/* ── 4c-align. Eyebrow inline-flex TỰ căn theo text-align của cha, nên các head căn GIỮA
   (.lyn-dslider-head, .lyn-insta-head, .lyn-chapter--center, .lyn-dt-more-head) → eyebrow
   tự căn giữa; head căn TRÁI → eyebrow trái. KHÔNG cần liệt kê từng section.
   Riêng MARQUEE: eyebrow + title nằm trong .container (mặc định căn trái) nhưng title tự
   text-align:center → ép cả .container căn giữa để eyebrow theo cùng (cards ở ngoài .container,
   không ảnh hưởng). ── */
.lyn-marquee-section > .container { text-align: center; }

/* ── 4d. DỌN MÀU LẠC PALETTE ──
   - Teal Travlla cũ ở tiêu đề widget sidebar → trung tính. */
.side-bar .widget-title { color: var(--heading-color) !important; }
/*   - Đoạn mô tả section "Khám phá" (cột phải): bỏ màu CAM (cam chỉ cho nhấn) → trung tính,
       thêm nét editorial cho bớt đơn điệu: chữ NGHIÊNG + gạch vàng đồng bên trái (kiểu trích dẫn). */
.lyn-explore-desc, .lyn-xplore-desc {
    color: var(--text-color) !important;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.75;
    padding-left: 18px;
    border-left: 2px solid var(--secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 4e — ENHANCEMENT: SLIDER ẨM THỰC (rslider) — thay nền ĐEN PHẲNG bằng ẢNH + overlay
   tối (giống dslider), chữ trắng vẫn nổi. Markup thêm .lyn-rslider-bg/-overlay ở blade.
   ═══════════════════════════════════════════════════════════════════════════ */
.lyn-rslider .container { position: relative; z-index: 2; }   /* nội dung nổi trên ảnh nền */
.lyn-rslider-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    filter: brightness(.5) saturate(.9);
    transform: scale(1.05);
}
.lyn-rslider-bg-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(18,18,18,.82) 0%, rgba(18,18,18,.6) 45%, rgba(18,18,18,.85) 100%);
}
/* Mô tả bên phải: bỏ đơn điệu → chữ NGHIÊNG + gạch vàng đồng bên trái (đồng bộ .lyn-explore-desc). */
.lyn-rslider-desc {
    font-style: italic !important;
    padding-left: 18px;
    border-left: 2px solid var(--secondary-color);
    color: rgba(255, 255, 255, .85) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 5 — NGOẠI LỆ CÓ CHỦ ĐÍCH (KHÔNG kéo về chuẩn section-title).
   Điểm nhấn cỡ lớn, mảnh, KHÔNG chữ hoa — giữ như design-system.css định:
   ─ .lyn-hero-resort-title  (hero, clamp 2.8→5.4rem, weight 600)  · eyebrow hero KHÔNG gạch
   ─ .lyn-chapter-title      (chapter, clamp 2.4→4.4rem, weight 300)
   ─ .lyn-page-banner-title  (banner trang trong, --fs-h1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PHẦN 6 — CHỐNG CỘNG DỒN NHỊP DỌC.
   Trang chi tiết đi qua PublicController::getView (Experience/Room/Restaurant…)
   được Botble bọc trong `.container.page-default-content.p-t100.p-b100` (100px
   trên/dưới). Khi content bên trong đã là các .lyn-section (tự có padding-block
   72–128px), hai lớp padding CỘNG DỒN → mép trên/dưới dày gấp đôi, lệch nhịp so
   với section-list (dùng full-width, không có container này).
   → Nếu container CHỨA .lyn-section, bỏ padding cộng dồn của chính container.
     Các trang default KHÁC (Tours/Compare — không dùng .lyn-section) giữ nguyên.

   Bổ sung: các trang còn dùng MARKUP TRAVLLA CŨ (Ưu đãi, Tin tức, Cẩm nang) bọc
   nội dung trong .trv-blog-grid-inner / .trv-*-section (đã tự có p-t120 p-b90).
   Chúng cũng nằm trong container p-t100 p-b100 → cộng dồn 220/190px. Cùng cách xử
   lý: container có lớp nội dung tự-padding thì bỏ padding của chính nó. */
.container.page-default-content:has(.lyn-section),
.container.page-default-content:has(> .section-full),
.container.page-default-content:has(> .lyn-offers-page),
.container.page-default-content:has(> [class*="trv-"][class*="-inner"]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   PHẦN 8 — VIDEO NỀN CHO HERO STYLE-BANNER (trv-hp5)
   style-banner vốn chỉ dùng ảnh nền. Khi editor đặt "Background video",
   blade render <video.trv-hp5-bnr-video> bên trong .trv-hp5-bnr-sec-content
   (vốn position:absolute, inset:0, z-index:5). Video phủ kín, nằm DƯỚI chữ.
   ============================================================ */
.trv-hp5-bnr-sec-content.has-bg-video {
    overflow: hidden;                 /* cắt phần video tràn mép */
    background-image: none !important;/* không đè ảnh lên video */
}
.trv-hp5-bnr-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                /* phủ kín, không méo */
    z-index: 0;                       /* dưới .trv-banner-5-text (z-index:5 của cha) */
    pointer-events: none;
}
/* Chữ/nút phải nổi trên video */
.trv-hp5-bnr-sec-content.has-bg-video .trv-banner-5-text {
    position: relative;
    z-index: 2;
}
/* Mobile: container chuyển position:static (breakpoint 768) → video absolute sẽ
   bung khỏi khung. Ghim khung có chiều cao để video vẫn phủ đúng. */
@media (max-width: 768px) {
    .trv-hp5-bnr-sec-content.has-bg-video {
        position: relative;           /* mốc cho video absolute */
        min-height: 70vh;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 8 — ANIMATION TINH TẾ CHO SECTION NGHIỆP VỤ
   ═══════════════════════════════════════════════════════════════════════
   Mở rộng hệ .lyn-reveal đã có (hospitality.css) — KHÔNG thay thế, KHÔNG sửa JS.
   Cơ chế giữ nguyên: JS thêm .is-revealed khi section vào viewport.

   Nguyên tắc (giữ vẻ sang trọng, tránh loạn):
   · Biên độ NHỎ — 28px ngang, 18px dọc. Sang trọng là chuyển động kín đáo.
   · Chỉ bố cục 2 cột mới có hướng; lưới/card vẫn fade-up như cũ.
   · Hai cột trượt HƯỚNG VÀO NHAU (chữ ← ảnh) — cảm giác "khép lại", không phân tán.
   · Tiêu đề trồi lên TRƯỚC phần thân một nhịp → tạo tầng lớp.

   ⚠️ MOBILE: TẮT HOÀN TOÀN dịch chuyển ngang (chỉ còn fade + trồi dọc).
      Dịch ngang trên màn hẹp dễ gây tràn ngang (horizontal scroll) — lỗi khó thấy
      lúc dev nhưng người dùng thật gặp ngay.

   Tất cả đều nằm dưới gate .lyn-reveal-ready → JS lỗi thì nội dung hiện bình thường,
   không bao giờ kẹt ẩn.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 8.1. Bố cục 2 cột: trượt hướng vào nhau ───────────────────────────── */
.lyn-reveal-ready .lyn-story-text,
.lyn-reveal-ready .lyn-onsen-text,
.lyn-reveal-ready .lyn-mice-feature-text,
.lyn-reveal-ready .lyn-destintro-text {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
                transform .75s cubic-bezier(.22, .61, .36, 1);
}

.lyn-reveal-ready .lyn-story-media,
.lyn-reveal-ready .lyn-onsen-media,
.lyn-reveal-ready .lyn-mice-feature-media,
.lyn-reveal-ready .lyn-destintro-media {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
                transform .75s cubic-bezier(.22, .61, .36, 1);
}

/* Ảnh vào sau chữ một nhịp rất ngắn — mắt đọc chữ trước, ảnh "đỡ" theo sau. */
.lyn-reveal-ready .lyn-story-media,
.lyn-reveal-ready .lyn-onsen-media,
.lyn-reveal-ready .lyn-mice-feature-media,
.lyn-reveal-ready .lyn-destintro-media {
    transition-delay: .12s;
}

.lyn-reveal-ready .is-revealed .lyn-story-text,
.lyn-reveal-ready .is-revealed .lyn-story-media,
.lyn-reveal-ready .is-revealed .lyn-onsen-text,
.lyn-reveal-ready .is-revealed .lyn-onsen-media,
.lyn-reveal-ready .is-revealed .lyn-mice-feature-text,
.lyn-reveal-ready .is-revealed .lyn-mice-feature-media,
.lyn-reveal-ready .is-revealed .lyn-destintro-text,
.lyn-reveal-ready .is-revealed .lyn-destintro-media {
    opacity: 1;
    transform: none;
}

/* ── 8.2. Tiêu đề trồi lên trước phần thân ─────────────────────────────── */
/* Eyebrow → tiêu đề → mô tả, mỗi thứ cách nhau một nhịp ngắn.
   ⚠️ Mỗi section dùng tên class RIÊNG (lyn-story-title, lyn-onsen-title,
   lyn-explore-title…) chứ không có .lyn-section-title chung — nên bắt bằng
   selector [class$="-title"] / [class$="-lead"] trong phạm vi .lyn-reveal.
   Đã kiểm tra bằng grep: 10 chỗ dùng .lyn-eyebrow, các title đều kết thúc -title. */
.lyn-reveal-ready .lyn-reveal .lyn-eyebrow,
.lyn-reveal-ready .lyn-reveal > .container > [class^="lyn-"][class$="-title"],
.lyn-reveal-ready .lyn-reveal [class^="lyn-"][class$="-lead"] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
                transform .65s cubic-bezier(.22, .61, .36, 1);
}

.lyn-reveal-ready .lyn-reveal.is-revealed .lyn-eyebrow {
    opacity: 1; transform: none; transition-delay: .04s;
}

.lyn-reveal-ready .lyn-reveal.is-revealed > .container > [class^="lyn-"][class$="-title"] {
    opacity: 1; transform: none; transition-delay: .14s;
}

.lyn-reveal-ready .lyn-reveal.is-revealed [class^="lyn-"][class$="-lead"] {
    opacity: 1; transform: none; transition-delay: .24s;
}

/* ── 8.3. MOBILE: bỏ hết dịch ngang, chỉ giữ fade + trồi dọc nhẹ ────────── */
/* Đây là phần QUAN TRỌNG NHẤT về an toàn: translateX trên màn hẹp có thể đẩy
   nội dung ra ngoài viewport → thanh cuộn ngang. Dưới 992px bỏ hẳn. */
@media (max-width: 991.98px) {
    .lyn-reveal-ready .lyn-story-text,
    .lyn-reveal-ready .lyn-story-media,
    .lyn-reveal-ready .lyn-onsen-text,
    .lyn-reveal-ready .lyn-onsen-media,
    .lyn-reveal-ready .lyn-mice-feature-text,
    .lyn-reveal-ready .lyn-mice-feature-media,
    .lyn-reveal-ready .lyn-destintro-text,
    .lyn-reveal-ready .lyn-destintro-media {
        transform: translateY(20px);   /* dọc thay vì ngang */
        transition-delay: 0s;          /* bỏ so le — màn nhỏ xem tuần tự, chờ lâu thấy chậm */
    }
}

/* ── 8.4. Tôn trọng người dùng tắt chuyển động ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lyn-reveal-ready .lyn-story-text,
    .lyn-reveal-ready .lyn-story-media,
    .lyn-reveal-ready .lyn-onsen-text,
    .lyn-reveal-ready .lyn-onsen-media,
    .lyn-reveal-ready .lyn-mice-feature-text,
    .lyn-reveal-ready .lyn-mice-feature-media,
    .lyn-reveal-ready .lyn-destintro-text,
    .lyn-reveal-ready .lyn-destintro-media,
    .lyn-reveal-ready .lyn-reveal .lyn-eyebrow,
    .lyn-reveal-ready .lyn-reveal [class^="lyn-"][class$="-title"],
    .lyn-reveal-ready .lyn-reveal [class^="lyn-"][class$="-lead"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 9 — LƯỚI THẺ TIN TỨC ĐỀU CHIỀU CAO
   ═══════════════════════════════════════════════════════════════════════
   Vấn đề: tiêu đề bài dài ngắn khác nhau → thẻ cao thấp so le, lưới bị
   khoảng trống nham nhở (thấy rõ ở /tin-tuc khi tiêu đề 2 dòng nằm cạnh
   tiêu đề 4 dòng).

   Cách xử lý — CHỈ CSS, không sửa blade:
   · Các cột trong cùng một hàng kéo giãn bằng nhau (align-items: stretch)
   · Thẻ chiếm trọn chiều cao cột, phần nội dung đẩy xuống đáy
   · Ảnh giữ TỶ LỆ CỐ ĐỊNH 4:3 — không co giãn theo chiều cao thẻ
   · Tiêu đề giới hạn 3 dòng, dài hơn thì cắt bằng dấu ba chấm

   Áp cho lưới bài viết chuẩn, KHÔNG đụng lưới masonry (?layout=grid) vì
   masonry cố ý xếp so le.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 9.1. Cột trong hàng cao bằng nhau ─────────────────────────────────── */
.trv-blog-grid-inner-row > .row:not(.masonry-wrap) {
    align-items: stretch;
}

.trv-blog-grid-inner-row > .row:not(.masonry-wrap) > [class*="col-"] {
    display: flex;
}

/* ── 9.2. Thẻ chiếm trọn chiều cao cột ─────────────────────────────────── */
.trv-blog-grid-inner-row > .row:not(.masonry-wrap) .trv-blog-st3 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Phần chữ giãn ra lấp chỗ trống → mọi thẻ kết thúc cùng một đường ngang */
.trv-blog-grid-inner-row > .row:not(.masonry-wrap) .trv-post-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ── 9.3. Ảnh giữ tỷ lệ cố định ────────────────────────────────────────── */
/* Không để ảnh giãn theo chiều cao thẻ — sẽ méo hoặc cắt mất chủ thể. */
.trv-blog-grid-inner-row > .row:not(.masonry-wrap) .trv-post-media {
    flex: 0 0 auto;
    overflow: hidden;
}

.trv-blog-grid-inner-row > .row:not(.masonry-wrap) .trv-post-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* ── 9.4. Tiêu đề tối đa 3 dòng ────────────────────────────────────────── */
/* Giới hạn số dòng thay vì cắt theo số ký tự: cắt ký tự làm hỏng từ tiếng
   Việt có dấu, còn cách này luôn cắt đúng ranh giới dòng hiển thị. */
.trv-blog-grid-inner-row > .row:not(.masonry-wrap) .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 9.4b. Mô tả ngắn trên thẻ (docx §10.7 "card … mô tả ngắn") ────────── */
/* Cắt theo số dòng (không theo ký tự) để không làm hỏng chữ tiếng Việt có dấu. */
.trv-blog-st3 .lyn-post-excerpt {
    margin: .5rem 0 0;
    color: var(--lyn-muted, #6b6b6b);
    font-size: .9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 9.5. Màn hình nhỏ ─────────────────────────────────────────────────── */
/* Dưới 768px lưới chỉ còn 1 cột nên không có gì để căn bằng — nới giới hạn
   dòng để đọc được đủ tiêu đề. */
@media (max-width: 767.98px) {
    .trv-blog-grid-inner-row > .row:not(.masonry-wrap) .post-title {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 10 — HAI KHỐI NGHIỆP VỤ NỀN TỐI: CẢM NHẬN KHÁCH & DẢI THU LEAD

   Hai blade `guest-voices` và `lead-cta` viết sẵn HTML từ trước nhưng chưa
   có CSS bố cục — chỉ các quy tắc tiêu đề/eyebrow ở PHẦN 2 áp vào. Kết quả:
   biểu mẫu xếp dọc không khung, slider không dàn hàng.

   Phần này bổ sung bố cục cho cả hai. Màu và nhịp dọc lấy từ biến chung
   khai báo ở PHẦN 1, không đặt giá trị riêng.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 10.1. Nền tối dùng chung ──────────────────────────────────────────── */
.lyn-section--dark {
    background-color: var(--lyn-ink, #1a1a1a);
    background-size: cover;
    background-position: center;
    color: var(--lyn-body-on-dark, #B9C2C0);
}

.lyn-section--dark .lyn-eyebrow {
    color: var(--lyn-eyebrow-color-on-dark, #EBD9B4);
}


/* ═══ 10.2. CẢM NHẬN KHÁCH HÀNG (guest-voices) ═════════════════════════ */

.lyn-gvoices-head {
    margin-bottom: clamp(28px, 3.5vw, 48px);
}

/* Vùng chứa slider + hai nút điều hướng hai bên. */
.lyn-gvoices-viewport {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.lyn-gvoices-swiper {
    flex: 1 1 auto;
    min-width: 0;          /* cho phép co lại trong flex, tránh tràn ngang */
    overflow: hidden;
}

/* Swiper chưa khởi tạo thì .swiper-wrapper vẫn là flex — các thẻ tự dàn hàng. */
.lyn-gvoices-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.lyn-gvoices-swiper .swiper-slide {
    height: auto;          /* để thẻ con kéo đều chiều cao */
    display: flex;
}

/* ── Thẻ cảm nhận ─────────────────────────────────────────────────────── */
.lyn-gvoices-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: clamp(24px, 2.6vw, 34px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

/* Dấu ngoặc kép trang trí góc trên. */
.lyn-gvoices-mark {
    position: absolute;
    top: 10px;
    right: 24px;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--lyn-eyebrow-color, #c9a24b);
    opacity: .16;
    pointer-events: none;
}

.lyn-gvoices-stars {
    display: flex;
    gap: 3px;
    color: var(--lyn-eyebrow-color, #c9a24b);
    font-size: .95rem;
}

.lyn-gvoices-quote {
    margin: 0;
    padding: 0;
    border: 0;
    flex: 1 1 auto;
    color: #4a4a4a;
    font-size: .98rem;
    line-height: 1.75;
}

/* ── Người viết cảm nhận ──────────────────────────────────────────────── */
.lyn-gvoices-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #ece7dd;
}

.lyn-gvoices-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lyn-eyebrow-color, #c9a24b);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    overflow: hidden;
}

.lyn-gvoices-avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lyn-gvoices-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.lyn-gvoices-name {
    color: var(--heading-color, #222);
    font-weight: 600;
}

.lyn-gvoices-role {
    color: #8a8580;
    font-size: .86rem;
}

/* ── Nút chuyển thẻ ───────────────────────────────────────────────────── */
.lyn-gvoices-arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(235, 217, 180, .35);
    border-radius: 50%;
    background: transparent;
    color: var(--lyn-eyebrow-color-on-dark, #EBD9B4);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.lyn-gvoices-arrow:hover {
    background: var(--lyn-eyebrow-color, #c9a24b);
    border-color: var(--lyn-eyebrow-color, #c9a24b);
    color: #fff;
}

.lyn-gvoices-arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Màn hình nhỏ: giấu nút hai bên, khách vuốt ngang thay thế. */
@media (max-width: 767.98px) {
    .lyn-gvoices-arrow { display: none; }
    .lyn-gvoices-viewport { gap: 0; }
}


/* ═══ 10.3. DẢI THU LEAD (lead-cta) ════════════════════════════════════ */

/* Hai cột: lời mời bên trái, biểu mẫu bên phải. */
.lyn-lead-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

@media (max-width: 991.98px) {
    .lyn-lead-cta-grid { grid-template-columns: 1fr; }
}

.lyn-lead-cta-desc {
    margin-bottom: 24px;
    color: var(--lyn-body-on-dark, #B9C2C0);
    line-height: 1.75;
}

/* ── Cột trái: hotline và email ───────────────────────────────────────── */
.lyn-lead-cta-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;      /* blade dùng <ul>, bỏ dấu chấm đầu dòng */
}

.lyn-lead-cta-phone,
.lyn-lead-cta-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--lyn-eyebrow-color-on-dark, #EBD9B4);
    text-decoration: none;
    transition: color .25s ease;
}

.lyn-lead-cta-phone:hover,
.lyn-lead-cta-email:hover {
    color: #fff;
}

.lyn-lead-cta-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(235, 217, 180, .3);
    border-radius: 50%;
    font-size: 1rem;
}

.lyn-lead-cta-contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.lyn-lead-cta-contact-text strong {
    color: #fff;
    font-size: 1.05rem;
}

/* ── Cột phải: khung biểu mẫu ─────────────────────────────────────────── */
.lyn-lead-cta-form-wrap {
    padding: clamp(24px, 2.8vw, 36px);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
}

.lyn-lead-cta-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lyn-lead-cta-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lyn-lead-cta-field label {
    margin: 0;
    color: var(--lyn-body-on-dark, #B9C2C0);
    font-size: .88rem;
    letter-spacing: .01em;
}

.lyn-lead-cta-field label span {
    color: var(--lyn-eyebrow-color, #c9a24b);
}

.lyn-lead-cta-field input,
.lyn-lead-cta-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    color: #fff;
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .25s ease, background-color .25s ease;
}

.lyn-lead-cta-field textarea {
    resize: vertical;
    min-height: 108px;
}

.lyn-lead-cta-field input::placeholder,
.lyn-lead-cta-field textarea::placeholder {
    color: rgba(255, 255, 255, .38);
}

.lyn-lead-cta-field input:focus,
.lyn-lead-cta-field textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, .1);
    border-color: var(--lyn-eyebrow-color, #c9a24b);
}

/* Email và số điện thoại đứng cạnh nhau. */
.lyn-lead-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 575.98px) {
    .lyn-lead-cta-row { grid-template-columns: 1fr; }
}

/* ── Ô đồng ý ─────────────────────────────────────────────────────────── */
.lyn-lead-cta-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.lyn-lead-cta-agree input {
    margin-top: 3px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--lyn-eyebrow-color, #c9a24b);
}

.lyn-lead-cta-agree label {
    margin: 0;
    color: var(--lyn-body-on-dark, #B9C2C0);
    font-size: .86rem;
    line-height: 1.55;
}

/* ── Nút gửi ──────────────────────────────────────────────────────────── */
.lyn-lead-cta-submit {
    align-self: flex-start;
    margin-top: 4px;
}

/* ── Bẫy spam: ẩn hoàn toàn khỏi người dùng thật ──────────────────────── */
/* Không dùng display:none — một số trình duyệt bỏ qua trường ẩn kiểu đó,
   khiến bẫy mất tác dụng. */
.lyn-lead-cta-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Thông báo kết quả gửi ────────────────────────────────────────────── */
.lyn-lead-cta-alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 3px solid;
    font-size: .92rem;
    line-height: 1.6;
}

.lyn-lead-cta-alert--ok {
    background: rgba(122, 138, 109, .16);
    border-color: #7a8a6d;
    color: #cfe0c4;
}

.lyn-lead-cta-alert--err {
    background: rgba(160, 86, 63, .16);
    border-color: #a0563f;
    color: #f0c9bd;
}

.lyn-lead-cta-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* ── Khi chưa cài mô-đun liên hệ ──────────────────────────────────────── */
.lyn-lead-cta-fallback p {
    margin-bottom: 14px;
    color: var(--lyn-body-on-dark, #B9C2C0);
}


/* Ô "Mã ưu đãi" trên thanh đặt phòng (docx §10.1) — hẹp hơn ô ngày. */
@media (min-width: 992px) {
    .lyn-sb-field--promo { flex: 0 0 150px; }
}
.lyn-sticky-booking .lyn-sb-field input::placeholder { color: rgba(255, 255, 255, .45); }

/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 11 — STICKY CTA MOBILE "Gọi ngay · Chat Zalo · Đặt phòng"
   docx §10.3, §10.8, §13. Markup: partials/mobile-cta.blade.php. Chỉ ≤767px.
   Trang có thanh đặt phòng (trang chủ, trang điểm đến): thanh gọn của nó bị giấu
   để không chồng 2 thanh ở đáy — nút "Đặt phòng" ở đây mở sheet đặt phòng.
   ═══════════════════════════════════════════════════════════════════════ */
.lyn-mcta { display: none; }

@media (max-width: 767.98px) {
    .lyn-mcta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 1px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: rgba(12, 17, 17, .92);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
    }

    .lyn-mcta-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 8px 4px;
        color: #fff;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .02em;
        text-decoration: none;
    }

    .lyn-mcta-btn i { font-size: 1.15rem; line-height: 1; }
    .lyn-mcta-btn:hover,
    .lyn-mcta-btn:focus { color: #fff; }

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

    /* Chừa chỗ cho thanh ở đáy trang → footer/nội dung cuối không bị che. */
    body.has-lyn-mcta { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

    /* Thanh đặt phòng: giấu thanh gọn (đã có nút "Đặt phòng" ở trên), vẫn mở sheet được. */
    body.has-lyn-mcta .lyn-sticky-booking:not(.is-open) { transform: translateY(120%) !important; }

    /* Nút liên hệ nổi + nút cuộn lên nhích lên trên thanh CTA. */
    body.has-lyn-mcta .lyn-actions { bottom: 76px; }
    body.has-lyn-mcta .scroltop { bottom: 76px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 12 — KHỐI TRANG THEO docx §10 (đợt 2, 2026-09-12)
   Final CTA · Chọn theo nhu cầu (Lưu trú) · Tìm vé/dịch vụ (Onsen) · Logo trên
   banner · Form lead gọn (MICE) · Bộ lọc trang Ưu đãi.
   Chỉ thêm phần bố cục; màu/nút/tiêu đề dùng lại token + .lyn-btn, .lyn-eyebrow.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Final CTA (partials/hospitality/final-cta) — ảnh nền + lớp phủ tối, chữ giữa ── */
.lyn-fcta {
    position: relative;
    isolation: isolate;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(12, 17, 17, .78), rgba(12, 17, 17, .86)), var(--lyn-fcta-bg, none) !important;
    background-color: var(--lyn-ink) !important;
    background-size: cover !important;
    background-position: center !important;
}
.lyn-fcta-inner { max-width: 760px; margin-inline: auto; }
.lyn-fcta .lyn-eyebrow { color: var(--lyn-eyebrow-color-on-dark); }
.lyn-fcta-title {
    margin: 0 0 var(--lyn-title-mb);
    font-family: var(--font-display);
    font-size: var(--lyn-title-size);
    font-weight: var(--lyn-title-weight);
    line-height: var(--lyn-title-lh);
    letter-spacing: var(--lyn-title-track);
    text-transform: uppercase;
    color: var(--lyn-title-color-on-dark);
    text-wrap: balance;
}
.lyn-fcta-text { margin: 0 auto 28px; max-width: 58ch; color: var(--lyn-body-on-dark); font-size: 1.04rem; line-height: 1.65; }
.lyn-fcta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.lyn-fcta .lyn-btn { min-width: 210px; display: inline-flex; justify-content: center; }
.lyn-fcta .lyn-btn--outline:hover { background: #fff; color: var(--primary-color); border-color: #fff; }
@media (max-width: 575.98px) { .lyn-fcta .lyn-btn { width: 100%; } }

/* ── "Chọn theo nhu cầu" + "Gợi ý chọn phòng" (trang Lưu trú, docx §10.2) ── */
.lyn-needs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.lyn-need {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    background: var(--lyn-surface-2);
    border: 1px solid transparent;
    border-radius: var(--lyn-radius-lg);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .25s ease;
}
.lyn-need:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }
.lyn-need.is-active { border-color: var(--primary-color); background: #fff; }
.lyn-need-ic {
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(var(--primary-color-rgb), .12); color: var(--primary-color); font-size: 1.3rem;
}
.lyn-need-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.lyn-need-name a { color: var(--heading-color); text-decoration: none; }
.lyn-need-name a:hover { color: var(--primary-color); }
.lyn-need-hint { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-color); }
.lyn-need-rooms { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--text-color); }
.lyn-need-rooms span { font-weight: 600; color: var(--heading-color); }
.lyn-need-rooms a { color: var(--primary-color); }
.lyn-need-link { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--primary-color); text-decoration: none; }
.lyn-need-link i { transition: transform .25s ease; }
.lyn-need-link:hover i { transform: translateX(4px); }
.lyn-needs-reset { margin: 18px 0 0; font-size: .92rem; }
.lyn-needs-reset a { color: var(--primary-color); font-weight: 600; }
.lyn-lp-filter-note { margin: -18px 0 26px; color: var(--text-color); }
.lyn-lp-filter-note a { color: var(--primary-color); font-weight: 600; margin-left: 6px; }

/* ── Khối có đầu mục + lưới card đi kèm (Ưu đãi lưu trú, Gợi ý trải nghiệm, Gói MICE) ── */
.lyn-block-foot { margin-top: clamp(24px, 3vw, 36px); text-align: center; }
.lyn-block-foot a { color: var(--primary-color); font-weight: 600; text-decoration: none; }

/* ── "Tìm vé / dịch vụ" (trang Onsen, docx §10.4) — thanh ngang ngay dưới gallery ── */
.lyn-tsearch { padding-block: clamp(28px, 3.5vw, 44px) 0 !important; }
.lyn-tsearch + .lyn-section::before { content: none; }
.lyn-tsearch-form {
    display: grid;
    grid-template-columns: 1.1fr .8fr 1.4fr auto;
    gap: 14px;
    align-items: end;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--lyn-line);
    border-radius: var(--lyn-radius-lg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .07);
}
.lyn-tsearch-title { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--heading-color); }
.lyn-tsearch-field label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-color); }
.lyn-tsearch-field input,
.lyn-tsearch-field select {
    width: 100%; height: 46px; padding: 0 12px;
    border: 1px solid var(--lyn-line); border-radius: 8px; background: #fff; color: var(--heading-color);
}
.lyn-tsearch .lyn-btn { height: 46px; padding-block: 0; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 991.98px) {
    .lyn-tsearch-form { grid-template-columns: 1fr 1fr; }
    .lyn-tsearch .lyn-btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 575.98px) { .lyn-tsearch-form { grid-template-columns: 1fr; } }

/* ── "Dịch vụ chính" (trang Onsen, docx §10.4) — 4 nhóm dịch vụ trên 1 hàng desktop ── */
.lyn-xplore-grid--compact { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lyn-xplore-grid--compact .lyn-xplore-card { aspect-ratio: 4 / 5; }

/* ── Logo thương hiệu dịch vụ trên banner đầu trang (Ohayo — docx §10.4) ── */
.lyn-page-banner-logo { display: block; max-height: 72px; max-width: 220px; width: auto; margin: 0 0 14px; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }

/* ── Form lead GỌN (MICE "Lead form nhanh" — docx §10.5): 1 cột form, bỏ cột ảnh ── */
.lyn-lead--compact .lyn-lead-grid { display: block; }
.lyn-lead--compact .lyn-lead-visual { max-width: 760px; margin-bottom: 22px; }
.lyn-lead--compact .lyn-lead-photos { display: none; }
.lyn-lead--compact .lyn-lead-formcol {
    padding: clamp(20px, 2.6vw, 32px);
    background: #fff;
    border: 1px solid var(--lyn-line);
    border-radius: var(--lyn-radius-lg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .06);
}

/* ── Bộ lọc trang Ưu đãi (docx §9 "gom theo mùa, nhóm khách, điểm đến/dịch vụ") ── */
.lyn-ofilter { display: grid; gap: 12px; margin: 0 0 clamp(28px, 3.5vw, 44px); }
.lyn-ofilter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lyn-ofilter-label { min-width: 110px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-color); }
.lyn-ofilter-chip {
    display: inline-flex; align-items: center;
    padding: 7px 16px; border-radius: 999px;
    border: 1px solid var(--lyn-line); background: #fff;
    font-size: .9rem; color: var(--heading-color); text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.lyn-ofilter-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.lyn-ofilter-chip.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
@media (max-width: 575.98px) { .lyn-ofilter-label { min-width: 100%; } }