/* 22Land: style cho các khối .lr (shortcode, template khách sạn) và phần chỉnh header Flatsome.
   Mọi class đều có tiền tố lr- để không đụng class của Flatsome (.container, .button, .price, .nav…). */
:root {
  --lr-primary: #CF430E; /* Đủ tương phản 4,7:1 với nền trắng (chữ nhỏ cần 4,5:1); bản cũ #E24D14 chỉ 3,96:1 */
  --lr-primary-light: #F16A24;
  --lr-primary-dark: #BB3913;
  --lr-ink: #131313;
  --lr-black: #000;
  --lr-gray-600: #6D6D6D;
  --lr-gray-500: #525252;
  --lr-gray-300: #D4D4D4;
  --lr-line: #ECECEC;
  --lr-line-card: #F0EEED;
  --lr-ivory: #FBF9F8;
  --lr-white: #fff;
  --lr-font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --lr-font-display: "Inter Tight", "Be Vietnam Pro", sans-serif;
  --lr-font-script: "Cormorant Garamond", serif;
  --lr-container: 1270px;
  --lr-sticky-top: 0px;
  --lr-ease: 300ms ease;
  --lr-zoom: transform 1.2s cubic-bezier(.22, .61, .36, 1); /* Zoom ảnh khi hover: chậm, êm */
}

/* ---------- Reset trong khối .lr: độ ưu tiên 0,1,0 thắng quy tắc theo thẻ của Flatsome (h3, p, li…), thua class lr- khai báo sau ---------- */
.lr { font: 300 14px/20px var(--lr-font-body); color: var(--lr-black); -webkit-font-smoothing: antialiased; }
.lr, .lr *, .lr *::before, .lr *::after { box-sizing: border-box; }
.lr :where(h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote, figure, fieldset, form) { margin: 0; padding: 0; }
.lr :where(h1, h2, h3, h4) { color: inherit; width: auto; font-weight: 500; text-rendering: auto; }
.lr :where(ul, ol) { list-style: none; }
.lr :where(li) { margin: 0; }
.lr :where(a) { color: inherit; text-decoration: none; }
.lr :where(img) { display: block; max-width: 100%; height: auto; }
.lr :where(blockquote) { border: 0; font-size: inherit; font-style: normal; color: inherit; }
.lr :where(fieldset) { border: 0; }
.lr :where(dl) { font-size: inherit; opacity: 1; text-transform: none; }
.lr :where(label) { display: block; font-size: inherit; font-weight: inherit; color: inherit; margin: 0; }
.lr :where(button) { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; min-height: 0; min-width: 0; line-height: inherit; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; box-shadow: none; }
.lr input:not([type="checkbox"]):not([type="radio"]), .lr select, .lr textarea { font: inherit; color: inherit; height: auto; margin: 0; box-shadow: none; border-radius: 0; vertical-align: baseline; }
.lr :focus-visible { outline: 2px solid var(--lr-primary); outline-offset: 3px; }
.lr [hidden] { display: none !important; }

.lr-container { width: 100%; max-width: var(--lr-container); margin: 0 auto; padding: 0 24px; }
.lr-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lr-display { font-family: var(--lr-font-display); font-weight: 500; letter-spacing: -0.02em; color: var(--lr-ink); }
.lr-eyebrow { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--lr-gray-600); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.lr-lead { margin: 12px 0 0; max-width: 560px; font-size: 16px; line-height: 26px; color: var(--lr-gray-500); }
.lr-arrow-link { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--lr-primary); }
.lr-arrow-link svg { width: 14px; height: 14px; transition: transform var(--lr-ease); }
.lr-arrow-link:hover svg, .lr-group:hover .lr-arrow-link svg { transform: translate(2px, -2px); }
.lr-block { padding: 88px 0 72px; }
.lr-pt-0 { padding-top: 0; }
.lr-pt-24 { padding-top: 24px; }
.lr-m-0 { margin: 0 !important; }
.lr-mb-16 { margin-bottom: 16px; }
.lr-section-title { font-size: 44px; line-height: 1.3; margin: 0 0 40px; }
.lr-empty { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--lr-gray-600); font-size: 16px; }
.lr-empty a { color: var(--lr-primary); font-weight: 500; }
.lr-icon { width: 16px; height: 16px; flex: none; }

/* ---------- Nút ---------- */
.lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; font-weight: 600; font-size: 16px; line-height: 24px; white-space: nowrap; text-transform: none; letter-spacing: normal; transition: background var(--lr-ease), color var(--lr-ease), border-color var(--lr-ease); }
.lr-btn:disabled { opacity: .5; cursor: not-allowed; }
.lr-btn-primary { background: var(--lr-primary); color: var(--lr-white) !important; padding: 10px 24px; border: 1px solid var(--lr-primary); }
.lr-btn-primary:hover:not(:disabled) { background: var(--lr-primary-dark); }
.lr-btn-white { background: var(--lr-white); color: #374151; padding: 8px 16px; }
.lr-btn-white:hover { background: #f3f3f3; }
.lr-btn-black { background: var(--lr-black); color: var(--lr-white) !important; padding: 12px 32px; text-transform: uppercase; }
.lr-btn-black:hover { background: #2a2a2a; }
.lr-btn-outline { background: var(--lr-white); color: #404041; border: 1px solid #404041; padding: 12px 32px; font-size: 14px; font-weight: 500; }
.lr-btn-outline:hover { background: var(--lr-black); color: var(--lr-white); }
.lr-btn-sm { padding: 8px 20px; font-size: 14px; font-weight: 500; }

/* ---------- Đường dẫn, chip, địa chỉ ---------- */
.lr-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--lr-gray-600); padding: 20px 0 12px; }
.lr-crumbs a:hover { color: var(--lr-primary); }
.lr-crumbs span[aria-current] { color: var(--lr-ink); font-weight: 500; }
.lr-crumbs .sep { color: var(--lr-gray-500); }
.lr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; background: var(--lr-ivory); border: 1px solid var(--lr-line-card); font-size: 13px; line-height: 18px; font-weight: 400; color: var(--lr-gray-500); }
.lr-chip .lr-icon { width: 14px; height: 14px; color: var(--lr-primary); }
.lr-addr { display: flex; align-items: flex-start; gap: 6px; color: var(--lr-gray-600); font-size: 14px; }
.lr-addr .lr-icon { margin-top: 2px; color: var(--lr-primary); }

/* ---------- Logo đơn vị ---------- */
.lr-unit-logo { display: block; height: 100%; width: 100%; object-fit: contain; }
.lr-unit-logo.is-dark, .lr-brand-logo.is-dark { background: var(--lr-black); border-radius: 6px; }
.lr-unit-text { display: grid; place-items: center; place-content: center; height: 100%; font: 500 15px/1.2 var(--lr-font-display); color: var(--lr-ink); text-align: center; }
.lr-unit-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; margin-bottom: 16px; border: 1px solid var(--lr-line-card); border-radius: 9999px; font-size: 13px; font-weight: 500; color: var(--lr-ink); transition: border-color var(--lr-ease); }
.lr-unit-badge:hover { border-color: var(--lr-primary-light); }
.lr-unit-badge .lr-mark { width: 56px; height: 32px; border-radius: 9999px; background: var(--lr-white); overflow: hidden; display: block; }
.lr-unit-badge .lr-unit-text { font-size: 9px; }

/* ---------- Giá ---------- */
.lr-price-from { font-size: 13px; color: var(--lr-gray-600); }
.lr-price { font: 600 22px/1.2 var(--lr-font-body); color: var(--lr-primary); }
.lr-price small { font-size: 13px; font-weight: 400; color: var(--lr-gray-600); }
.lr-price-alt { font-size: 13px; color: var(--lr-gray-500); }
.lr-price-note { font-size: 12px; color: var(--lr-gray-600); }

/* ---------- Thẻ cơ sở ảnh lớn ---------- */
.lr-stay-card { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #222; color: var(--lr-white) !important; min-height: 280px; isolation: isolate; }
.lr-stay-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: var(--lr-zoom); }
.lr-stay-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%); }
.lr-stay-card:hover img { transform: scale(1.08); }
.lr-stay-card .lr-tag { position: absolute; top: 16px; left: 16px; padding: 4px 12px; border-radius: 9999px; background: rgba(255,255,255,.92); color: var(--lr-ink); font-size: 12px; font-weight: 500; }
.lr-stay-card .lr-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lr-stay-card h3 { font: 500 22px/1.2 var(--lr-font-display); letter-spacing: -0.01em; margin: 0 0 6px; color: var(--lr-white); }
.lr-stay-card p { margin: 0; font-size: 13px; line-height: 18px; color: rgba(255,255,255,.8); }
.lr-stay-card .lr-from { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.8); }
.lr-stay-card .lr-from strong { font-size: 16px; font-weight: 600; color: var(--lr-white); }
.lr-stay-card .lr-go { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--lr-primary); display: grid; place-items: center; transition: transform var(--lr-ease); }
.lr-stay-card .lr-go svg { width: 18px; height: 18px; }
.lr-stay-card:hover .lr-go { transform: rotate(-45deg); }

/* ---------- Hàng khách sạn ---------- */
.lr-results { display: flex; flex-direction: column; gap: 20px; }
.lr-branch-row { display: grid; grid-template-columns: 300px 1fr 220px; border: 1px solid var(--lr-line-card); border-radius: 16px; overflow: hidden; background: var(--lr-white); transition: box-shadow var(--lr-ease); }
.lr-branch-row:hover { box-shadow: 0 12px 32px -12px rgba(16, 25, 40, .18); }
.lr-branch-row .lr-media { position: relative; min-height: 220px; overflow: hidden; }
.lr-branch-row .lr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--lr-zoom); }
.lr-branch-row:hover .lr-media img { transform: scale(1.08); }
.lr-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 9999px; background: var(--lr-black); color: var(--lr-white); font-size: 12px; font-weight: 500; }
.lr-branch-row .lr-info { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.lr-unit-name { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-primary) !important; }
.lr-unit-name:hover { text-decoration: underline; }
.lr-branch-row h3 { margin: 0; font: 500 22px/1.25 var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
.lr-branch-row h3 a:hover { color: var(--lr-primary); }
.lr-rooms-count { font-size: 13px; color: var(--lr-gray-600); }
.lr-branch-row .lr-side { padding: 24px; border-left: 1px solid var(--lr-line-card); background: var(--lr-ivory); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; gap: 12px; }
.lr-side-price { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Carousel ngang ---------- */
.lr-carousel { position: relative; }
.lr-carousel-track { --edge: max(24px, calc((100% - var(--lr-container)) / 2 + 24px)); /* 100% thay vì 100vw để không tính thanh cuộn */ display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px var(--edge); scroll-padding-inline: var(--edge); scrollbar-width: none; }
.lr-carousel-track::-webkit-scrollbar { display: none; }
.lr-carousel-track > * { scroll-snap-align: start; }
.lr-carousel-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50% !important; background: rgba(255,255,255,.95) !important; display: grid !important; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.12) !important; z-index: 2; }
.lr-carousel-nav:disabled { opacity: 0; pointer-events: none; }
.lr-carousel-nav.prev { left: 24px; } .lr-carousel-nav.next { right: 24px; }
.lr-carousel-nav svg { width: 18px; height: 18px; }
.lr-others { background: var(--lr-ivory); }
.lr-others .lr-stay-card { height: 380px; }
.lr-others-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }

/* ---------- Banner trang chủ ---------- */
.lr-hero-wrap { position: relative; }
.lr-hero { position: relative; height: var(--lr-hero-h, 785px); overflow: hidden; background: #1b1410; }
.lr-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.lr-hero-slide.is-active { opacity: 1; }
.lr-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.lr-hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.45) 100%); }
.lr-hero-cta { position: absolute; z-index: 2; left: 50%; top: 380px; transform: translateX(-50%); }
.lr-hero-dots { position: absolute; z-index: 2; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; align-items: center; }
.lr-hero-dots button { width: 32px; height: 32px; display: grid; place-items: center; }
.lr-hero-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); transition: all var(--lr-ease); }
.lr-hero-dots button[aria-current="true"]::before { width: 16px; height: 16px; background: transparent; border: 3px solid var(--lr-primary); box-sizing: border-box; }
/* Xem trước trong UX Builder: xếp ảnh thành dải để dễ chọn */
.lr-hero-builder { padding: 16px; background: #1b1410; }
.lr-builder-note { color: #fff; font-size: 13px; margin-bottom: 12px; }
.lr-hero-builder-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lr-hero-builder .lr-hero-slide { position: relative; opacity: 1; height: 140px; background: #333; }

/* ---------- Thanh tìm phòng ---------- */
.lr-booking { display: flex; justify-content: center; padding: 24px; transition: all var(--lr-ease); }
.lr-booking.is-overlay { position: absolute; z-index: 40; top: var(--lr-booking-top, 250px); left: 0; right: 0; padding: 0 24px; }
.lr-booking-form { width: 100%; max-width: 1000px; height: 76px; display: flex; align-items: center; background: var(--lr-white); border: 2px solid var(--lr-line); border-radius: 9999px; transition: all var(--lr-ease); }
.lr-booking.is-sticky { position: fixed; z-index: 60; top: var(--lr-sticky-top); left: 0; right: 0; padding: 0; background: var(--lr-white); box-shadow: 0 5px 13px -5px rgba(16, 25, 40, .08); }
.lr-booking.is-sticky .lr-booking-form { height: 64px; border: 0; border-radius: 0; }
.lr-field { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 24px; cursor: pointer; transition: background var(--lr-ease); border-radius: 9999px; position: relative; min-width: 0; }
.lr-field:hover { background: #F5F5F5; }
.lr-field-loc { width: 300px; padding-left: 30px; }
.lr-field-date, .lr-field-guest { flex: 1; }
.lr-field label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--lr-primary); cursor: pointer; }
.lr .lr-field input, .lr .lr-field select { font: 400 14px/20px var(--lr-font-body); color: var(--lr-ink); border: 0; padding: 0; background: transparent; outline: none; width: 100%; cursor: pointer; min-height: 0; -webkit-appearance: none; appearance: none; background-image: none; }
.lr-field input::placeholder { color: #A3A3A3; }
.lr-field + .lr-field::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1px; height: 30px; background: var(--lr-line); }
.lr-field:hover::before, .lr-field:hover + .lr-field::before { opacity: 0; }
.lr-booking-submit { margin: 0 16px !important; background: var(--lr-primary) !important; color: var(--lr-white) !important; border-radius: 60px !important; padding: 10px 32px !important; font-weight: 500; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 8px; transition: background var(--lr-ease); }
.lr-booking-submit:hover { background: var(--lr-primary-dark) !important; }
.lr-booking-submit .lr-icon { width: 18px; height: 18px; }
/* Mega menu "Chọn vị trí" */
.lr-booking-form { position: relative; }
.lr-loc-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 70; width: min(820px, 100%); max-height: min(70vh, 520px); display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--lr-white); border-radius: 20px; box-shadow: 0 0 0 1px var(--lr-line), 0 24px 56px -16px rgba(16, 25, 40, .28); overflow: hidden; text-align: left; cursor: default; }
.lr-loc-panel.is-searching { grid-template-columns: minmax(0, 1fr); }
.lr-loc-cities { display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; background: var(--lr-ivory); border-right: 1px solid var(--lr-line-card); overflow-y: auto; }
.lr-loc-head { margin: 0 0 8px; padding: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-gray-600); }
.lr-loc-cities button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; text-align: left; transition: background var(--lr-ease); }
.lr-loc-cities button span { font: 500 16px/1.2 var(--lr-font-display); color: var(--lr-ink); }
.lr-loc-cities button small { font-size: 12px; color: var(--lr-gray-600); }
.lr-loc-cities button:hover { background: rgba(255,255,255,.7); }
.lr-loc-cities button[aria-selected="true"] { background: var(--lr-white); box-shadow: 0 4px 14px -6px rgba(16, 25, 40, .18); }
.lr-loc-cities button[aria-selected="true"] span { color: var(--lr-primary); }
.lr-loc-main { display: flex; flex-direction: column; gap: 20px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.lr-loc-city { display: flex; flex-direction: column; gap: 20px; }
.lr-loc-group .lr-loc-head { padding: 0; }
.lr-loc-districts { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-loc-districts button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--lr-line); border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--lr-ink); transition: border-color var(--lr-ease), color var(--lr-ease); }
.lr-loc-districts button small { font-size: 12px; font-weight: 400; color: var(--lr-gray-600); }
.lr-loc-districts button:hover, .lr-loc-districts button:focus-visible { border-color: var(--lr-primary); color: var(--lr-primary); }
.lr-loc-districts button[aria-pressed="true"] { background: var(--lr-black); border-color: var(--lr-black); color: var(--lr-white); }
.lr-loc-districts button[aria-pressed="true"] small { color: rgba(255,255,255,.7); }
.lr-loc-hotels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.lr-loc-hotels a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; transition: background var(--lr-ease); }
.lr-loc-hotels a:hover, .lr-loc-hotels a:focus-visible { background: var(--lr-ivory); }
.lr .lr-loc-hotels img { width: 48px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; background: var(--lr-ivory); }
.lr-loc-hotels span { display: flex; flex-direction: column; min-width: 0; }
.lr-loc-hotels strong { font-size: 14px; font-weight: 500; color: var(--lr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-loc-hotels small { font-size: 12px; color: var(--lr-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-loc-hotels a:hover strong { color: var(--lr-primary); }
.lr-loc-empty { font-size: 14px; color: var(--lr-gray-600); }
.lr .lr-field-loc input { cursor: text; }

/* Thanh đặt phòng dính thì ẩn header Flatsome đang dính */
.lr-booking-stuck .header-wrapper.stuck { transform: translateY(-100%); }
.header-wrapper { transition: transform var(--lr-ease); }

/* ---------- Khách sạn nổi bật ---------- */
.lr-feat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.lr-feat-head .lr-section-title { margin: 0; }
.lr-feat-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 20px; }
.lr-feat-grid .lr-stay-card:first-child { grid-row: span 2; }
.lr-feat-grid .lr-stay-card:first-child h3 { font-size: 32px; }
.lr-feat-grid .lr-stay-card:first-child .lr-body { padding: 28px; }
.lr-feat-grid .lr-stay-card:not(:first-child) p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lr-feat-grid.lr-cards { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-auto-rows: 320px; }
.lr-feat-grid.lr-cards .lr-stay-card:first-child { grid-row: auto; }
.lr-feat-grid.lr-cards .lr-stay-card:first-child h3 { font-size: 22px; }

/* ---------- Điểm đến ---------- */
.lr-dest { padding-top: 24px; }
.lr-dest-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.lr-dest-head h2 { font-size: 44px; line-height: 52px; margin: 0; }
.lr-city-tabs { display: flex; border: 1px solid var(--lr-line); border-radius: 9999px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.lr-city-tabs button { font: 500 20px/30px var(--lr-font-display); padding: 8px 24px; border-radius: 9999px; white-space: nowrap; transition: background var(--lr-ease), color var(--lr-ease); }
.lr-city-tabs button[aria-selected="true"] { background: var(--lr-black); color: var(--lr-white); }
.lr-city-tabs button:not([aria-selected="true"]):hover { color: var(--lr-primary); }
.lr-district-tabs { display: flex; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 24px; }
.lr-district-tabs button { font-size: 20px; line-height: 30px; font-weight: 400; padding: 4px 10px; }
.lr-district-tabs button[aria-selected="true"], .lr-district-tabs button:hover { color: var(--lr-primary-dark); }
.lr-dest-body { display: grid; grid-template-columns: 244px 1fr; gap: 48px; }
.lr-brand-logo { display: block; height: 100%; width: 100%; object-fit: contain; }
.lr-brand-filter { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.lr-brand-filter button { width: 244px; height: 86px; padding: 10px 24px; border: 1px solid var(--lr-line); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color var(--lr-ease); }
.lr-brand-filter .lr-brand-logo { height: 64px; }
.lr-brand-filter .lr-brand-logo.is-dark { width: auto; aspect-ratio: 4 / 3; }
.lr-brand-filter button:hover, .lr-brand-filter button[aria-pressed="true"] { border-color: var(--lr-primary-light); }
.lr-brand-filter .lr-all { font-size: 16px; font-weight: 400; }
.lr-brand-filter .lr-btn-outline { margin-top: 8px; }
.lr-hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-content: start; }
.lr-hotel-card { height: 308px; border: 1px solid var(--lr-line-card); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.lr-hotel-card .lr-media { height: 178px; overflow: hidden; position: relative; }
.lr-hotel-card .lr-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--lr-zoom); }
.lr-hotel-card:hover .lr-media img { transform: scale(1.08); }
.lr-hotel-card .lr-media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%); pointer-events: none; }
.lr-hotel-card .lr-tag { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 10px; color: var(--lr-white); font: italic 500 22px var(--lr-font-script); text-shadow: 0 1px 8px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-hotel-card .lr-info { height: 130px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.lr-hotel-card h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--lr-ink); }
.lr-pager { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 8px; font-size: 14px; font-weight: 500; }
.lr-pager button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.lr-pager button:hover:not(:disabled) { background: #F5F5F5; }
.lr-pager button:disabled { color: var(--lr-gray-300); cursor: default; }

/* ---------- Đánh giá ---------- */
.lr-reviews { background: var(--lr-ivory); }
.lr-reviews .lr-section-title { text-align: center; margin-bottom: 12px; }
.lr-reviews .lr-lead { text-align: center; margin: 0 auto 40px; }
.lr-review-card { flex: 0 0 380px; display: flex; flex-direction: column; gap: 16px; padding: 28px; height: 100%; background: var(--lr-white); border: 1px solid var(--lr-line-card); border-radius: 16px; position: relative; }
.lr-carousel-track > :not(.lr-review-card):not(.lr-stay-card) { flex: 0 0 380px; }
/* Carousel gọn trong khung (đánh giá): 3 thẻ mỗi khung, nút và chấm vị trí nằm dưới */
.lr-carousel--contained { max-width: var(--lr-container); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 12px; }
.lr-carousel--contained .lr-carousel-track { order: -1; flex: 0 0 100%; padding: 4px 0 8px; scroll-padding-inline: 0; }
.lr-carousel--contained .lr-carousel-track > * { flex: 0 0 calc((100% - 48px) / 3); }
.lr-carousel--contained .lr-carousel-nav { position: static; translate: none; border: 1px solid var(--lr-line) !important; box-shadow: none !important; }
.lr-carousel--contained .lr-carousel-nav:hover { border-color: var(--lr-ink) !important; }
.lr-carousel--contained.is-static .lr-carousel-nav, .lr-carousel--contained.is-static .lr-carousel-dots { display: none !important; }
.lr-carousel-dots { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.lr-carousel-dots button { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--lr-gray-300); transition: width var(--lr-ease), background var(--lr-ease); }
.lr-carousel-dots button[aria-current="true"] { width: 24px; background: var(--lr-primary); }
.lr-carousel-dots button::after { content: ""; position: absolute; inset: -14px -4px; } /* vùng chạm lớn hơn chấm */
.lr-review-card::before { content: "“"; position: absolute; top: 4px; right: 24px; font: italic 500 88px/1 var(--lr-font-script); color: var(--lr-primary); opacity: .25; }
.lr-stars { display: flex; gap: 2px; color: var(--lr-primary-light); }
.lr-review-card blockquote { margin: 0; padding: 0; flex: 1; font-size: 15px; line-height: 24px; color: var(--lr-ink); }
.lr-review-card footer { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--lr-line-card); }
.lr-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--lr-black); color: var(--lr-white); display: grid; place-items: center; font: 500 16px var(--lr-font-display); flex: none; }
.lr-review-card strong { display: block; font-size: 15px; font-weight: 600; color: var(--lr-ink); }
.lr-review-card footer a { font-size: 13px; color: var(--lr-primary); }
.lr-review-card footer a:hover { text-decoration: underline; }

