/*!
 * ═══════════════════════════════════════════════════════════════════════════
 * 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.
       HAI GIÁ TRỊ KHÁC NHAU, không được đặt bằng nhau: hai nút cùng nằm sát mép
       phải nên cùng `bottom` là chồng khít lên nhau (đã gặp trên iPhone).
       Trật tự từ dưới lên: thanh CTA (58px) → nút cuộn lên → nút liên hệ nổi.
         · scroltop cao 44px, đặt ở 68px  → chừa 10px trên thanh CTA
         · lyn-actions cao 46px, đặt ở 122px → chừa 10px trên scroltop */
    body.has-lyn-mcta .scroltop { bottom: 68px !important; }
    body.has-lyn-mcta .lyn-actions { bottom: 122px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   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 ──
   Đệm DƯỚI để chính section này tự tạo khoảng cách, không nhờ section sau bù vào.
   Trước đây để 0 rồi bắt .lyn-dt bù bằng padding-top của NÓ (design-system.css,
   ".lyn-tsearch + .lyn-dt.lyn-section") — phụ thuộc chéo dễ vỡ: đổi thứ tự section,
   thêm section khác vào giữa, hay chỉ cần luật đó thua specificity một lần là mất
   hẳn khoảng cách, nhìn như section sau đè sát/che mất nội dung khối này. */
.lyn-tsearch { padding-block: clamp(28px, 3.5vw, 44px) clamp(40px, 5vw, 64px) !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);
}

/* ── Thanh lọc trang Ưu đãi (docx §9 "gom theo mùa, nhóm khách, điểm đến/dịch vụ") ──
   Một khung trắng nổi trên nền, bốn ô chọn chia đều, ngăn nhau bằng kẻ dọc mảnh —
   cùng ngôn ngữ với thanh tìm phòng của resort. Trước đây là 4 hàng chip bấm, chiếm
   gần nửa màn hình và làm trang rối; xem offer-list.blade.php.

   Ô chọn ở đây gắn data-no-selectpicker nên KHÔNG bị bootstrap-select thay thế —
   thẻ <select> là thật, mọi thuộc tính dưới đây áp thẳng vào nó. */
.lyn-ofilter {
    /* Flex chứ không grid: các ô chọn chia đều phần rộng (flex:1), còn "Xoá lọc"
       và nút "Lọc" chỉ rộng bằng nội dung. Grid auto-fit không làm được việc này —
       repeat(auto-fit,…) phải là track duy nhất, ghép thêm cột `auto` là sai cú
       pháp và cả khai báo bị bỏ, thanh lọc đổ thành một cột dọc. */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 0 clamp(28px, 3.5vw, 44px);
    background: var(--lyn-surface, #fff);
    border: 1px solid var(--lyn-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    /* KHÔNG dùng overflow:hidden ở đây: danh sách xổ xuống nằm ngoài khung sẽ bị
       cắt cụt. Bo góc cho ô đầu/cuối bằng border-radius riêng ở dưới. */
}

/* Bo góc cho ô đầu và ô cuối để khớp góc khung — thay cho overflow:hidden. */
.lyn-ofilter > :first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
.lyn-ofilter > :last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }

/* Kẻ ngăn vẽ bằng viền trái của ô kế tiếp — không cần thẻ phụ, và ô đầu dòng tự
   không có kẻ nhờ :first-child. */
.lyn-ofilter-field {
    flex: 1 1 170px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 12px 18px;
    border-left: 1px solid var(--lyn-line);
    min-width: 0;                 /* cho phép chữ dài co lại thay vì phá lưới */
    position: relative;           /* neo cho .lyn-ofilter-list */
}
.lyn-ofilter-field:first-child { border-left: 0; }

.lyn-ofilter-label {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-color);
    opacity: .75;
    margin: 0;
    cursor: pointer;
}