/* ---------- Sắp ra mắt: mỗi slide là một đợt, gồm một hoặc nhiều cơ sở ---------- */
.lr-upcoming .lr-container { text-align: center; }
.lr-upcoming .lr-section-title { margin-bottom: 12px; }
.lr-upcoming .lr-lead { margin: 0 auto 40px; }
.lr-upcoming .lr-carousel-track { align-items: flex-start; } /* đợt ít cơ sở không bị kéo cao theo đợt nhiều cơ sở */
.lr-upcoming .lr-carousel--contained .lr-carousel-track > .lr-launch { flex-basis: 100%; } /* thắng cả quy tắc 85vw trên mobile */
.lr-launch { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 24px; background: var(--lr-ivory); border: 1px solid var(--lr-line-card); border-radius: 20px; }
.lr-launch-info { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 8px 4px 8px 12px; }
.lr-launch-info p { margin: 0; font-size: 15px; line-height: 22px; color: var(--lr-gray-500); }
.lr-launch-info .lr-launch-label { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-primary); }
.lr-launch-when { margin: 0; font: 500 34px/1.15 var(--lr-font-display); letter-spacing: -0.02em; color: var(--lr-ink); }
.lr-launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lr-launch .lr-stay-card { min-height: 340px; }
@media (max-width: 900px) {
  .lr-launch { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .lr-launch-info { padding: 4px; }
  .lr-launch-when { font-size: 28px; }
}
@media (max-width: 767px) {
  .lr-launch-grid { grid-template-columns: minmax(0, 1fr); }
  .lr-launch .lr-stay-card { min-height: 240px; }
}

/* ---------- Bộ sưu tập thương hiệu ---------- */
.lr-brand-box { position: relative; border: 1px solid var(--lr-line-card); border-radius: 20px; overflow: hidden; background: var(--lr-white); margin-bottom: 40px; }
.lr-brand-box .lr-band { background: var(--lr-ivory); border-bottom: 1px solid var(--lr-line-card); display: flex; align-items: center; justify-content: center; gap: 32px; padding: 36px 24px; }
.lr-brand-box .lr-band img { height: 72px; width: auto; }
.lr-brand-box .lr-band span { border-left: 1px solid var(--lr-gray-300); padding-left: 32px; font: 500 19px/32px var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
/* Các nhóm logo luôn canh giữa khung, số nhóm bao nhiêu cũng vậy (lưới 4 cột cố định để trống cột khi chỉ có 3 nhóm) */
.lr-brand-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; padding: 24px 16px 32px; }
.lr-brand-cat { flex: 0 1 auto; min-width: 200px; }
.lr-brand-cat { text-align: center; }
.lr-brand-cat h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 14px; font-weight: 400; color: var(--lr-gray-500); white-space: nowrap; }
.lr-brand-cat h3::before, .lr-brand-cat h3::after { content: ""; flex: 1; height: 1px; background: var(--lr-gray-300); }
.lr-brand-cat .lr-logos { display: flex; justify-content: center; gap: 24px; }
.lr-brand-cat .lr-logos a { width: 130px; height: 72px; display: block; overflow: hidden; opacity: .9; transition: opacity var(--lr-ease); }
.lr-brand-cat .lr-logos a:hover { opacity: 1; }

/* ---------- Đơn vị thành viên ---------- */
.lr-units-intro { padding: 16px 0 32px; }
.lr-units-intro h1 { font-size: 44px; line-height: 1.2; margin: 0 0 12px; }
.lr-unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 88px; }
.lr-unit-card { display: flex; flex-direction: column; border: 1px solid var(--lr-line-card); border-radius: 20px; overflow: hidden; background: var(--lr-white); transition: box-shadow var(--lr-ease); }
.lr-unit-card:hover { box-shadow: 0 16px 40px -18px rgba(16, 25, 40, .22); }
/* minmax(0, 1fr) + overflow: ảnh dọc không kéo hàng cao quá 220px rồi tràn xuống đè logo và tên đơn vị */
.lr-collage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; height: 220px; overflow: hidden; background: var(--lr-ivory); }
.lr-collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.lr-collage img:first-child { grid-row: span 2; }
.lr-collage.one { grid-template-columns: 1fr; }
.lr-unit-card .lr-body { position: relative; padding: 44px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lr-logo-tile { display: block; overflow: hidden; background: var(--lr-white); }
.lr-unit-card .lr-logo-tile { position: absolute; top: -36px; left: 24px; width: 120px; height: 72px; padding: 8px 12px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.lr-unit-card h2 { margin: 0; font: 500 24px/1.2 var(--lr-font-display); color: var(--lr-ink); }
.lr-unit-card p { margin: 0; color: var(--lr-gray-500); }
.lr-unit-card .lr-stats { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--lr-gray-600); border-top: 1px solid var(--lr-line-card); }

.lr-unit-hero { position: relative; color: var(--lr-white); background: #111; overflow: hidden; isolation: isolate; }
.lr-unit-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.lr-unit-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 70%); }
.lr-unit-crumbs { padding-top: 8px; }
.lr-unit-hero .lr-crumbs, .lr-unit-hero .lr-crumbs a, .lr-unit-hero .lr-eyebrow { color: rgba(255,255,255,.7); }
.lr-unit-hero .lr-crumbs span[aria-current] { color: var(--lr-white); }
.lr-unit-hero-inner { padding-top: 56px; padding-bottom: 56px; display: flex; align-items: center; gap: 40px; }
.lr-unit-hero .lr-logo-tile { flex: none; width: 200px; height: 130px; padding: 14px 20px; border-radius: 20px; }
.lr-unit-hero h1 { margin: 0 0 8px; font-size: 48px; line-height: 1.1; color: var(--lr-white); }
.lr-unit-hero p:not(.lr-eyebrow) { margin: 0 0 20px; max-width: 560px; font-size: 16px; line-height: 26px; color: rgba(255,255,255,.8); }
.lr-facts-inline { display: flex; gap: 32px; flex-wrap: wrap; }
.lr-facts-inline strong { display: block; font: 500 28px/1.1 var(--lr-font-display); }
.lr-facts-inline span { font-size: 13px; color: rgba(255,255,255,.7); }
.lr-unit-tabs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 24px 0 4px; }
.lr-unit-tabs a { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 6px 18px 6px 6px; border: 1px solid var(--lr-line); border-radius: 9999px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color var(--lr-ease), background var(--lr-ease); }
.lr-unit-tabs a:first-child { padding-left: 18px; }
.lr-unit-tabs a:hover { border-color: var(--lr-ink); }
.lr-unit-tabs a[aria-current="page"] { border-color: var(--lr-black); background: var(--lr-black); color: var(--lr-white); }
.lr-unit-tabs .lr-mark { width: 64px; height: 42px; border-radius: 9999px; background: var(--lr-white); overflow: hidden; display: block; padding: 4px 8px; }
.lr-unit-tabs .lr-unit-text { font-size: 10px; }
.lr-hotels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 48px 0 24px; }
.lr-hotels-head .lr-section-title { margin: 0; }
.lr .lr-hotels-head select { border: 1px solid var(--lr-line); border-radius: 9999px; padding: 10px 16px; font-size: 14px; font-weight: 400; background-color: var(--lr-white); width: auto; }
.lr-unit-list { padding-bottom: 88px; }

/* ---------- Trang danh sách / tìm kiếm ---------- */
.lr-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; }
.lr-page-head h1 { font-size: 44px; line-height: 1.2; margin: 0; }
.lr-count { margin: 8px 0 0; font-size: 16px; color: var(--lr-gray-500); }
.lr-search { display: flex !important; align-items: center; gap: 10px; width: min(420px, 100%); height: 52px; padding: 0 20px; border: 2px solid var(--lr-line); border-radius: 9999px; transition: border-color var(--lr-ease); }
.lr-search:focus-within { border-color: var(--lr-primary); }
.lr-search .lr-icon { color: var(--lr-primary); }
.lr .lr-search input { flex: 1; border: 0; outline: none; font-size: 14px; font-weight: 400; background: transparent; padding: 0; }
.lr-districts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 24px; border-bottom: 1px solid var(--lr-line); }
.lr-districts button { flex: none; padding: 8px 18px; border-radius: 9999px; border: 1px solid var(--lr-line); font-size: 14px; font-weight: 500; transition: all var(--lr-ease); }
.lr-districts button:hover { border-color: var(--lr-ink); }
.lr-districts button[aria-pressed="true"] { background: var(--lr-black); border-color: var(--lr-black); color: var(--lr-white); }
.lr-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 32px 0 88px; }
.lr-filters { position: sticky; top: calc(var(--lr-sticky-top) + 24px); align-self: start; display: flex; flex-direction: column; gap: 28px; }
.lr-filters h2 { font: 500 20px/1.2 var(--lr-font-display); margin: 0; color: var(--lr-ink); }
.lr-fgroup { display: flex; flex-direction: column; gap: 12px; }
.lr-fgroup h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--lr-ink); }
.lr-fgroup label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--lr-gray-500); cursor: pointer; }
.lr-fgroup h3 label { color: inherit; font-weight: 600; }
.lr .lr-fgroup input[type="radio"], .lr .lr-fgroup input[type="checkbox"] { accent-color: var(--lr-primary); width: 16px; height: 16px; margin: 0; }
.lr .lr-fgroup select { border: 1px solid var(--lr-line); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 400; background-color: var(--lr-white); }
.lr-reset { align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--lr-primary) !important; }
.lr-reset:hover { text-decoration: underline; }
.lr-filter-toggle { display: none; }
.lr-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.lr-pagination button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--lr-line); font-weight: 500; }
.lr-pagination button[aria-current="page"] { background: var(--lr-black); border-color: var(--lr-black); color: var(--lr-white); }
.lr-pagination button:hover:not([aria-current="page"]) { border-color: var(--lr-ink); }
.lr-longstay { margin-top: 24px; padding: 28px; border-radius: 16px; background: var(--lr-black); color: var(--lr-white); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lr-longstay h3 { margin: 0 0 4px; font: 500 24px/1.2 var(--lr-font-display); }
.lr-longstay p { margin: 0; color: rgba(255,255,255,.75); }

/* ---------- Trang khách sạn ---------- */
.lr-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 8px; border-radius: 20px; overflow: hidden; }
.lr-gallery button { position: relative; overflow: hidden; background: #eee; }
.lr-gallery button:first-child { grid-row: span 2; }
.lr-gallery img { width: 100%; height: 100%; object-fit: cover; transition: var(--lr-zoom); }
.lr-gallery button:hover img { transform: scale(1.08); }
.lr-gallery .lr-more { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: var(--lr-white); display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 500; }
.lr-gallery .lr-more .lr-icon { width: 28px; height: 28px; }
.lr-gallery.n1 { grid-template-columns: 1fr; grid-template-rows: 460px; }
.lr-gallery.n2, .lr-gallery.n3, .lr-gallery.n4 { grid-template-columns: 2fr 1fr; }
.lr-subnav { position: sticky; top: var(--lr-sticky-top); z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--lr-line); margin-top: 24px; transition: top var(--lr-ease); }
.lr-subnav .lr-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.lr-subnav nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.lr-subnav nav a { padding: 8px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background var(--lr-ease), color var(--lr-ease); }
.lr-subnav nav a:hover { color: var(--lr-primary); }
.lr-subnav nav a[aria-current="true"] { background: var(--lr-black); color: var(--lr-white); }
.lr-mini { display: flex; align-items: center; gap: 16px; }
.lr-mini .lr-price { font-size: 18px; }
.lr-intro { display: grid; grid-template-columns: 1fr 360px; gap: 48px; padding-top: 40px; padding-bottom: 24px; }
.lr-intro h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; }
.lr-intro .lr-addr { font-size: 15px; margin-bottom: 20px; }
.lr-desc { position: relative; margin-top: 28px; font-size: 15px; line-height: 26px; color: var(--lr-gray-500); }
.lr-desc h2, .lr-desc h3, .lr-desc h4 { margin: 20px 0 6px; font-size: 16px; font-weight: 600; color: var(--lr-ink); }
.lr-desc p { margin: 0 0 10px; }
.lr-desc ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.lr-desc.is-clamped { max-height: 260px; overflow: hidden; }
.lr-desc.is-clamped::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(rgba(255,255,255,0), var(--lr-white)); }
.lr-desc-toggle { margin-top: 4px; padding: 10px 0 !important; font-weight: 500; color: var(--lr-primary) !important; }
.lr-soon { margin-top: 28px; padding: 28px; border-radius: 16px; background: var(--lr-ivory); border: 1px solid var(--lr-line-card); }
.lr-soon h3 { margin: 0 0 6px; font: 500 24px/1.2 var(--lr-font-display); color: var(--lr-ink); }
.lr-soon p { margin: 0 0 16px; color: var(--lr-gray-500); }
.lr-summary { position: sticky; top: calc(var(--lr-sticky-top) + 88px); align-self: start; padding: 24px; border: 1px solid var(--lr-line-card); border-radius: 16px; box-shadow: 0 16px 40px -20px rgba(16, 25, 40, .2); display: flex; flex-direction: column; gap: 6px; }
.lr-summary .lr-btn { width: 100%; margin-top: 12px; }
.lr-summary .lr-btn + .lr-btn { margin-top: 4px; }
.lr-summary hr { width: 100%; border: 0; border-top: 1px solid var(--lr-line-card); margin: 14px 0 6px; }
.lr-summary ul { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--lr-gray-500); }
.lr-summary li { display: flex; gap: 8px; }
.lr-summary li .lr-icon { color: var(--lr-primary); }
.lr-rooms { padding-top: 40px; }
.lr-rooms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.lr-rooms-head .lr-section-title { margin: 0; }
.lr-stay-dates { display: flex; align-items: center; border: 2px solid var(--lr-line); border-radius: 9999px; height: 64px; padding: 0 8px 0 0; }
.lr-stay-dates .lr-fld { padding: 0 20px; gap: 2px; }
.lr-stay-dates .lr-fld + .lr-fld { border-left: 1px solid var(--lr-line); }
/* Ô hiển thị của flatpickr (class form-control input) cũng phải bỏ khung của .lr-fld input */
.lr .lr-stay-dates .lr-fld input { border: 0; padding: 0; border-radius: 0; background: transparent; height: auto; min-height: 0; font-size: 14px; }
.lr-nights { padding: 8px 16px; border-radius: 9999px; background: var(--lr-ivory); font-size: 13px; font-weight: 500; white-space: nowrap; }
.lr-room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lr-room-card { display: flex; flex-direction: column; border: 1px solid var(--lr-line-card); border-radius: 16px; overflow: hidden; background: var(--lr-white); transition: box-shadow var(--lr-ease); }
.lr-room-card:hover { box-shadow: 0 16px 40px -18px rgba(16, 25, 40, .22); }
.lr-slider { position: relative; height: 220px; background: #eee; }
.lr-slider-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lr-slider-track::-webkit-scrollbar { display: none; }
.lr-slider-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; cursor: zoom-in; }
.lr-slider-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.lr-slider-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: all var(--lr-ease); }
.lr-slider-dots span.on { width: 18px; border-radius: 3px; background: var(--lr-white); }
.lr-left-tag { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 9999px; background: var(--lr-white); color: var(--lr-primary-dark); font-size: 12px; font-weight: 600; }
.lr-left-tag.is-out { background: var(--lr-black); color: var(--lr-white); }
.lr-room-card .lr-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.lr-room-card h3 { margin: 0; font: 500 20px/1.25 var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
.lr-room-meta { display: flex; gap: 16px; font-size: 13px; color: var(--lr-gray-500); }
.lr-room-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lr-room-meta .lr-icon { color: var(--lr-ink); }
.lr-room-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; color: var(--lr-gray-500); }
.lr-room-amen li { display: flex; gap: 6px; align-items: flex-start; }
.lr-room-amen .lr-icon { width: 14px; height: 14px; margin-top: 3px; color: var(--lr-primary); }
.lr-room-card .lr-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lr-line-card); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lr-foot-price, .lr-price-list { display: flex; flex-direction: column; gap: 2px; }
.lr-room-card .lr-foot .lr-price { font-size: 20px; }
.lr-room-card .lr-foot .lr-price small { display: block; margin-top: 2px; }
.lr-map { display: grid; place-items: center; width: 100%; height: 420px; border-radius: 20px; overflow: hidden; background: var(--lr-ivory); }
.lr-map iframe { width: 100%; height: 100%; border: 0; }
.lr-map .lr-btn { gap: 6px; }
.lr-nearby-title { margin: 32px 0 12px; font: 500 20px/1.3 var(--lr-font-display); color: var(--lr-ink); }
.lr-nearby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: 40px; }
.lr-nearby li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 0; border-bottom: 1px dashed var(--lr-line); font-size: 15px; line-height: 22px; color: var(--lr-ink); }
.lr-nearby .lr-icon { flex: none; width: 18px; height: 18px; color: var(--lr-primary); }
.lr-nearby span { flex: 1; }
.lr-nearby strong { flex: none; font-weight: 600; white-space: nowrap; }
.lr-loc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

/* ---------- Hộp thoại phòng, form đặt phòng, xem ảnh ---------- */
dialog.lr-modal { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
dialog.lr-modal::backdrop { background: rgba(0,0,0,.55); }
dialog.lr-modal.lr-modal-sm { width: min(640px, calc(100vw - 32px)); }
.lr-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50% !important; background: var(--lr-white) !important; display: grid !important; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; }
.lr-modal-close svg { width: 20px; height: 20px; }
/* Cuộn trong popup không kéo theo trang phía sau; chừa sẵn chỗ thanh cuộn để nội dung không bị đẩy ngang khi thanh cuộn hiện/ẩn */
.lr-modal-body { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.lr-room-modal { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 560px; }
.lr-rm-media { background: #111; display: flex; flex-direction: column; }
.lr-rm-stage { flex: 1; position: relative; display: flex; }
.lr-rm-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 44px; height: 44px; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; color: var(--lr-ink) !important; display: grid !important; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.2) !important; transition: background var(--lr-ease); }
.lr-rm-nav:hover { background: var(--lr-white) !important; }
.lr-rm-nav.prev { left: 14px; } .lr-rm-nav.next { right: 14px; }
.lr-rm-nav .lr-icon { width: 20px; height: 20px; }
.lr-rm-main { flex: 1; min-height: 320px; position: relative; display: block; width: 100%; cursor: zoom-in; }
.lr-rm-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-rm-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.lr-rm-thumbs button { flex: 0 0 72px; height: 52px; border-radius: 8px !important; overflow: hidden; opacity: .55; transition: opacity var(--lr-ease); }
.lr-rm-thumbs button[aria-current="true"], .lr-rm-thumbs button:hover { opacity: 1; }
.lr-rm-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lr-rm-panel { padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.lr-rm-panel h2 { margin: 0; font: 500 26px/1.2 var(--lr-font-display); color: var(--lr-ink); padding-right: 40px; }
.lr-rm-panel .lr-eyebrow { margin-bottom: 10px; }
.lr-rm-desc { font-size: 14px; line-height: 22px; color: var(--lr-gray-500); }
.lr-branch-name { font-size: 13px; color: var(--lr-gray-600); }
.lr-quote { margin-top: auto; padding: 16px; border-radius: 14px; background: var(--lr-ivory); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; position: relative; }
.lr-quote .full { grid-column: 1 / -1; }
.lr-quote [data-left] { min-height: 1lh; } /* giữ chỗ dòng "Còn N phòng" (tải sau) để popup không giật cao lên */
.lr-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed var(--lr-gray-300); font-size: 14px; }
.lr-total strong { font-size: 18px; color: var(--lr-ink); }
.lr-rm-form .lr-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.lr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lr-book-done { align-items: center; text-align: center; padding: 48px 32px 32px; max-width: 560px; margin: 0 auto; }
.lr-book-done h2 { padding: 0; }
.lr-book-done p { margin: 0; font-size: 15px; line-height: 24px; color: var(--lr-gray-500); }
.lr-done-icon { width: 64px; height: 64px; border-radius: 50%; background: #EEF8F0; color: #1E6B34; display: grid; place-items: center; }
.lr-done-icon .lr-icon { width: 30px; height: 30px; stroke-width: 2.5; }
.lr-done-summary { width: 100%; margin: 8px 0 4px; padding: 16px 20px; border-radius: 14px; background: var(--lr-ivory); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.lr-done-summary div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.lr-done-summary dt { color: var(--lr-gray-600); }
.lr-done-summary dd { margin: 0; font-weight: 500; color: var(--lr-ink); text-align: right; }
.lr-book-done .lr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
dialog.lr-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: rgba(0,0,0,.94); color: var(--lr-white); }
dialog.lr-lightbox::backdrop { background: rgba(0,0,0,.6); }
/* Flex (không dùng grid) để max-height 100% của ảnh tính theo khung có chiều cao xác định */
.lr-lb-img { position: absolute; inset: 64px 80px 80px; display: flex; align-items: center; justify-content: center; }
.lr .lr-lb-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lr-lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50% !important; background: rgba(255,255,255,.12) !important; color: var(--lr-white) !important; display: grid !important; place-items: center; }
.lr-lb-nav:hover { background: rgba(255,255,255,.25) !important; }
.lr-lb-nav.prev { left: 16px; } .lr-lb-nav.next { right: 16px; }
.lr-lb-nav .lr-icon { width: 22px; height: 22px; }
.lr-lb-count { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-size: 14px; color: rgba(255,255,255,.8); }
dialog.lr-lightbox .lr-modal-close { background: rgba(255,255,255,.12) !important; color: var(--lr-white); box-shadow: none !important; }