/* Ô chọn hiển thị: dùng chung cho <select> thật (khi không có JS) và cho <button>
   do JS dựng — hai thứ trông y hệt nhau nên khách không thấy khác biệt. */
.lyn-ofilter-select,
.lyn-ofilter-button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0 18px 0 0;
    font-family: var(--font-body);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--heading-color);
    text-align: left;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Mũi tên vẽ bằng SVG nội tuyến, màu vàng thương hiệu — không tải thêm tệp. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dda15e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 13px 13px;
    transition: color .2s ease;
}
.lyn-ofilter-select:focus-visible,
.lyn-ofilter-button:focus-visible { color: var(--primary-color); }

/* Mũi tên lật lên khi danh sách đang mở — dấu hiệu quen thuộc, khách hiểu ngay. */
.lyn-ofilter-field.is-open .lyn-ofilter-button {
    color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dda15e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5l4-4 4 4'/%3E%3C/svg%3E");
}

.lyn-ofilter-value { display: block; overflow: hidden; text-overflow: ellipsis; }

/* <select> thật sau khi JS dựng xong danh sách: giấu khỏi mắt nhưng GIỮ trong DOM
   vì nó mới là thứ mang dữ liệu lúc gửi biểu mẫu. Không dùng display:none —
   trình duyệt bỏ qua ô display:none khi kiểm tra tính hợp lệ. */
.lyn-ofilter-select.lyn-ofilter-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Danh sách xổ xuống tự dựng ───────────────────────────────────────────
   Thẻ <option> của trình duyệt không tạo kiểu được (Windows vẽ nền xanh chói,
   góc vuông). Danh sách này do offer-filter.js dựng bằng <button> nên tạo kiểu
   thoải mái. Ô cha .lyn-ofilter-field có position:relative để neo vị trí. */
.lyn-ofilter-list {
    position: absolute;
    top: calc(100% + 6px);
    left: -1px;
    right: -1px;
    z-index: 30;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--lyn-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .13);
    max-height: 320px;
    overflow-y: auto;
    animation: lyn-ofilter-in .16s ease-out;
}

/* Mở ngược lên khi dưới không còn chỗ (JS gắn .is-drop-up sau khi đo). */
.lyn-ofilter-field.is-drop-up .lyn-ofilter-list {
    top: auto;
    bottom: calc(100% + 6px);
}

@keyframes lyn-ofilter-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .lyn-ofilter-list { animation: none; }
}

.lyn-ofilter-option {
    display: block;
    width: 100%;
    padding: 9px 12px 9px 28px;     /* chừa chỗ bên trái cho dấu tích */
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-body);
    font-size: .94rem;
    line-height: 1.4;
    color: var(--heading-color);
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.lyn-ofilter-option:hover,
.lyn-ofilter-option:focus-visible {
    background: rgba(221, 161, 94, .1);
    color: var(--primary-color);
    outline: none;
}

/* Mục đang chọn: chữ vàng đậm + dấu tích bên trái. Dùng cả hai dấu hiệu chứ
   không chỉ màu — người khó phân biệt màu vẫn nhận ra được. */
.lyn-ofilter-option[aria-selected="true"] {
    color: var(--primary-color);
    font-weight: 600;
}
.lyn-ofilter-option[aria-selected="true"]::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 11px;
    height: 6px;
    margin-top: -4px;
    border-left: 1.8px solid var(--primary-color);
    border-bottom: 1.8px solid var(--primary-color);
    transform: rotate(-45deg);
}

/* Nhóm đang lọc: nhãn rõ hơn và đổi màu — dấu hiệu duy nhất cho biết kết quả bên
   dưới đã bị thu hẹp. Class .is-set do blade gắn theo dữ liệu, không đoán bằng CSS. */