/* ---------- Form ---------- */
.lr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lr-form-grid .full { grid-column: 1 / -1; }
.lr-fld { display: flex; flex-direction: column; gap: 6px; position: relative; }
.lr-fld label { font-size: 12px; font-weight: 500; color: var(--lr-primary); }
.lr .lr-fld input, .lr .lr-fld select, .lr .lr-fld textarea { width: 100%; min-width: 0; border: 1px solid var(--lr-line); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 400; color: var(--lr-ink); background-color: var(--lr-white); transition: border-color var(--lr-ease); }
.lr .lr-fld input:focus, .lr .lr-fld select:focus, .lr .lr-fld textarea:focus { outline: none; border-color: var(--lr-primary); }
.lr .lr-fld input[readonly]:not(.flatpickr-input):not(.form-control) { background: var(--lr-ivory); }
.lr .lr-fld input:user-invalid { border-color: #D93025; }
.lr-form-msg { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 20px; }
.lr-form-msg.err { background: #FDECEC; color: #B3261E; }

/* ---------- Lịch chọn ngày (flatpickr) ---------- */
.flatpickr-input[readonly] { cursor: pointer; }
.lr .flatpickr-wrapper { display: block; width: 100%; }
.flatpickr-calendar { font-family: var(--lr-font-body); border-radius: 16px; box-shadow: 0 0 0 1px var(--lr-line), 0 24px 56px -16px rgba(16, 25, 40, .28); overflow: hidden; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-calendar.static { top: calc(100% + 8px); z-index: 5; }
.flatpickr-calendar.static.is-above { top: auto; bottom: calc(100% + 8px); }
.flatpickr-calendar.static.is-right { left: auto; right: 0; }
.flatpickr-months { padding-bottom: 4px; }
.flatpickr-months .flatpickr-month { height: 44px; color: var(--lr-ink); }
.flatpickr-current-month { font-size: 15px; font-weight: 600; padding-top: 12px; }
.flatpickr-current-month input.cur-year { font-weight: 600; box-shadow: none; height: auto; min-height: 0; padding: 0 0 0 .5ch !important; margin: 0; border: 0; background: transparent; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: 8px; padding: 10px 14px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--lr-primary); }
span.flatpickr-weekday { font-size: 12px; font-weight: 600; color: var(--lr-gray-600); }
.flatpickr-day { border-radius: 10px; color: var(--lr-ink); font-weight: 400; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--lr-ivory); border-color: var(--lr-line); }
.flatpickr-day.today { border-color: var(--lr-primary-light); }
.flatpickr-day.inRange, .flatpickr-day.inRange:hover { background: #FDEBE3; border-color: #FDEBE3; box-shadow: none; border-radius: 0; color: var(--lr-ink); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.stay-start, .flatpickr-day.stay-end { background: var(--lr-primary); border-color: var(--lr-primary); color: var(--lr-white); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--lr-gray-300); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #B5B5B5; }

/* ---------- Về chúng tôi ---------- */
.lr-about-hero { position: relative; display: flex; min-height: var(--lr-about-h, 640px); color: var(--lr-white); overflow: hidden; isolation: isolate; background: #1b1410; }
.lr-about-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lr-about-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.7) 100%); }
.lr-about-hero .lr-container { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 140px; padding-bottom: 72px; } /* chiều cao là tối thiểu: tiêu đề dài thì banner cao thêm, không chui dưới header */
.lr-about-hero .lr-eyebrow { color: rgba(255,255,255,.8); }
.lr-about-hero h1 { margin: 0; max-width: 820px; font: italic 400 clamp(52px, 7vw, 96px)/0.98 var(--lr-font-script); color: var(--lr-white); }
.lr-about-hero p:not(.lr-eyebrow) { margin: 20px 0 0; max-width: 560px; font-size: 18px; line-height: 28px; color: rgba(255,255,255,.85); }
.lr-letter { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.lr-letter blockquote { position: sticky; top: calc(var(--lr-sticky-top) + 32px); }
.lr-letter blockquote p { margin: 0 0 16px; font: italic 400 clamp(36px, 4vw, 56px)/1.05 var(--lr-font-script); color: var(--lr-ink); }
.lr-letter blockquote p span { color: var(--lr-primary); }
.lr-letter blockquote footer { font-size: 14px; color: var(--lr-gray-600); }
.lr-letter .lr-text { font-size: 17px; line-height: 30px; color: var(--lr-gray-500); }
.lr-letter .lr-text p { margin: 0 0 18px; }
.lr-letter .lr-text strong { color: var(--lr-ink); font-weight: 500; }
/* ---------- Tin tức / cẩm nang: danh sách, thẻ bài, bài viết ---------- */
.lr-blog { padding-bottom: 88px; }
.lr-blog-head { padding: 16px 0 28px; }
.lr-blog-head h1 { font-size: 44px; line-height: 1.2; margin: 0; }
.lr-blog-head .lr-lead p { margin: 0; }
.lr-blog-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 28px; }
.lr-blog-cats a { flex: none; padding: 8px 18px; border: 1px solid var(--lr-line); border-radius: 9999px; font-size: 14px; color: var(--lr-gray-500); transition: border-color var(--lr-ease), color var(--lr-ease); }
.lr-blog-cats a:hover { border-color: var(--lr-ink); color: var(--lr-ink); }
.lr-blog-cats a[aria-current] { background: var(--lr-ink); border-color: var(--lr-ink); color: var(--lr-white); }
.lr-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.lr-post-card { display: flex; flex-direction: column; }
.lr-post-media { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--lr-ivory); }
.lr .lr-post-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--lr-zoom); }
.lr-post-card:hover .lr-post-media img { transform: scale(1.08); }
.lr-post-body { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; flex: 1; }
.lr-post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; color: var(--lr-gray-600); }
.lr-post-meta a { color: var(--lr-primary); font-weight: 500; }
.lr-post-body h2 { margin: 0; font: 500 21px/1.3 var(--lr-font-display); letter-spacing: -0.01em; }
.lr-post-body h2 a { color: var(--lr-ink); }
.lr-post-body h2 a:hover { color: var(--lr-primary); }
.lr-post-body > p:not(.lr-post-meta) { margin: 0; font-size: 15px; line-height: 24px; color: var(--lr-gray-500); }
.lr-post-body .lr-arrow-link { margin-top: auto; padding-top: 4px; }
.lr-blog-pages { display: flex; justify-content: center; gap: 8px; padding-top: 48px; }
.lr-blog-pages .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--lr-line); border-radius: 9999px; font-size: 14px; color: var(--lr-ink); }
.lr-blog-pages .page-numbers.current { background: var(--lr-ink); border-color: var(--lr-ink); color: var(--lr-white); }
.lr-blog-pages .lr-icon { width: 16px; height: 16px; }
.lr-article { max-width: 820px; margin: 0 auto; padding: 8px 0 56px; }
.lr-article-head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.lr-article-head h1 { margin: 0; font-size: 44px; line-height: 1.15; }
.lr-article-head .lr-lead { max-width: none; margin: 0; font-size: 18px; line-height: 29px; }
.lr-article-cover { margin: 0 0 40px; border-radius: 20px; overflow: hidden; }
.lr-article-body { font-size: 17px; line-height: 30px; color: #333; }
.lr-article-body > * + * { margin-top: 20px; }
.lr-article-body h2 { margin-top: 44px; font: 500 30px/1.25 var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
.lr-article-body h3 { margin-top: 32px; font: 500 23px/1.3 var(--lr-font-display); color: var(--lr-ink); }
.lr-article-body a { color: var(--lr-primary); text-decoration: underline; text-underline-offset: 3px; }
.lr-article-body img { border-radius: 14px; height: auto; }
.lr-article-body figcaption { margin-top: 8px; font-size: 14px; color: var(--lr-gray-600); text-align: center; }
.lr-article-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--lr-primary); font-size: 19px; font-style: italic; color: var(--lr-ink); }
.lr-article-body ul, .lr-article-body ol { padding-left: 22px; }
.lr-article-body li { margin: 0 0 8px; }
.lr-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.lr-article-tags a { padding: 6px 14px; border-radius: 9999px; background: var(--lr-ivory); font-size: 14px; color: var(--lr-gray-500); }
.lr-related { padding: 56px 0 88px; border-top: 1px solid var(--lr-line); }
.lr-related h2 { margin: 0 0 32px; font-size: 32px; line-height: 1.2; }
@media (max-width: 1100px) { .lr-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .lr-post-grid { grid-template-columns: minmax(0, 1fr); }
  .lr-blog-head h1, .lr-article-head h1 { font-size: 30px; }
  .lr-article-body { font-size: 16px; line-height: 28px; }
  .lr-article-body h2 { font-size: 24px; }
  .lr-related h2 { font-size: 26px; }
}

/* ---------- Hệ thống cơ sở (trang Liên hệ): thẻ nhỏ cùng kiểu thẻ cam kết ---------- */
.lr-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.lr-contact-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: 16px; background: var(--lr-ivory); border: 1px solid var(--lr-line-card); transition: background var(--lr-ease), border-color var(--lr-ease); }
.lr-contact-card h3 a, .lr-contact-card ul, .lr-contact-card li .lr-icon { transition: color var(--lr-ease); }
/* Rê chuột: nền đen như thẻ cam kết */
.lr-contact-card:hover { background: var(--lr-black); border-color: var(--lr-black); }
.lr-contact-card:hover h3 a { color: var(--lr-white); }
.lr-contact-card:hover ul { color: rgba(255,255,255,.75); }
.lr-contact-card:hover li .lr-icon { color: var(--lr-primary-light); }
.lr-contact-card:hover li a:hover, .lr-contact-card:hover h3 a:hover { color: var(--lr-primary-light); }
.lr-contact-card h3 { margin: 0; font: 500 18px/1.3 var(--lr-font-display); letter-spacing: -0.01em; }
.lr-contact-card h3 a { color: var(--lr-ink); }
.lr-contact-card ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 21px; color: var(--lr-gray-500); }
.lr-contact-card li { display: flex; gap: 10px; margin: 0; }
.lr-contact-card li .lr-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--lr-primary); }
.lr-contact-card li a { color: inherit; word-break: break-word; }
.lr-contact-card li a:hover, .lr-contact-card h3 a:hover { color: var(--lr-primary); }