.lyn-ofilter-field.is-set .lyn-ofilter-label { color: var(--primary-color); opacity: 1; }
.lyn-ofilter-select option { color: var(--heading-color); background: #fff; }

/* Nút "Lọc": chỉ để dành cho trình duyệt tắt JS. JS chạy được thì gắn .is-auto
   vào form và nút biến mất — đổi lựa chọn là lọc luôn. */
.lyn-ofilter-submit {
    align-self: stretch;
    padding: 12px 22px;
    border: 0;
    border-left: 1px solid var(--lyn-line);
    background: var(--primary-color);
    color: #fff;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.lyn-ofilter.is-auto .lyn-ofilter-submit { display: none; }

/* "Xoá lọc" nằm cuối thanh, chữ nhạt — có mặt khi đang lọc, không tranh chú ý. */
.lyn-ofilter-reset {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-left: 1px solid var(--lyn-line);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.lyn-ofilter-reset:hover { color: var(--primary-color); }

/* Hẹp dần: 2 cột rồi 1 cột. Đổi kẻ dọc thành kẻ ngang cho khớp hướng xếp mới —
   nếu giữ kẻ dọc thì ô ở đầu mỗi hàng sẽ thừa một vạch lơ lửng. */
@media (max-width: 767.98px) {
    /* Hai ô một hàng. Kẻ ngăn: ô lẻ mở hàng mới nên bỏ kẻ trái, thêm kẻ trên;
       hai ô đầu đã ở hàng đầu nên không cần kẻ trên. */
    /* 40% chứ không 50%: flex-basis là chiều rộng TRƯỚC khi co giãn, đặt đúng 50%
       thì chỉ cần thêm 1px viền là hai ô vượt hàng và đổ xuống thành một cột. */
    .lyn-ofilter-field { flex: 1 1 40%; max-width: 50%; }
    .lyn-ofilter-field:nth-child(odd) { border-left: 0; }
    .lyn-ofilter-field { border-top: 1px solid var(--lyn-line); }
    .lyn-ofilter-field:nth-child(-n+2) { border-top: 0; }
    .lyn-ofilter-submit,
    .lyn-ofilter-reset { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--lyn-line); justify-content: center; }
}
@media (max-width: 479.98px) {
    .lyn-ofilter-field { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--lyn-line); }
    .lyn-ofilter-field:first-child { border-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 13 — Ô CHỌN (select) ĐỒNG BỘ VỚI Ô NHẬP

   Vấn đề (ảnh chụp trang /lien-he): trong cùng một biểu mẫu, ô nhập chữ là
   gạch chân nền trong suốt, còn ô chọn "Nhu cầu" / "Điểm đến" lại là hộp viền
   bo góc — nhìn lệch hẳn nhau.

   ⚠️ ĐỌC KỸ TRƯỚC KHI SỬA — ô chọn ở đây KHÔNG phải thẻ <select> thật:
   custom.js:888 gọi jQuery('select').selectpicker() cho MỌI ô chọn trên site.
   Plugin bootstrap-select giấu thẻ <select> gốc đi (opacity:0, rộng 0.5px) và
   dựng thay bằng:
       <div class="dropdown bootstrap-select form-select">
           <button class="btn dropdown-toggle">…</button>   ← cái người dùng thấy
           <div class="dropdown-menu">…</div>
       </div>
   Ba hệ quả:
     1. Viền hộp nhìn thấy là của <button>, KHÔNG phải của <select>.
        Sửa `.form-select { border: 0 }` hoàn toàn vô tác dụng.
     2. Thẻ bọc ngoài cũng mang class .form-select, nên luật viết cho
        .form-select rơi vào thẻ bọc — không phải chỗ ta tưởng.
     3. Mũi tên sổ xuống ĐÃ CÓ SẴN: style.css vẽ nó bằng
        `.bootstrap-select > .dropdown-toggle:after { content: "282" }`.
        Thêm mũi tên nữa là ra HAI mũi tên cạnh nhau (đã mắc lỗi này một lần).

   Vì vậy phần này chỉ làm đúng một việc: kẻ gạch chân cho <button> của plugin
   để nó khớp với ô nhập bên cạnh. Không đụng vào mũi tên, không đụng vào
   <select> gốc.

   Các biểu mẫu khác trên site đã được lo sẵn, KHÔNG cần thêm gì:
     · Ô tìm phòng đầu trang   style.css (.trv-search-st1 … .dropdown-toggle)
     · Khối gửi yêu cầu        design-system.css:3643 (.lyn-lead .form-select)
     · Thanh đặt phòng đáy     hospitality.css:1463 + design-system.css:1813
     · Ô tìm trải nghiệm       foundation.css:1120 (.lyn-tsearch-field)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 13.1. Gạch chân cho nút của plugin, khớp với ô nhập bên cạnh ──────── */
/* Chiều cao 44px = chiều cao ô nhập (padding 8px + cỡ chữ 1rem + viền), để hai
   ô cạnh nhau có đáy thẳng hàng. Ô nhập ở pages-refined.css:326. */
.lyn-contact-form .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 24px 8px 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--heading-color);
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .16) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .3s ease;
}

/* Mở danh sách hoặc chạm bàn phím tới → gạch chân đổi màu, giống ô nhập. */
.lyn-contact-form .bootstrap-select > .dropdown-toggle:focus,
.lyn-contact-form .bootstrap-select.show > .dropdown-toggle {
    border-bottom-color: var(--primary-color) !important;
    outline: none !important;
}

/* Mũi tên có sẵn của style.css bị đẩy lên -20px cho kiểu hộp cũ. Kiểu gạch
   chân cao hơn nên kéo về giữa dòng, và đổi sang màu vàng thương hiệu. */
.lyn-contact-form .bootstrap-select > .dropdown-toggle:after {
    margin-top: 0;
    font-size: 13px;
    color: var(--primary-color);
}

/* Thẻ bọc ngoài mang luôn class .form-select nên hứng kiểu hộp của Bootstrap
   (nền trắng, viền, bo góc). Gỡ sạch để chỉ còn gạch chân của nút bên trong. */
.lyn-contact-form .bootstrap-select.form-select {
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

/* ── 13.2. Danh sách xổ xuống ──────────────────────────────────────────── */
/* theme-overrides.css:111 đã tạo kiểu khung menu. Ở đây chỉ chỉnh mục đang
   chọn sang màu thương hiệu thay vì xanh mặc định của Bootstrap. */
.lyn-contact-form .bootstrap-select .dropdown-menu li a.dropdown-item.active,
.lyn-contact-form .bootstrap-select .dropdown-menu li a.dropdown-item.selected {
    background: var(--primary-color);
    color: #fff;
}

/* ── 13.3. Nhãn trường đồng bộ ─────────────────────────────────────────── */
/* Nhãn ô chọn phải cùng cỡ chữ, cùng khoảng cách với nhãn ô nhập, nếu không
   hàng có ô chọn sẽ lệch so với hàng bên cạnh. */
.lyn-contact-form label.form-label {
    display: block;
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════
   PHẦN 14 — .sr-only: ẩn chữ dành riêng cho trình đọc màn hình

   Bootstrap 5 đổi tên lớp này thành .visually-hidden và BỎ HẲN .sr-only.
   Markup nào còn dùng tên cũ thì chữ hiện thẳng ra màn hình — đã gặp: nút mở
   menu trên mobile hiện dòng "Chuyển đổi điều hướng" cạnh logo ở mọi trang.
   (Trước đây font-awesome.min.css có định nghĩa .sr-only nên không lộ; file
   đó đã được gỡ khỏi config.php để tiết kiệm 153KB.)

   Ba header của theme đã bỏ hẳn thẻ thừa đó — nhãn nằm ở aria-label của
   <button>. Luật này là lưới an toàn cho markup ngoài tầm kiểm soát (gói
   Botble, nội dung khách dán vào), để một lớp lỗi thời không làm lộ chữ.
   ═══════════════════════════════════════════════════════════════════════ */
.sr-only:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}