/* ---------- Nội dung + ảnh dính (trang Doanh nghiệp: Các dịch vụ chính) ---------- */
.lr-tm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: start; }
.lr-tm.is-img-left { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.lr-tm.is-img-left .lr-tm-media { order: -1; }
.lr-tm.no-img { grid-template-columns: minmax(0, 820px); }
.lr-tm-media { margin: 0; border-radius: 24px; overflow: hidden; background: var(--lr-ivory); }
.lr-tm.is-sticky .lr-tm-media { position: sticky; top: calc(var(--lr-sticky-top) + 24px); }
.lr .lr-tm-media img { width: 100%; height: min(640px, calc(100vh - var(--lr-sticky-top) - 48px)); object-fit: cover; }
.lr-tm .lr-section-title { margin-bottom: 32px; }
/* Mục con đánh số 01, 02… cùng kiểu số của thẻ cam kết; danh sách có dấu tick trên nền ngà */
.lr-rich { counter-reset: lr-rich; font-size: 16px; line-height: 27px; color: var(--lr-gray-500); }
.lr-rich > * + * { margin-top: 16px; }
.lr-rich h3 { display: flex; align-items: baseline; gap: 14px; margin: 48px 0 0; font: 500 26px/1.25 var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
.lr-rich h3:first-child { margin-top: 0; }
.lr-rich h3::before { counter-increment: lr-rich; content: counter(lr-rich, decimal-leading-zero); flex: none; font: italic 500 40px/1 var(--lr-font-script); color: var(--lr-primary); }
.lr-rich strong, .lr-rich b { font-weight: 600; color: var(--lr-ink); }
.lr-rich ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 20px 24px; list-style: none; border-radius: 16px; background: var(--lr-ivory); }
.lr-rich li { position: relative; margin: 0; padding-left: 30px; color: var(--lr-ink); }
.lr-rich li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; background: var(--lr-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lr-rich .lr-note { padding-left: 16px; border-left: 3px solid var(--lr-primary-light); font-size: 14px; line-height: 23px; }
@media (max-width: 900px) {
  .lr-tm, .lr-tm.is-img-left { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lr-tm-media, .lr-tm.is-img-left .lr-tm-media { order: -1; }
  .lr-tm.is-sticky .lr-tm-media { position: static; }
  .lr .lr-tm-media img { height: 300px; }
  .lr-rich h3 { font-size: 22px; }
  .lr-rich h3::before { font-size: 34px; }
}
.lr-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lr-line); border-bottom: 1px solid var(--lr-line); }
.lr-facts div { padding: 36px 24px; text-align: center; }
.lr-facts div + div { border-left: 1px solid var(--lr-line); }
.lr-facts strong { display: block; font: 500 56px/1 var(--lr-font-display); letter-spacing: -0.03em; color: var(--lr-ink); }
.lr-facts span { display: block; margin-top: 10px; font-size: 14px; color: var(--lr-gray-600); }
.lr-pillars-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.lr-pillars-head .lr-section-title { margin: 0; }
.lr-pillars-head > p { margin: 0; max-width: 460px; font-size: 16px; line-height: 26px; color: var(--lr-gray-500); }
.lr-pillars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.lr-pillar { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border-radius: 20px; background: var(--lr-ivory); border: 1px solid var(--lr-line-card); transition: background var(--lr-ease), border-color var(--lr-ease); }
.lr-pillar h3, .lr-pillar ul { transition: color var(--lr-ease); }
.lr-pillars > .lr-pillar:nth-child(4), .lr-pillars > .lr-pillar:nth-child(5) { grid-column: span 3; }
.lr-pillar .lr-num { font: italic 500 44px/1 var(--lr-font-script); color: var(--lr-primary); }
/* Bản xem trước trong UX Builder: số thứ tự đếm bằng CSS vì builder dựng từng thẻ riêng */
.lr-pillars { counter-reset: lr-pillar; }
.lr-num-auto::before { counter-increment: lr-pillar; content: counter(lr-pillar, decimal-leading-zero); }
.lr-pillar h3 { margin: 0; font: 500 22px/1.25 var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
.lr-pillar ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 22px; color: var(--lr-gray-500); }
.lr-pillar li { display: flex; gap: 10px; }
.lr-pillar li .lr-icon { margin-top: 3px; color: var(--lr-primary); }
/* Rê chuột vào thẻ nào thì thẻ đó chuyển nền đen */
.lr-pillar:hover { background: var(--lr-black); border-color: var(--lr-black); }
.lr-pillar:hover h3 { color: var(--lr-white); }
.lr-pillar:hover ul { color: rgba(255,255,255,.75); }
.lr-units-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.lr-units-row a { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px; border: 1px solid var(--lr-line); border-radius: 16px; text-align: center; transition: border-color var(--lr-ease), box-shadow var(--lr-ease); }
.lr-units-row a:hover { border-color: var(--lr-primary-light); box-shadow: 0 12px 28px -16px rgba(16, 25, 40, .25); }
.lr-units-row .lr-tile { width: 130px; height: 76px; overflow: hidden; }
.lr-units-row strong { font-size: 15px; font-weight: 600; color: var(--lr-ink); }
.lr-units-row small { font-size: 13px; color: var(--lr-gray-600); }
/* Dải đơn vị chạy ngang vô hạn (trang Về chúng tôi): mờ hai mép, dừng khi rê chuột hoặc focus */
.lr-marquee { width: min(calc(100% - 48px), calc(var(--lr-container) - 48px)); margin: 0 auto; padding: 8px 0 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); }
.lr-marquee-track { display: flex; width: max-content; animation: lr-marquee var(--lr-marquee-duration, 40s) linear infinite; will-change: transform; }
.lr-marquee:hover .lr-marquee-track, .lr-marquee:focus-within .lr-marquee-track { animation-play-state: paused; }
/* flex: none: hai hàng (bản chính + bản sao) không bị co lại rồi chồng lên nhau thành các ô thừa */
.lr-marquee .lr-units-row { display: flex; flex: none; gap: 16px; padding-right: 16px; }
.lr-marquee .lr-units-row a { flex: 0 0 240px; background: var(--lr-white); }
@keyframes lr-marquee { to { transform: translate3d(-50%, 0, 0); } }
.lr-cta { position: relative; overflow: hidden; border-radius: 24px; color: var(--lr-white); background: var(--lr-black); isolation: isolate; }
.lr-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; z-index: -1; }
.lr-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 100%); }
.lr-cta .lr-inner { padding: 72px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lr-cta h2 { margin: 0 0 8px; font: italic 400 clamp(36px, 4vw, 56px)/1.05 var(--lr-font-script); color: var(--lr-white); }
.lr-cta p { margin: 0; color: rgba(255,255,255,.8); font-size: 16px; }
.lr-cta .lr-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.lr-site-footer { background: var(--lr-black); color: var(--lr-white); padding: 70px 64px 40px; }
.lr-footer-inner { max-width: 1312px; margin: 0 auto; }
.lr-contact span { display: block; font-size: 15px; line-height: 22px; color: rgba(255,255,255,.85); }
.lr-socials svg { width: 18px; height: 18px; }
.lr-site-footer .lr-row { display: flex; justify-content: space-between; gap: 32px; }
.lr-site-footer .lr-col { flex: 1; max-width: 428px; display: flex; flex-direction: column; gap: 16px; }
.lr-f-title { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.lr-f-text { margin: 0; font-size: 16px; line-height: 24px; }
.lr-f-small { font-size: 14px; line-height: 22px; }
.lr-f-btn { align-self: flex-start; color: var(--lr-primary-light) !important; border: 1px solid var(--lr-primary-light); border-radius: 9999px; padding: 8px 16px; font-weight: 500; transition: all var(--lr-ease); }
.lr-f-btn:hover { background: var(--lr-primary-light); color: var(--lr-white) !important; }
.lr-contact { display: flex; gap: 16px; align-items: flex-start; }
.lr-contact svg { width: 32px; height: 32px; flex: none; }
.lr-contact small { display: block; font-size: 14px; font-weight: 500; }
.lr-contact a { font-size: 20px; line-height: 28px; font-weight: 600; transition: color var(--lr-ease); }
.lr-contact a:hover { color: var(--lr-primary-light); }
.lr-socials { display: flex; gap: 20px; }
.lr-socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transition: background var(--lr-ease), border-color var(--lr-ease); }
.lr-socials a:hover { background: var(--lr-primary); border-color: var(--lr-primary); }
.lr-site-footer hr { border: 0; border-top: 1px solid rgba(255,255,255,.2); margin: 40px 0 32px; }
.lr-f-head { color: var(--lr-primary-light); font-size: 16px; line-height: 24px; font-weight: 600; text-transform: uppercase; margin: 0; }
.lr-f-links { margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lr-f-links a { font-weight: 400; }
.lr-f-links a:hover { color: var(--lr-primary-light); }
.lr-logo-white { filter: brightness(0) invert(1); }
.lr-f-logo { height: 48px; width: auto; align-self: flex-start; }
.lr-legal { font-size: 12px; line-height: 18px; margin-top: 40px; }
/* Footer block của Flatsome có padding riêng, bỏ đi để footer 22Land tràn viền; footer 22Land đã có dòng bản quyền nên ẩn absolute footer */
.footer-wrapper .lr-site-footer { margin: 0; }
.footer-wrapper:has(.lr-site-footer) .absolute-footer { display: none; }

/* ---------- Trang nội dung: chính sách, hỏi đáp ---------- */
.lr-doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; }
.lr-doc.is-single { grid-template-columns: minmax(0, 820px); justify-content: center; }
.lr-doc-nav { position: sticky; top: calc(var(--lr-sticky-top) + 32px); padding: 24px 16px; border: 1px solid var(--lr-line-card); border-radius: 20px; background: var(--lr-ivory); }
.lr-doc-nav .lr-eyebrow { padding: 0 12px; margin-bottom: 12px; }
.lr-doc-links { display: flex; flex-direction: column; gap: 2px; }
.lr-doc-links a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--lr-gray-500); transition: background var(--lr-ease), color var(--lr-ease); }
.lr-doc-links a:hover { background: var(--lr-white); color: var(--lr-ink); }
.lr-doc-links .current-menu-item > a { background: var(--lr-white); color: var(--lr-primary); font-weight: 500; box-shadow: 0 0 0 1px var(--lr-line); }
.lr-prose { max-width: 780px; font-size: 16px; line-height: 28px; color: var(--lr-gray-500); }
.lr-prose > :first-child { margin-top: 0; }
.lr-prose :where(h2) { margin: 44px 0 14px; font: 500 26px/1.3 var(--lr-font-display); letter-spacing: -0.01em; color: var(--lr-ink); }
.lr-prose :where(h3) { margin: 28px 0 10px; font: 500 19px/1.35 var(--lr-font-display); color: var(--lr-ink); }
.lr-prose :where(p) { margin: 0 0 16px; }
.lr-prose :where(ul, ol) { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.lr-prose :where(ol) { list-style: decimal; }
.lr-prose :where(li) { margin: 0 0 8px; padding-left: 4px; }
.lr-prose :where(li)::marker { color: var(--lr-primary); }
.lr-prose :where(strong) { font-weight: 500; color: var(--lr-ink); }
.lr-prose :where(a) { color: var(--lr-primary); text-decoration: underline; text-underline-offset: 3px; }
.lr-doc-updated { margin: 0 0 28px !important; padding-bottom: 20px; border-bottom: 1px solid var(--lr-line); font-size: 13px; color: var(--lr-gray-600); }
.lr-faq + .lr-faq { margin-top: 48px; }
.lr-faq > h2 { margin-bottom: 8px; }
.lr-faq-item { border-bottom: 1px solid var(--lr-line); }
.lr-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font: 500 17px/26px var(--lr-font-display); color: var(--lr-ink); transition: color var(--lr-ease); }
.lr-faq-item summary::-webkit-details-marker { display: none; }
.lr-faq-item summary:hover { color: var(--lr-primary); }
.lr-faq-item summary i { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--lr-line); border-radius: 50%; transition: transform var(--lr-ease), background var(--lr-ease); }
.lr-faq-item summary i::before, .lr-faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.lr-faq-item summary i::after { rotate: 90deg; transition: rotate var(--lr-ease); }
.lr-faq-item[open] summary i { background: var(--lr-ink); border-color: var(--lr-ink); color: var(--lr-white); }
.lr-faq-item[open] summary i::after { rotate: 0deg; }
.lr-faq-a { padding: 0 48px 20px 0; font-size: 15px; line-height: 26px; }
.lr-faq-a :where(p:last-child, ul:last-child) { margin-bottom: 0; }

/* ---------- Tuyển dụng ---------- */
.lr-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lr-job { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--lr-line-card); border-radius: 20px; background: var(--lr-white); transition: border-color var(--lr-ease), box-shadow var(--lr-ease); }
.lr-job:hover { border-color: var(--lr-primary-light); box-shadow: 0 16px 36px -22px rgba(16, 25, 40, .3); }
.lr-job h3 { margin: 0; font: 500 22px/1.25 var(--lr-font-display); color: var(--lr-ink); }
.lr-job-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lr-job-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lr-gray-600); }
.lr-job-meta .lr-icon { width: 15px; height: 15px; color: var(--lr-primary); }
.lr-job > p { margin: 0; font-size: 14px; line-height: 22px; color: var(--lr-gray-500); }
.lr-job-points { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 22px; color: var(--lr-gray-500); }
.lr-job-points li { display: flex; gap: 10px; }
.lr-job-points .lr-icon { margin-top: 3px; color: var(--lr-primary); }
.lr-job .lr-btn { align-self: flex-start; margin-top: auto; }

/* ---------- Form liên hệ ---------- */
.lr-lead-sec { background: var(--lr-ivory); }
.lr-lead-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.lr-lead-intro .lr-section-title { margin: 0; }
.lr-lead-info { margin-top: 36px; display: flex; flex-direction: column; gap: 20px; }
.lr-lead-info li { display: flex; align-items: center; gap: 14px; }
.lr-lead-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--lr-white); border: 1px solid var(--lr-line-card); color: var(--lr-primary); display: grid; place-items: center; }
.lr-lead-ic .lr-icon { width: 20px; height: 20px; }
.lr-lead-info small { display: block; font-size: 13px; color: var(--lr-gray-600); }
.lr-lead-info div { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--lr-ink); }
.lr-lead-info a:hover { color: var(--lr-primary); }
.lr-lead-form { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 1px solid var(--lr-line-card); border-radius: 24px; background: var(--lr-white); box-shadow: 0 24px 60px -36px rgba(16, 25, 40, .3); }
.lr-lead-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lr-lead-note { flex: 1 1 220px; margin: 0; font-size: 12px; line-height: 18px; color: var(--lr-gray-600); }

/* Trang 404 và kết quả tìm kiếm */
.lr .lr-site-search { width: min(560px, 100%); padding-right: 5px; margin: 0; }
.lr .lr-site-search input { min-width: 0; height: 100%; box-shadow: none; }
.lr-site-search .lr-btn { flex: none; height: 40px; }
.lr-status { padding-top: 72px; padding-bottom: 96px; }
.lr-status-head { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lr-status-code { margin: 0 0 12px; font: 500 120px/1 var(--lr-font-display); letter-spacing: -0.04em; color: var(--lr-primary); }
.lr-status h1 { font-size: 40px; line-height: 1.25; margin: 0; text-wrap: balance; }
.lr-status .lr-lead { margin: 16px auto 28px; }
.lr-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.lr-suggest { margin-top: 72px; }
.lr-suggest h2 { font-size: 28px; line-height: 1.3; margin: 0 0 24px; }
.lr-site-results { padding-bottom: 96px; }
.lr-site-results .lr-empty { padding: 32px 0 0; }
.lr-found { margin-top: 32px; }
.lr-found-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--lr-ink); }
.lr-found-title span { min-width: 28px; padding: 0 8px; border-radius: 9999px; background: var(--lr-ivory); font-size: 13px; line-height: 24px; text-align: center; color: var(--lr-gray-600); }
.lr-found-more { margin: 20px 0 0; text-align: center; }
.lr-found-pages { margin: 0; padding: 0; border-top: 1px solid var(--lr-line); }
.lr-found-pages a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 18px 4px; border-bottom: 1px solid var(--lr-line); }
.lr-found-pages strong { font-size: 17px; font-weight: 500; color: var(--lr-ink); transition: color var(--lr-ease); }
.lr-found-pages span { grid-column: 1; font-size: 14px; line-height: 22px; color: var(--lr-gray-600); }
.lr-found-pages .lr-icon { grid-column: 2; grid-row: 1 / span 2; color: var(--lr-primary); transition: transform var(--lr-ease); }
.lr-found-pages a:hover strong { color: var(--lr-primary); }
.lr-found-pages a:hover .lr-icon { transform: translateX(4px); }
.lr-lead-form .lr-book-done { padding: 24px 8px; }

/* Cam kết / lợi ích: 3–4 thẻ thì chia đều một hàng; bố cục 3 + 2 chỉ dành cho đúng 5 thẻ */
.lr-pillars:not(:has(> :nth-child(5))) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lr-pillars:not(:has(> :nth-child(5))) > .lr-pillar { grid-column: auto; }

/* ---------- Nút gọi + chat nổi ---------- */
.lr-fabs { position: fixed; right: 26px; bottom: 48px; z-index: 60; display: flex; flex-direction: column; gap: 14px; }
.lr-chat-fab { width: 60px; height: 60px; border-radius: 50%; background: var(--lr-primary); color: var(--lr-white) !important; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(226, 77, 20, .35); transition: transform var(--lr-ease); }
.lr-chat-fab:hover { transform: scale(1.06); }
.lr-chat-fab svg { width: 28px; height: 28px; }
.lr-call-fab svg { width: 24px; height: 24px; }

/* ---------- Header Flatsome theo thiết kế 22Land ---------- */
/* Logo chuyển trắng khi header trong suốt nằm trên ảnh (Flatsome hiện .header-logo-dark ở trạng thái này) */
.header-logo-dark { filter: brightness(0) invert(1); }
.header-main .header-nav-main > li > a { font: 500 14px/24px var(--lr-font-body); text-transform: none; letter-spacing: normal; }
/* Menu chính giãn đều (mặc định Flatsome 7px mỗi bên quá sát); nút menu ☰ tách xa hơn một chút */
.header-main .header-nav-main > li { margin: 0 16px; }
.header-main .header-nav-main > li.nav-icon { margin-left: 24px; }
.header-main .header-nav-main > li:last-child { margin-right: 0; }
@media (max-width: 1100px) { .header-main .header-nav-main > li { margin: 0 10px; } }
.header-main .header-nav-main > li > a:hover, .header-main .header-nav-main > li.active > a { color: var(--lr-primary); }
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content { background: var(--lr-black); }
.off-canvas .nav-vertical > li > a { font: 500 26px/1.2 var(--lr-font-display); color: var(--lr-white); text-transform: none; letter-spacing: -0.01em; }
.off-canvas .nav-vertical > li > a:hover { color: var(--lr-primary-light); }
/* Mục phụ trong menu ☰ (class lr-menu-sub đặt ở Giao diện → Menu): chữ nhỏ, gom thành nhóm dưới các mục chính */
.off-canvas .nav-vertical > li.lr-menu-sub { border-top: 0 !important; }
.off-canvas .nav-vertical > li:not(.lr-menu-sub) + li.lr-menu-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15) !important; }
.off-canvas .nav-vertical > li.lr-menu-sub > a { font: 400 17px/1.3 var(--lr-font-body); padding-top: 9px; padding-bottom: 9px; color: rgba(255, 255, 255, .75); }
/* Máy tính (từ 850px, mốc Flatsome hiện menu header): mục chính và nút VI/EN đã có trên header nên ☰ chỉ còn nhóm phụ */
@media (min-width: 850px) {
  .off-canvas .nav-vertical > li:not(.lr-menu-sub) { display: none; }
  .off-canvas .nav-vertical > li.lr-menu-sub, .off-canvas .nav-vertical > li:not(.lr-menu-sub) + li.lr-menu-sub { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
  .off-canvas .nav-vertical > li.lr-menu-sub > a { font: 500 22px/1.25 var(--lr-font-display); padding-top: 14px; padding-bottom: 14px; color: var(--lr-white); }
}
/* Chuyển ngôn ngữ VI / EN: nút do GTranslate điền vào .lr-lang */
.lr-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(128, 128, 128, .35); border-radius: 9999px; vertical-align: middle; }
.lr-lang a { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 9999px; font: 600 12px/1 var(--lr-font-body) !important; letter-spacing: .04em; color: var(--lr-gray-500) !important; text-decoration: none !important; transition: background var(--lr-ease), color var(--lr-ease); }
.lr-lang a:hover { color: var(--lr-primary) !important; }
.lr-lang a.gt-current-lang { background: var(--lr-primary); color: var(--lr-white) !important; }
.lr-lang:empty { width: 76px; height: 34px; } /* giữ chỗ trước khi script điền nút để menu không nhảy */
.header-main .header-nav-main > li.lr-lang-item { display: flex; align-items: center; }
.nav-dark .lr-lang a:not(.gt-current-lang), .off-canvas .lr-lang a:not(.gt-current-lang) { color: rgba(255, 255, 255, .8) !important; }
.off-canvas .nav-vertical > li.lr-lang-item { padding: 20px 20px 8px; border: 0; }

@media (max-width: 1100px) {
  .lr-booking-form { max-width: 720px; }
  .lr-field { padding: 10px 16px; }
  .lr-field-loc { width: auto; flex: 1.5; padding-left: 24px; }
  .lr-field label { white-space: nowrap; }
  .lr-booking-submit { margin: 0 10px !important; padding: 10px 20px !important; }
  .lr-feat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 380px 260px 260px; }
  .lr-feat-grid .lr-stay-card:first-child { grid-column: span 2; grid-row: auto; }
  .lr-feat-grid.lr-cards { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .lr-feat-grid.lr-cards .lr-stay-card:first-child { grid-column: auto; }
  .lr-dest-body { grid-template-columns: 1fr; }
  .lr-brand-filter { flex-direction: row; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; }
  .lr-brand-filter button { flex: 0 0 180px; height: 64px; }
  .lr-brand-filter .lr-brand-logo { height: 44px; }
  .lr-brand-filter .lr-btn-outline { display: none; }
  .lr-hotel-grid { grid-template-columns: repeat(2, 1fr); }
  .lr-carousel--contained .lr-carousel-track > * { flex-basis: calc((100% - 24px) / 2); }
  .lr-brand-cats { row-gap: 32px; }
  .lr-branch-row { grid-template-columns: 240px 1fr; }
  .lr-branch-row .lr-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--lr-line-card); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .lr-unit-grid { grid-template-columns: repeat(2, 1fr); }
  .lr-intro { grid-template-columns: 1fr; }
  .lr-summary { position: static; }
  .lr-room-grid { grid-template-columns: repeat(2, 1fr); }
  .lr-mini .lr-price { display: none; }
  .lr-pillars { grid-template-columns: repeat(2, 1fr); }
  .lr-pillar, .lr-pillars > .lr-pillar:nth-child(4), .lr-pillars > .lr-pillar:nth-child(5) { grid-column: auto; }
  .lr-pillars > .lr-pillar:last-child { grid-column: 1 / -1; }
  .lr-pillars:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, 1fr); }
  .lr-pillars:not(:has(> :nth-child(5))) > .lr-pillar:last-child { grid-column: auto; }
  .lr-doc { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .lr-lead-grid { gap: 40px; }
}
@media (max-width: 900px) {
  .lr-field-guest { display: none; }
  .lr-layout { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .lr-filter-toggle { display: inline-flex; justify-self: start; }
  .lr-filters { position: static; display: none; padding: 20px; border: 1px solid var(--lr-line); border-radius: 16px; }
  .lr-filters.is-open { display: flex; }
}
@media (max-width: 767px) {
  .lr-block { padding: 56px 0 48px; }
  .lr-section-title { font-size: 28px; line-height: 36px; }
  .lr-carousel-nav { display: none !important; }
  .lr-form-grid { grid-template-columns: 1fr; }
  .lr-hero { height: var(--lr-hero-h-m, 640px); }
  .lr-booking.is-overlay:not(.is-sticky) { top: 76px; }
  .lr-booking-form { height: 64px; }
  .lr-field-loc { flex: 1; padding-left: 20px; }
  .lr-field { padding-right: 12px; }
  .lr-field-guest, .lr-field-date + .lr-field-date { display: none; }
  .lr-booking-submit { width: 44px; height: 44px; padding: 0 !important; margin: 0 10px !important; justify-content: center; }
  .lr-booking-submit span { display: none; }
  /* Trên banner: thẻ tìm phòng xếp tầng ở cuối banner (vị trí / ngày nhận – trả / nút); khi dính lại thành một hàng gọn */
  .lr-hero-wrap .lr-booking.is-overlay:not(.is-sticky) { top: auto; bottom: 72px; padding: 0 16px; }
  .lr-booking.is-overlay:not(.is-sticky) .lr-booking-form { height: auto; flex-wrap: wrap; padding: 6px; border: 0; border-radius: 20px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); }
  .lr-booking.is-overlay:not(.is-sticky) .lr-field { height: 60px; border-radius: 14px; padding: 8px 14px; }
  .lr-booking.is-overlay:not(.is-sticky) .lr-field-loc { flex: 0 0 100%; }
  .lr-booking.is-overlay:not(.is-sticky) .lr-field-date { flex: 1 1 0; display: flex; }
  .lr-booking.is-overlay:not(.is-sticky) .lr-field-loc::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: var(--lr-line); }
  .lr-booking.is-overlay:not(.is-sticky) .lr-field-loc + .lr-field::before { display: none; }
  .lr-booking.is-overlay:not(.is-sticky) .lr-booking-submit { flex: 0 0 100%; width: auto; height: 48px; margin: 4px 0 0 !important; gap: 8px; }
  .lr-booking.is-overlay:not(.is-sticky) .lr-booking-submit span { display: inline; }
  .lr-loc-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: 65vh; }
  .lr-loc-cities { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--lr-line-card); }
  .lr-loc-cities .lr-loc-head { display: none; }
  .lr-loc-cities button { flex: none; }
  .lr-loc-main { padding: 16px; }
  .lr-loc-hotels { grid-template-columns: minmax(0, 1fr); }
  .lr-hero-cta { top: auto; bottom: 350px; } /* giữa logo và thẻ tìm phòng */
  .lr-dest-head { justify-content: center; }
  .lr-dest-head h2 { width: 100%; text-align: center; font-size: 28px; line-height: 36px; }
  .lr-feat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -24px; padding: 0 24px; scrollbar-width: none; }
  .lr-feat-grid .lr-stay-card { flex: 0 0 82vw; height: 400px; scroll-snap-align: start; }
  .lr-feat-grid .lr-stay-card:first-child h3 { font-size: 24px; }
  .lr-review-card, .lr-carousel-track > :not(.lr-review-card):not(.lr-stay-card) { flex-basis: 85vw; }
  .lr-review-card { padding: 24px; }
  .lr-carousel--contained .lr-carousel-track > * { flex-basis: 100%; }
  .lr-city-tabs button { font-size: 16px; padding: 6px 16px; }
  .lr-district-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 20px; padding: 0 14px; }
  .lr-district-tabs button { flex: none; font-size: 16px; white-space: nowrap; }
  /* Thẻ khách sạn cuộn ngang tràn ra hai mép màn hình như khối Khách sạn nổi bật */
  .lr-hotel-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80vw; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; scroll-padding-inline: 24px; }
  .lr-hotel-card { scroll-snap-align: start; }
  .lr-pager { display: none !important; }
  .lr-brand-box .lr-band { flex-direction: column; text-align: center; gap: 12px; }
  .lr-brand-box .lr-band img { height: 56px; }
  .lr-brand-box .lr-band span { border: 0; padding: 0; font-size: 16px; line-height: 26px; }
  .lr-brand-cats { padding: 24px 12px 32px; }
  .lr-brand-cat { flex-basis: 100%; min-width: 0; }
  .lr-brand-cat .lr-logos { flex-wrap: wrap; gap: 12px; }
  .lr-brand-cat .lr-logos a { width: 120px; height: 64px; }
  .lr-branch-row { grid-template-columns: 1fr; }
  .lr-branch-row .lr-media { min-height: 200px; }
  .lr-branch-row .lr-info, .lr-branch-row .lr-side { padding: 18px; }
  .lr-branch-row .lr-side { flex-wrap: nowrap; gap: 12px; }
  .lr-branch-row .lr-side .lr-btn { flex: none; }
  .lr-units-intro h1, .lr-page-head h1 { font-size: 30px; }
  .lr-unit-grid { grid-template-columns: 1fr; }
  .lr-unit-hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 32px; padding-bottom: 36px; }
  .lr-unit-hero .lr-logo-tile { width: 150px; height: 96px; }
  .lr-unit-hero h1 { font-size: 32px; }
  .lr-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 120px; border-radius: 14px; }
  .lr-gallery button:first-child { grid-column: span 2; grid-row: auto; }
  .lr-gallery button:nth-child(n+4) { display: none; }
  .lr-gallery.n1 { grid-template-rows: 260px; }
  .lr-gallery.n1 button:first-child { grid-column: auto; }
  .lr-mini { display: none; }
  .lr-intro h1 { font-size: 30px; }
  .lr-room-grid { grid-template-columns: 1fr; }
  .lr-stay-dates { width: 100%; }
  .lr-stay-dates .lr-fld { flex: 1; padding: 0 12px; }
  .lr-nights { display: none; }
  .lr-room-modal { grid-template-columns: minmax(0, 1fr); }
  .lr-room-amen { grid-template-columns: minmax(0, 1fr); }
  .lr-rm-main { min-height: 240px; }
  .lr-rm-panel { padding: 24px 20px; }
  .lr-map { height: 300px; }
  .lr-lb-img { inset: 64px 12px 72px; }
  .lr-lb-nav { top: auto; bottom: 16px; translate: none; }
  .lr-about-hero .lr-container { padding-bottom: 48px; }
  .lr-about-hero p:not(.lr-eyebrow) { font-size: 16px; line-height: 26px; }
  .lr-letter { grid-template-columns: 1fr; gap: 28px; }
  .lr-letter blockquote { position: static; }
  .lr-letter .lr-text { font-size: 16px; line-height: 27px; }
  .lr-facts { grid-template-columns: 1fr 1fr; }
  .lr-facts div:nth-child(3) { border-left: 0; }
  .lr-facts div:nth-child(n+3) { border-top: 1px solid var(--lr-line); }
  .lr-facts strong { font-size: 40px; }
  .lr-pillars { grid-template-columns: 1fr; }
  .lr-pillars > .lr-pillar:last-child { grid-column: auto; }
  .lr-pillars:not(:has(> :nth-child(5))) { grid-template-columns: 1fr; }
  .lr-doc, .lr-lead-grid, .lr-jobs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lr-doc-nav { position: static; padding: 0; border: 0; background: none; }
  .lr-doc-nav .lr-eyebrow { display: none; }
  .lr-doc-links { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .lr-doc-links a { white-space: nowrap; border: 1px solid var(--lr-line); border-radius: 9999px; padding: 8px 14px; }
  .lr-prose { font-size: 15px; line-height: 26px; }
  .lr-prose :where(h2) { font-size: 22px; margin-top: 32px; }
  .lr-faq-a { padding-right: 0; }
  .lr-job { padding: 22px; }
  .lr-lead-form { padding: 22px 18px; }
  .lr-lead-foot .lr-btn { width: 100%; justify-content: center; }
  .lr-status { padding-top: 40px; padding-bottom: 64px; }
  .lr-status-code { font-size: 88px; }
  .lr-status h1 { font-size: 28px; }
  .lr-suggest { margin-top: 48px; }
  .lr-suggest h2 { font-size: 24px; }
  .lr-site-results { padding-bottom: 64px; }
  .lr-found-pages a { padding: 16px 0; }
  .lr-cta .lr-inner { padding: 44px 24px; }
  .lr-site-footer { padding: 40px 24px 96px; }
  .lr-site-footer .lr-row { flex-direction: column; }
  /* Hai cột menu đặt cạnh nhau cho footer ngắn lại; cột logo + liên hệ xuống dưới */
  .lr-site-footer hr + .lr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  .lr-site-footer hr + .lr-row > .lr-col:last-child { grid-column: 1 / -1; margin-top: 8px; }
  .lr-site-footer hr { margin: 32px 0 28px; }
  .lr-f-links { gap: 0; }
  .lr-f-links a { display: inline-block; padding: 9px 0; }
  .lr-fabs { right: 16px; bottom: 24px; gap: 12px; }
  .lr-chat-fab { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Dải đơn vị chạy ngang vẫn chạy theo yêu cầu (dừng được bằng rê chuột/focus) */
  .lr *, .lr *::before, .lr *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .lr *:not(.lr-marquee-track), .lr *::before, .lr *::after { animation: none !important; }
  /* Zoom ảnh khi hover giữ tốc độ chậm: tắt hẳn transition thì ảnh giật cục, khó chịu hơn */
  .lr .lr-stay-card img, .lr .lr-branch-row .lr-media img, .lr .lr-hotel-card .lr-media img, .lr .lr-gallery img { transition-duration: 1.2s !important; }
}