/*
 * Bộ giao diện của bộ cài - CSS thuần, không phụ thuộc bản mẫu thương mại nào.
 *
 * ═══ VÌ SAO VIẾT TAY THAY VÌ DÙNG KHUNG SẴN ═══
 *
 * Lớp cũ nạp bootstrap 223 KB + gotrip 177 KB + gotrip-plugins 41 KB + aos 25 KB, tức 466 KB CSS
 * trước khi viết dòng nào của mình, kèm jQuery 85 KB và slick 42 KB. Trang chủ dùng chưa tới 5%
 * số lớp đó.
 *
 * Dùng Tailwind thì gọn, nhưng phải thêm Node vào lúc đóng gói - bộ cài đang là PHP thuần, cài
 * bằng cách giải nén rồi mở /install/. Thêm một bước biên dịch vào đó là thêm một thứ hỏng được
 * ở máy khách hàng.
 *
 * ═══ QUY ƯỚC ═══
 *
 * Mọi lớp mang tiền tố `ota-`. Website này chạy dưới thương hiệu khách sạn và họ có thể mang CSS
 * riêng của họ vào, nên tên lớp phải đủ riêng để không đâm nhau.
 *
 * Màu và bo góc khai bằng biến ở `:root`. Theme con muốn đổi nhận diện chỉ cần ghi đè vài biến,
 * không phải chép lại cả tệp.
 */

/*
 * ⛔ `hidden` PHẢI THẮNG MỌI LUẬT `display` CỦA LỚP.
 *
 * Thuộc tính `hidden` của HTML chỉ được trình duyệt gán `display: none` ở mức mặc định, nên bất kỳ
 * luật nào có lớp - `.ota-money-row { display: flex }` - cũng đè lên nó và phần tử vẫn hiện nguyên.
 *
 * Đã hỏng đúng như vậy ngày 2026-08-31: dòng "Tổng tiền (chưa bao gồm VAT)" bày ra ngay cả khi
 * không có thuế, đứng cạnh dòng "Tổng tiền" y hệt số tiền và dòng "Giá chưa bao gồm VAT" - ba dòng
 * nói cùng một chuyện. JavaScript đã đặt `hidden` đúng, chỉ có CSS là không nghe.
 *
 * ⚠️ Kiểm bằng `el.hidden` trong bảng điều khiển sẽ thấy `true` và tưởng đã ẩn. Muốn biết nó có
 * thật sự khuất hay không thì đo `getComputedStyle(el).display`.
 */
[hidden] { display: none !important; }

:root {
    --ota-brand: #1b6ef3;
    --ota-brand-dark: #1550bd;
    --ota-brand-soft: #eaf1fe;
    --ota-ink: #16202f;
    /*
     * Tương phản 10.31:1 trên nền trắng và 9.69:1 trên nền xám `--ota-bg-alt` - vượt xa ngưỡng
     * WCAG AAA (7:1). Đây là màu của DÒNG THÔNG TIN PHÒNG (diện tích, giường, sức chứa): chữ khách
     * đọc để quyết định mua, không phải chú thích phụ, nên phải đọc được thoải mái ở cỡ 14px.
     *
     * Đã qua hai nấc mới tới đây, ghi lại để khỏi lùi: #5b6879 (5.67 trên trắng / 5.32 trên xám)
     * rồi #4a5568 (7.53 / 7.07). Cả hai đều "đạt chuẩn" trên giấy mà nhìn lâu vẫn mỏi mắt - ngưỡng
     * WCAG là mức TỐI THIỂU chấp nhận được, không phải mức dễ đọc. Nền xám luôn thấp hơn nền trắng
     * chừng 6%, nên phải chọn màu theo nền XÁM chứ đừng đo mỗi nền trắng rồi tưởng đủ.
     */
    --ota-ink-soft: #374151;
    --ota-line: #e4e8ee;
    --ota-bg: #ffffff;
    --ota-bg-alt: #f6f8fb;
    --ota-price: #d34215;
    --ota-hero-from: #123a7a;
    --ota-hero-to: #3f93ff;
    --ota-footer-bg: #0f1a2b;
    /*
     * Bộ chữ. Đổi bộ thì sửa ĐÚNG dòng này, mọi nơi khác đều đọc qua biến.
     * Các bộ đã có sẵn tệp trong `fonts/`: 'Plus Jakarta Sans', 'Be Vietnam Pro'.
     */
    --ota-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ota-radius: 14px;
    --ota-radius-sm: 9px;
    --ota-shadow: 0 1px 2px rgba(16, 32, 47, .05), 0 10px 30px rgba(16, 32, 47, .07);
    --ota-shadow-lift: 0 4px 10px rgba(16, 32, 47, .08), 0 18px 44px rgba(16, 32, 47, .12);
    --ota-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ota-bg);
    color: var(--ota-ink);
    font-family: var(--ota-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/*
 * `height: auto` là phần BẮT BUỘC, không phải trang trí.
 *
 * Trình soạn thảo dán ảnh kèm `width="1500" height="1008"` ngay trên thẻ. `max-width` kéo bề ngang
 * về vừa khung, nhưng chiều cao vẫn giữ nguyên 1008 của thuộc tính - ảnh bị kéo dài dọc, tỷ lệ từ
 * 1,49 thành 0,75. Đo 2026-09-02 trên bài "Kinh nghiệm du lịch Hà Giang": hiện 760x1008.
 *
 * Những khối tự đặt chiều cao (thẻ, lưới ảnh) khai `height` riêng và đặc hiệu cao hơn nên không bị
 * luật này đụng tới.
 */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }

.ota-wrap { max-width: var(--ota-max); margin: 0 auto; padding: 0 20px; }

/* ── Header ───────────────────────────────────────────────────────────────── */

/*
 * Chiều cao 90px và logo 42px lấy theo khung của bản mẫu đang tham chiếu, để bố cục đầu trang
 * cân giống nhau. Chỉ lấy KÍCH THƯỚC, không lấy màu và không lấy tệp logo của họ.
 */
.ota-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--ota-line);
}
/*
 * Cao 72px. Thanh này `position: sticky` nên chiều cao của nó là phần màn hình mất vĩnh viễn trong
 * suốt lúc khách cuộn xem phòng. Mức cũ 90px ăn hơn 1/8 màn hình laptop 13 inch. Tham chiếu đo
 * trên trang thật: Booking.com 64px, Agoda 68px.
 */
.ota-header__inner { display: flex; align-items: center; gap: 26px; height: 72px; }
.ota-header__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.ota-header__brand img { max-height: 36px; width: auto; }

.ota-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ota-nav__link {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 9px 14px; border-radius: 999px; font: inherit; font-weight: 500;
    color: var(--ota-ink-soft); background: transparent; border: 0; cursor: pointer;
    transition: background .16s, color .16s;
}
.ota-nav__link:hover { background: var(--ota-bg-alt); color: var(--ota-ink); }
.ota-nav__link[aria-current="page"] { background: var(--ota-brand-soft); color: var(--ota-brand-dark); }

/* Menu xổ "Thông tin". */
.ota-nav__drop { position: relative; }
/*
 * Vùng đệm vô hình phủ khoảng hở giữa nút và menu. Không có nó thì chuột đi từ nút xuống menu là
 * rời khỏi vùng hover một nhịp, menu đóng ngay trước khi tay tới nơi.
 */
.ota-nav__drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.ota-nav__drop-toggle svg { transition: transform .18s; }
.ota-nav__menu {
    position: absolute; top: calc(100% + 12px); left: 0; min-width: 212px; z-index: 5;
    padding: 7px; background: #fff; border: 1px solid var(--ota-line);
    border-radius: var(--ota-radius-sm); box-shadow: var(--ota-shadow-lift);
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.ota-nav__menu a { padding: 9px 13px; border-radius: 7px; font-size: 14.5px; color: var(--ota-ink-soft); }
.ota-nav__menu a:hover { background: var(--ota-bg-alt); color: var(--ota-ink); }
.ota-nav__menu a[aria-current="page"] { color: var(--ota-brand-dark); font-weight: 600; }
/*
 * Mở bằng 3 đường: di chuột, focus bàn phím, và cờ do JavaScript bật cho màn cảm ứng - nơi không
 * có chuột để mà di.
 */
.ota-nav__drop:hover .ota-nav__menu,
.ota-nav__drop:focus-within .ota-nav__menu,
.ota-nav__drop[data-open="1"] .ota-nav__menu { opacity: 1; visibility: visible; transform: none; }
.ota-nav__drop:hover .ota-nav__drop-toggle svg,
.ota-nav__drop[data-open="1"] .ota-nav__drop-toggle svg { transform: rotate(180deg); }

/*
 * Nút gọi nằm NGOÀI thẻ `<nav>` (xem header.php), nên khoảng cách với menu do `gap` của hàng đầu
 * trang lo - không tự đặt `margin-left` nữa, đặt thêm là thành hai lớp khoảng cách cộng dồn.
 */
.ota-nav__hotline {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 10px 18px; border-radius: 999px;
    background: var(--ota-brand); color: #fff; font-weight: 700;
    transition: background .16s;
}
.ota-nav__hotline:hover { background: var(--ota-brand-dark); }

.ota-burger {
    display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--ota-line);
    border-radius: var(--ota-radius-sm); background: #fff; cursor: pointer;
}
.ota-burger span, .ota-burger span::before, .ota-burger span::after {
    display: block; width: 17px; height: 2px; background: var(--ota-ink); border-radius: 2px;
    margin: 0 auto; position: relative; content: "";
}
.ota-burger span::before { position: absolute; top: -6px; }
.ota-burger span::after { position: absolute; top: 6px; }

/* ── Nút ──────────────────────────────────────────────────────────────────── */

.ota-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--ota-radius-sm); border: 1px solid transparent;
    font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.ota-btn--primary { background: var(--ota-brand); color: #fff; }
.ota-btn--primary:hover { background: var(--ota-brand-dark); }
.ota-btn--ghost { background: #fff; border-color: var(--ota-line); color: var(--ota-ink); }
.ota-btn--ghost:hover { border-color: var(--ota-brand); color: var(--ota-brand-dark); }
/*
 * Nút CAM, dùng cho hành động phụ nhưng vẫn cần nhìn thấy rõ - hiện chỉ có "Đổi mật khẩu".
 *
 * Dùng lại `--ota-price` thay vì đẻ một màu cam thứ hai: hai sắc cam gần giống nhau trên cùng một
 * trang đọc như lỗi in. Tương phản với chữ trắng đo được 4,6:1, đạt WCAG AA cho chữ thường.
 */
.ota-btn--accent { background: var(--ota-price); border-color: var(--ota-price); color: #fff; }
.ota-btn--accent:hover { filter: brightness(1.08); color: #fff; }
/*
 * Cao 48px. Đo trên trang thật: nút chính của Booking.com cao 36px, của Vietgoing 42px - nút cũ
 * cao 56px lấn át hẳn phần chữ 14-15px quanh nó. 48px vẫn vượt ngưỡng vùng chạm 44px của Apple HIG
 * nên bấm trên điện thoại không khó hơn.
 */
.ota-btn--lg { padding: 10px 26px; font-size: 16px; }
.ota-btn--block { width: 100%; }

/* ── Hero + ô tìm kiếm ────────────────────────────────────────────────────── */

/*
 * Chiều cao 340px = 40% khung hero của bản mẫu (851px đo ở màn 1470px). Hero thấp thì nội dung
 * thật của trang lên cao hơn một màn hình, khách thấy ngay có gì để mua.
 *
 * Nền hiện là dải màu. Chỗ này đã chừa sẵn cho ẢNH NỀN thật: đặt `--ota-hero-image` là ảnh sẽ đè
 * lên dải màu, dải màu tụt xuống làm lớp phủ cho chữ đọc được. Nguồn ảnh chưa chốt.
 */
/*
 * ⚠️ KHÔNG đặt `overflow: hidden` ở đây. Khung kết quả của ô tìm kiếm bung ra ngoài đáy hero, có
 * overflow là nó bị cắt cụt còn một dòng rưỡi - trông như tìm ra đúng một kết quả. Ảnh nền và dải
 * màu đều nằm ở lớp giả phủ đúng khung nên không có gì tràn ra để mà phải cắt.
 */
.ota-hero {
    position: relative; min-height: 340px; display: flex; align-items: center;
    background: var(--ota-bg-alt);
}
.ota-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--ota-hero-image, none);
    background-size: cover; background-position: center;
}
/*
 * Đổi ảnh nền mượt khi khách sạn tải nhiều tấm (xem khối luân phiên trong `theme.js`).
 *
 * Chuyển tiếp đặt trên `background-image` nên chỉ có tác dụng ở trình duyệt đã dựng được ảnh mới -
 * nơi nào không hỗ trợ thì ảnh đổi thẳng, vẫn đúng, chỉ kém mềm. Đặt ở đây chứ không ở phần tử cha:
 * cha có cả chữ và ô tìm kiếm, cho chúng mờ dần theo là đọc không nổi trong lúc chuyển.
 */
.ota-hero[data-hero-slides]::before { transition: background-image .8s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .ota-hero[data-hero-slides]::before { transition: none; }
}
.ota-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(150deg, var(--ota-hero-from) 0%, var(--ota-brand) 62%, var(--ota-hero-to) 100%);
}
/*
 * Có ảnh thì lớp phủ đổi từ dải màu thương hiệu sang lớp TỐI trong suốt dần.
 *
 * Giữ dải màu xanh đè lên ảnh sẽ nhuộm cả tấm ảnh thành một màu, khách sạn chụp phòng đẹp cỡ nào
 * cũng thành ra như nhau. Lớp tối thì ảnh giữ nguyên màu thật.
 *
 * Đậm bên trái nơi có chữ và ô tìm kiếm, nhạt dần sang phải để khoe ảnh - chứ không phủ đều một
 * mức, vì phủ đều đủ đậm cho chữ đọc được thì cũng đủ đậm để giết luôn tấm ảnh.
 */
.ota-hero--photo::after {
    background: linear-gradient(100deg,
        rgba(9, 18, 32, .82) 0%,
        rgba(9, 18, 32, .58) 48%,
        rgba(9, 18, 32, .22) 100%);
}
/*
 * Chữ và ô tìm kiếm căn GIỮA.
 *
 * Lệch trái là kiểu của trang bán nhiều nơi, nơi ảnh nền thường có chủ thể nằm bên phải. Website
 * một khách sạn thì ảnh nền là chính khách sạn đó, và điểm nhìn hay nằm giữa khung - đặt chữ lệch
 * một bên là che mất đúng phần đẹp nhất của ảnh.
 */
/*
 * ⚠️ `z-index: 30`, KHÔNG phải 1.
 *
 * Khối này tạo một TẦNG XẾP LỚP riêng, nên `z-index: 20` của hộp kết quả tìm kiếm bên trong nó chỉ
 * có nghĩa so với anh em cùng tầng - ra ngoài, cả cụm hero chỉ đáng giá đúng con số ở đây. Khối
 * "Ưu đãi" ngay dưới cũng khai `z-index: 1` và đứng SAU trong DOM, nên nó vẽ đè lên: chữ của banner
 * xuyên qua hộp kết quả, đọc thành hai lớp chữ chồng nhau.
 *
 * 30 vì phải trên mọi khối nội dung (đang dùng `z-index: 1`) nhưng dưới thanh điều hướng dính trên
 * đầu (`z-index: 50`) - hộp kết quả xổ dài không được che mất thanh đó.
 */
.ota-hero__inner {
    position: relative; z-index: 30; width: 100%;
    padding-top: 30px; padding-bottom: 30px;
    display: flex; flex-direction: column; align-items: center;
}
.ota-hero__title { color: #fff; font-size: clamp(26px, 3.4vw, 40px); max-width: 760px; text-align: center; }

/*
 * Ô tìm kiếm: MỘT ô chữ và một nút, không tab, không chọn ngày, không chọn số khách.
 *
 * `position: relative` ở đây là chỗ neo của khung kết quả bên dưới - bỏ đi thì khung kết quả nhảy
 * lên góc trên cùng trang.
 */
.ota-search { position: relative; margin-top: 22px; max-width: 820px; width: 100%; }
.ota-search__form {
    display: flex; align-items: stretch; gap: 10px; padding: 10px;
    background: #fff; border-radius: var(--ota-radius); box-shadow: var(--ota-shadow-lift);
}
/* Không còn nhãn phía trên nên ô chữ căn giữa theo chiều dọc của khung. */
.ota-search__field {
    flex: 1; min-width: 0; display: flex; align-items: center;
    padding: 0 8px 0 16px; cursor: text;
}
.ota-search__field input {
    width: 100%; border: 0; background: transparent; font: inherit; font-size: 16px;
    color: var(--ota-ink); padding: 0; outline: none;
}
.ota-search__field input::placeholder { color: var(--ota-ink-soft); opacity: .75; }

/*
 * Khung kết quả rộng đúng bằng ô tìm kiếm và ĐÈ lên nội dung bên dưới. Nếu chen vào luồng trang
 * thì mỗi lần gõ thêm một chữ là cả trang giật xuống.
 */
.ota-search__result {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
    padding: 6px; background: #fff; border: 1px solid var(--ota-line);
    border-radius: var(--ota-radius); box-shadow: var(--ota-shadow-lift);
    max-height: min(58vh, 430px); overflow-y: auto;
}
.ota-search__result[hidden] { display: none; }
.ota-search__group {
    padding: 10px 14px 4px; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--ota-ink-soft);
}
/*
 * ═══ HAI HÀNG, KHÔNG PHẢI HAI ĐẦU ═══
 *
 * Bản đầu đẩy tên sang trái và dòng mô tả sang phải bằng `space-between`. Đo trên khung 806px thì
 * giữa chúng trống 200px, và khung càng rộng khoảng trống càng lớn - mắt phải nhảy qua một quãng
 * trắng để nối tên với thông tin của chính nó, mà mỗi dòng lại nhảy một quãng khác nhau.
 *
 * Dòng mô tả của phòng còn ghép bốn ý ("1 giường King · View thành phố · Tối đa 4 khách · từ
 * 800.000đ/đêm"), dài gần bằng tên - ép nó vào một hàng với `nowrap` là hoặc tràn, hoặc phải cắt
 * mất phần giá.
 *
 * Xếp dọc thì tên và mô tả dính liền nhau, đọc từ trái sang như một khối, và giống hệt cách trang
 * kết quả `/search` bày (`.ota-hit`).
 */
.ota-search__item {
    display: block; padding: 8px 14px; border-radius: var(--ota-radius-sm);
}
.ota-search__item:hover, .ota-search__item[data-active="1"] { background: var(--ota-bg-alt); }
/*
 * Tên đậm vừa (600) chứ không phải đậm hết cỡ, và cỡ chữ bằng chữ thường của trang. Đây là một
 * dòng trong danh sách gợi ý, không phải tiêu đề - to hoặc đậm hơn nữa thì mỗi dòng tự đòi chú ý
 * và cả khung thành một khối chữ nặng.
 */
.ota-search__item b { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
/*
 * Mô tả nhạt hơn và nhỏ hơn một bậc: nó là thông tin phụ để đối chiếu, không phải thứ để đọc
 * trước. Bỏ `nowrap` để dòng dài xuống hàng thay vì tràn ra khỏi khung.
 */
.ota-search__item span {
    display: block; margin-top: 1px; color: var(--ota-ink-soft);
    font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
}
.ota-search__empty { padding: 20px 14px; color: var(--ota-ink-soft); }

/* ── Khối trang ───────────────────────────────────────────────────────────── */

.ota-section { padding: 58px 0; }
.ota-section--alt { background: var(--ota-bg-alt); }
/*
 * Hai khối THUẦN cùng nền đứng liền nhau thì cộng dồn thành 116px trắng trơn - không có vạch màu
 * nào ngăn nên mắt đọc thành một khoảng hụt giữa trang. Khi nền đổi (một bên xám) thì chính vệt
 * màu đã làm việc phân tách, giữ nguyên 58px + 58px lại vừa đẹp.
 *
 * ⚠️ `:not([class*="--"])` loại mọi BIẾN THỂ, không riêng `--alt`. Bản đầu chỉ loại `--alt` nên nó
 * bắt luôn cặp `--tight` + thường ở trang chi tiết khách sạn: lưới ảnh mất sạch đệm dưới và dính
 * vào tiêu đề "Hạng phòng". Biến thể nào cũng đã tự đặt đệm riêng, đừng đụng vào.
 */
.ota-section:not([class*="--"]) + .ota-section:not([class*="--"]) { padding-top: 12px; }
.ota-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.ota-section__title { font-size: clamp(21px, 2.4vw, 28px); }
.ota-section__more { color: var(--ota-brand); font-weight: 600; white-space: nowrap; }
.ota-section__more:hover { text-decoration: underline; }
/* Đường đi tiếp đặt DƯỚI danh sách, dùng cho khối dài mà "Xem tất cả" cạnh tiêu đề dễ bị bỏ qua. */
.ota-section__foot { display: flex; justify-content: center; margin-top: 28px; }

.ota-grid { display: grid; gap: 22px; }
/* Một mục thì chiếm trọn hàng - khối "Vì sao chọn chúng tôi?" cho phép soạn 1, 2 hay 3 mục. */
.ota-grid--1 { grid-template-columns: 1fr; }
.ota-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ota-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ota-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Thẻ ──────────────────────────────────────────────────────────────────── */

/*
 * Cột dọc chứ không phải khối thường: các ô trong một lưới đã cao bằng nhau (lưới tự kéo giãn), nên
 * phải có cách đẩy GIÁ xuống đáy. Không làm thế thì thẻ nào có thêm một dòng - hạng sao, số hạng
 * phòng - là giá của nó tụt xuống thấp hơn thẻ bên cạnh, mắt phải rà lên xuống mới so được tiền.
 *
 * ⚠️ Lớp này dùng chung cho MỌI thẻ lưới: khách sạn, tour, xe, phòng, địa danh, bài viết. Sửa ở đây
 * là chạm cả sáu, phải soi lại từng loại chứ đừng chỉ nhìn khối khách sạn.
 */
.ota-card {
    background: #fff; border-radius: var(--ota-radius); overflow: hidden;
    display: flex; flex-direction: column;
}
.ota-card--framed { border: 1px solid var(--ota-line); }
/* Khung ảnh giữ đúng tỉ lệ 4/3, không cho cột dọc bóp lại khi phần chữ dài ra. */
/* `background-color`, KHÔNG dùng shorthand `background`: shorthand xoá luôn ảnh nền mà
   `.is-empty-image` đặt để vẽ biểu tượng "chưa có ảnh". */
.ota-card__media { position: relative; aspect-ratio: 4 / 3; background-color: var(--ota-bg-alt); overflow: hidden; flex: none; }
.ota-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ota-card:hover .ota-card__media img { transform: scale(1.05); }
.ota-card__body { padding: 15px 4px 4px; display: flex; flex-direction: column; flex: 1 1 auto; }
.ota-card--framed .ota-card__body { padding: 15px 16px 17px; }
.ota-card__title { font-size: 16px; margin-bottom: 3px; }
.ota-card__meta { color: var(--ota-ink-soft); font-size: 13.5px; }
/* `margin-top: auto` đẩy giá xuống đáy thẻ - đó là cả mục đích của cột dọc ở trên. */
.ota-card__price { margin-top: auto; padding-top: 9px; color: var(--ota-price); font-weight: 700; }
.ota-card__price small { color: var(--ota-ink-soft); font-weight: 500; }
.ota-card__tag {
    position: absolute; top: 11px; left: 11px; z-index: 1;
    background: rgba(255, 255, 255, .95); color: var(--ota-ink);
    padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* Thẻ điểm đến: ảnh nền + chữ đè lên. */
.ota-place { position: relative; border-radius: var(--ota-radius); overflow: hidden; aspect-ratio: 3 / 4; display: block; }
.ota-place img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ota-place:hover img { transform: scale(1.06); }
.ota-place__cap {
    position: absolute; inset: auto 0 0; padding: 16px;
    background: linear-gradient(transparent, rgba(9, 18, 32, .82));
    color: #fff;
}
.ota-place__cap b { display: block; font-size: 17px; }
.ota-place__cap span { font-size: 13px; opacity: .85; }

/* ── Ưu đãi ───────────────────────────────────────────────────────────────── */

/*
 * Thẻ ưu đãi: ảnh phủ kín, chữ đè lên. Chưa có ảnh thì nền là dải màu thương hiệu - chữ trắng vẫn
 * đọc được, không rơi vào cảnh chữ trắng trên nền trắng.
 */
.ota-offer {
    position: relative; display: flex; align-items: flex-end; min-height: 300px;
    border-radius: var(--ota-radius); overflow: hidden; color: #fff;
    background: linear-gradient(150deg, var(--ota-hero-from), var(--ota-brand));
}
.ota-offer__media { position: absolute; inset: 0; }
.ota-offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ota-offer:hover .ota-offer__media img { transform: scale(1.06); }
.ota-offer__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(transparent 28%, rgba(9, 18, 32, .8));
}
.ota-offer__body { position: relative; z-index: 1; padding: 24px; }
.ota-offer__body h3 { font-size: 22px; margin-bottom: 6px; }
.ota-offer__body p { margin: 0 0 15px; color: rgba(255, 255, 255, .86); font-size: 14.5px; }
.ota-offer__cta {
    display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
    background: #fff; color: var(--ota-ink); font-weight: 600; font-size: 14px;
    transition: background .16s;
}
.ota-offer:hover .ota-offer__cta { background: var(--ota-brand-soft); color: var(--ota-brand-dark); }

/* ── Lý do chọn ───────────────────────────────────────────────────────────── */

.ota-usp { text-align: center; padding: 4px; }
.ota-usp__ico {
    width: 52px; height: 52px; margin: 0 auto 13px; border-radius: 50%;
    background: var(--ota-brand-soft); color: var(--ota-brand-dark);
    display: grid; place-items: center; font-size: 22px;
}
.ota-usp h3 { font-size: 16px; margin-bottom: 5px; }
.ota-usp p { color: var(--ota-ink-soft); margin: 0; font-size: 14px; }

/* ── Khối giới thiệu ở trang chủ ──────────────────────────────────────────── */

.ota-intro__text p { margin: 10px 0 0; color: var(--ota-ink-soft); line-height: 1.7; }
.ota-intro--with-photo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
.ota-intro__photo img { width: 100%; border-radius: 14px; display: block; }

/* Màn hẹp: ảnh xuống dưới chữ, không bóp thành một dải mỏng bên cạnh. */
@media (max-width: 860px) {
    .ota-intro--with-photo { grid-template-columns: 1fr; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.ota-footer { background: var(--ota-footer-bg); color: rgba(255, 255, 255, .72); padding: 52px 0 26px; margin-top: 10px; }
.ota-footer a { color: rgba(255, 255, 255, .72); }
.ota-footer a:hover { color: #fff; }
.ota-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.ota-footer h3 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 13px; }
.ota-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ota-footer__brand { color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 9px; }
.ota-footer__copyright { margin-top: 16px; font-size: 13.5px; }

/* ── Màn hẹp ──────────────────────────────────────────────────────────────── */

/*
 * 5 mục bán hàng + menu xổ + hotline là một hàng dài. Từ khoảng 1100px trở xuống phải bóp đệm lại,
 * nếu không hotline bị đẩy tràn ra ngoài khung.
 */
@media (max-width: 1100px) {
    .ota-header__inner { gap: 16px; }
    .ota-nav__link { padding: 9px 10px; }
    .ota-nav__hotline { padding: 10px 14px; }
}

@media (max-width: 1023px) {
    /*
     * Lưới 3 cột cũng phải gãy ở đây, không chỉ lưới 4 cột.
     *
     * Máy tính bảng dựng đứng rộng 768px: để nguyên 3 cột thì mỗi thẻ còn khoảng 230px, mà thẻ ưu
     * đãi và thẻ bài viết đều là ảnh phủ kín có chữ đè lên - hẹp thế thì tiêu đề gãy xuống ba dòng
     * và đè lên nút. Đã đo ở 768px và 900px trước khi sửa.
     */
    .ota-grid--3,
    .ota-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ota-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .ota-header__inner { height: 68px; }
    .ota-header__brand img { max-height: 34px; }
    /*
     * Thứ tự trên điện thoại: nút ba gạch - logo - hotline.
     *
     * Nút đứng ĐẦU HÀNG bên trái (HieuNQ chốt 2026-08-29). Để nút ở góc phải cạnh hotline thì hai
     * khối bấm được dồn vào một chỗ, nhìn nặng một bên và dễ bấm nhầm.
     *
     * `order` chứ không đổi thứ tự trong HTML: ở màn rộng nút này ẩn hẳn, mà thứ tự đọc của trình
     * đọc màn hình thì nên giữ logo trước.
     */
    .ota-burger { display: block; order: -1; margin-left: 0; margin-right: 2px; }

    /*
     * Hotline đứng ngoài menu, dồn về phải: đó là thứ khách cần nhất trên điện thoại, bắt mở menu
     * mới thấy là giấu mất một cú gọi. Bóp lại cho ở 360px vẫn đủ chỗ cả ba khối trên một hàng.
     */
    .ota-nav__hotline { margin-left: auto; padding: 8px 13px; font-size: 14px; gap: 6px; }

    /*
     * Menu xổ căn TRÁI cho khớp vị trí nút: chữ phải nằm ngay dưới ngón tay vừa bấm, không bắt
     * người dùng với sang mép bên kia màn hình.
     */
    .ota-nav {
        display: none; position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
        background: #fff; border-bottom: 1px solid var(--ota-line); box-shadow: var(--ota-shadow);
        text-align: left;
    }
    .ota-nav[data-open="1"] { display: flex; }
    /* `.ota-nav__link` là flex nên `text-align` không ăn - phải đẩy bằng `justify-content`. */
    .ota-nav__link { border-radius: var(--ota-radius-sm); justify-content: flex-start; }

    /*
     * Tài khoản lên ĐẦU menu, ngăn với các mục bán hàng bằng một vạch.
     *
     * `order: -1` chứ không đổi vị trí trong HTML: ở màn rộng khối này phải là phần tử cuối `<nav>`
     * để đứng ngay trước nút hotline. Một chỗ trong mã, hai thứ tự hiển thị.
     *
     * Vạch ngăn cần thiết vì "Đăng nhập" là việc của TÀI KHOẢN, còn "Đặt phòng / Đặt tour / Thuê xe"
     * là hàng đang bán - hai nhóm khác hẳn nhau mà xếp liền một mạch thì đọc thành một danh sách.
     */
    .ota-nav__account {
        order: -1; padding: 4px 14px 12px; margin-bottom: 8px;
        border-bottom: 1px solid var(--ota-line);
    }

    /*
     * Màn hẹp không có chuột để di, nên menu xổ bày PHẲNG luôn: mục con thụt vào một nấc. Bắt
     * khách bấm thêm một lần để mở 3 dòng là bước thừa.
     */
    .ota-nav__drop::after { content: none; }
    .ota-nav__drop-toggle { display: none; }
    /* Mục con thụt vào từ bên TRÁI, cho khớp hướng đọc của menu đã căn trái. */
    .ota-nav__menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        min-width: 0; padding: 0 0 0 12px; border: 0; box-shadow: none;
        border-left: 2px solid var(--ota-line); border-radius: 0; margin: 4px 0 4px 14px;
    }
    .ota-nav__menu a { text-align: left; }

    .ota-grid--2, .ota-grid--3, .ota-grid--4 { grid-template-columns: 1fr; }
    .ota-section { padding: 40px 0; }
    .ota-section__head { flex-direction: column; align-items: flex-start; }
    .ota-footer__cols { grid-template-columns: 1fr; }

    .ota-hero { min-height: 280px; }
    .ota-search__form { flex-direction: column; gap: 6px; }
    .ota-search__field { padding: 10px 14px; }
    .ota-offer { min-height: 240px; }
}

/*
 * Dưới 360px thì logo, số điện thoại và nút ba gạch không cùng lọt một hàng. Giữ nút gọi nhưng chỉ
 * còn biểu tượng - vẫn bấm gọi được, và không đẩy nút ba gạch tràn ra ngoài.
 */
@media (max-width: 359px) {
    .ota-nav__hotline-number { display: none; }
    .ota-nav__hotline { padding: 8px 10px; }
}

/* ── Website MỘT khách sạn: dải ảnh + tiện nghi + dịch vụ ─────────────────── */

.ota-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.ota-gallery a { border-radius: var(--ota-radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.ota-gallery a:first-child { grid-row: span 2; aspect-ratio: auto; }
.ota-gallery img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Ô cuối của lưới ảnh: vẫn là một tấm ảnh thật, phủ thêm một lớp tối và một nút dẫn sang trang chi
 * tiết. Phủ tối chứ không thay bằng khối màu đặc - khách vẫn nhận ra đây là ảnh của khách sạn, chỉ
 * là còn nhiều tấm nữa ở bên trong.
 */
.ota-gallery__more { position: relative; display: block; }
.ota-gallery__more::after {
    content: ''; position: absolute; inset: 0; background: rgba(15, 26, 43, .5);
    transition: background .18s ease;
}
.ota-gallery__more:hover::after { background: rgba(15, 26, 43, .64); }
.ota-gallery__more-cta {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    color: #fff; font-weight: 600; font-size: 15px; text-align: center; padding: 8px;
}
.ota-gallery__more-cta::after { content: '›'; font-size: 20px; line-height: 1; }

.ota-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ota-chip {
    padding: 8px 14px; border-radius: 999px; background: var(--ota-bg-alt);
    border: 1px solid var(--ota-line); font-size: 14px;
}

.ota-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ota-line);
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius); overflow: hidden; }
.ota-list li { background: #fff; padding: 12px 16px; display: flex; justify-content: space-between; gap: 14px; }
.ota-list b { color: var(--ota-price); white-space: nowrap; }

.ota-cta {
    background: linear-gradient(120deg, var(--ota-hero-from), var(--ota-brand)); color: #fff;
    border-radius: var(--ota-radius); padding: 34px; text-align: center;
}
.ota-cta h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.ota-cta p { color: rgba(255, 255, 255, .84); margin: 0 0 18px; }

@media (max-width: 767px) {
    .ota-gallery { grid-template-columns: 1fr 1fr; }
    .ota-gallery a:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
    /*
     * Năm ảnh xếp hai cột thì ô thứ 5 đứng lẻ nửa hàng, mà đó đúng là ô mang nút "Xem thêm N ảnh".
     * Cho nó chiếm cả hàng: hàng dưới cân, và nút bấm rộng hơn cho ngón tay.
     */
    .ota-gallery a:nth-child(5) { grid-column: span 2; aspect-ratio: 16 / 7; }
}

/*
 * Ảnh hỏng: `theme.js` gắn lớp này lên khung chứa. Vẽ một mảng nền có vân nhẹ thay cho biểu tượng
 * ảnh vỡ - trang thiếu ảnh trông vẫn gọn, còn hơn để người xem tưởng website chết.
 */
/*
 * Khung ảnh khi không có ảnh: vẽ biểu tượng "ảnh" ở giữa nền xám.
 *
 * Trước đây chỉ có mảng vân chéo mờ, nhìn ra một ô trống trơn - người xem tưởng trang đang tải dở
 * hoặc hỏng. Một biểu tượng ảnh nói rõ "chỗ này vốn là ảnh, chưa có tấm nào".
 *
 * Hình nhúng thẳng dạng `data:` chứ không để tệp riêng: nó xuất hiện ở gần như mọi trang, tách ra
 * là thêm một lượt tải mạng cho một hình 300 byte, và có lúc khung ảnh hiện trước khi tệp đó về.
 *
 * `background-size: 30%` với trần 84px: khung ảnh của theme trải từ ô nhỏ 100px tới ô lớn 640px,
 * để cỡ cố định thì ô nhỏ bị hình che kín còn ô lớn thì hình lọt thỏm.
 */
.is-empty-image {
    background-color: var(--ota-bg-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52' fill='none' stroke='%2394a3b8' stroke-width='3'%3E%3Crect x='2.5' y='2.5' width='59' height='47' rx='4'/%3E%3Ccircle cx='44' cy='17' r='5.5' fill='%2394a3b8' stroke='none'/%3E%3Cpath d='M6 42 24 22l12 13 7-6 13 13' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(30%, 84px);
}
.is-empty-image img { display: none; }

/*
 * Ảnh HỎNG mà không nằm trong khung nào - ảnh người vận hành dán vào bài viết.
 *
 * Không ẩn nó đi: bài sẽ có một khoảng hụt không rõ vì sao. Cho nó khổ tối thiểu rồi vẽ biểu tượng
 * "chưa có ảnh" ngay trên thẻ đó. `min-height` chứ không `height`: ảnh hỏng vẫn giữ thuộc tính
 * `width`/`height` gốc nếu người soạn có khai, và ta không nên đè lên.
 */
img.is-empty-image {
    display: block; min-width: 120px; min-height: 160px;
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
}

.ota-amenity { display: grid; gap: 20px; }
.ota-amenity__group h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ota-ink-soft); margin-bottom: 10px; }

/* ── Trang chi tiết khách sạn ─────────────────────────────────────────────── */

/*
 * Dải đường dẫn. Nền khác thân trang một chút để tách khỏi phần nội dung mà không cần đường kẻ.
 */
.ota-crumbs { background: var(--ota-bg-alt); border-bottom: 1px solid var(--ota-line); }
.ota-crumbs__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding-top: 11px; padding-bottom: 11px; font-size: 13.5px; color: var(--ota-ink-soft);
}
.ota-crumbs a { color: var(--ota-ink-soft); }
.ota-crumbs a:hover { color: var(--ota-brand); }
/*
 * ⛔ Từng dùng `var(--ota-line)` (#e4e8ee) - đó là màu ĐƯỜNG KẺ, tương phản 1.3:1, dùng cho nét
 * mảnh 1px chứ không dùng cho ký tự. Đặt lên chữ thì dấu nối mờ tới mức không nhìn ra.
 * #737f93 cho 3.81:1 TRÊN NỀN XÁM của thanh breadcrumb - vượt ngưỡng 3:1 mà WCAG 1.4.11 đặt cho
 * thành phần phi văn bản, và vẫn nhạt hơn chữ hai bên nên không giành sự chú ý.
 *
 * ⚠️ Đo trên nền XÁM, không phải nền trắng: cùng màu #98a2b3 cho 2.9:1 trên trắng nhưng chỉ 2.42:1
 * ở đây. Chọn theo phép đo trên nền trắng là lại ra một dấu nối mờ nữa.
 */
.ota-crumbs__sep { color: #737f93; }
.ota-crumbs__now { color: var(--ota-ink); font-weight: 600; }

/* Khối nối tiếp nhau trong cùng một mạch thì không cần đệm đủ 58px của một mục độc lập. */
.ota-section--tight { padding: 26px 0 0; }

.ota-hotel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ota-hotel__name { font-size: clamp(23px, 3vw, 32px); margin: 0; }
.ota-hotel__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; color: var(--ota-ink-soft); font-size: 14.5px; }
/* Loại hình: nhãn nhỏ có nền, tách khỏi địa chỉ để mắt bắt được ngay đây là "Resort" hay "Homestay". */
.ota-hotel__type {
    padding: 2px 9px; border-radius: 999px; background: var(--ota-brand-soft);
    color: var(--ota-brand-dark); font-size: 13px; font-weight: 600;
}
.ota-stars { color: #f0a92b; letter-spacing: 2px; }
.ota-hotel__price { text-align: right; }
.ota-hotel__price span { display: block; font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-hotel__price b { font-size: 22px; color: var(--ota-price); }

/*
 * Thân trang hai cột. Cột phải hẹp cố định 340px chứ không theo tỉ lệ: khối đặt phòng có ô nhập
 * bên trong, co theo tỉ lệ thì ở màn hẹp nó bóp ô ngày xuống dưới mức đọc được.
 */
.ota-detail { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 40px; align-items: start; }
.ota-detail__main { min-width: 0; }
.ota-detail__side { position: sticky; top: 108px; }

.ota-block__title { font-size: 19px; margin: 34px 0 14px; }
.ota-block__title:first-child { margin-top: 0; }
/*
 * Khối chữ đứng ngay dưới lưới ảnh phải tự chừa khoảng cách.
 *
 * Tiêu đề bên trong đã bị `:first-child` xoá lề trên, nên không có luật này thì chữ "Thông số" dính
 * sát mép dưới tấm ảnh, đọc như một cái nhãn của ảnh chứ không phải tiêu đề của phần mới.
 */
.ota-gallery + .ota-block { margin-top: 26px; }

/* Nội dung do người vận hành soạn trên SENNET: chỉ đặt nhịp đọc, không áp màu hay cỡ chữ lạ. */
.ota-prose { color: var(--ota-ink-soft); line-height: 1.75; }
.ota-prose > :first-child { margin-top: 0; }
.ota-prose > :last-child { margin-bottom: 0; }
/*
 * Ảnh trong nội dung do người vận hành soạn: CĂN GIỮA.
 *
 * Người soạn dán ảnh vào trình soạn thảo với đủ cỡ; ảnh hẹp hơn cột chữ mà dính lề trái thì bài đọc
 * lệch hẳn một bên. `display: block` + lề tự động là cách duy nhất căn giữa được thẻ ảnh mà không
 * phải bọc thêm thẻ - mà bọc thì cũng không bọc được, nội dung là HTML người ta tự soạn.
 */
.ota-prose img {
    display: block; margin: 14px auto; max-width: 100%; height: auto;
    border-radius: var(--ota-radius-sm);
}
.ota-prose ul, .ota-prose ol { padding-left: 20px; }

.ota-chips--sm { gap: 6px; }
.ota-chips--sm .ota-chip { padding: 4px 10px; font-size: 12.5px; }
.ota-chip--muted { color: var(--ota-ink-soft); }
/* Dấu tick vẽ bằng ký tự, không kéo thêm bộ biểu tượng chỉ để in một hình. */
.ota-chip--tick::before { content: '✓'; color: var(--ota-brand); font-weight: 700; margin-right: 6px; }

.ota-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px 18px; }
.ota-ticks li { position: relative; padding-left: 21px; color: var(--ota-ink-soft); font-size: 14.5px; }
.ota-ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--ota-brand); font-weight: 700; }

.ota-list em { display: block; font-style: normal; font-size: 13px; color: var(--ota-ink-soft); }
/* Bảng thông số trong modal: cùng nhịp với .ota-list nhưng bỏ viền để không thành khung trong khung. */
.ota-list--plain { border: 0; border-radius: 0; background: transparent; gap: 0; }
.ota-list--plain li { padding: 9px 0; border-bottom: 1px solid var(--ota-line); }
.ota-list--plain li:last-child { border-bottom: 0; }
/*
 * `.ota-list b` tô màu giá vì danh sách dịch vụ chỉ có tiền ở cột phải. Bảng thông số phòng thì cột
 * phải là sức chứa, số phòng rồi mới tới giá - để nguyên là "Tối đa 4 khách" cũng đỏ như tiền.
 */
.ota-list--plain b { color: var(--ota-ink); }
.ota-list--plain b.ota-money { color: var(--ota-price); }

/* ── Khối đặt phòng ───────────────────────────────────────────────────────── */

/*
/*
 * Bốn con số dưới đây phải khớp nhau, đừng chỉnh lẻ một cái:
 *
 *     cột 368px - 2 viền 1px - 2 lần đệm 20px = 326px  =  lịch flatpickr (308px + 2 lần đệm 8px + 2 viền)
 *
 * flatpickr đặt lịch theo mép TRÁI của ô nhập, nên lịch rộng hơn ô bao nhiêu là nhô sang phải bấy
 * nhiêu. Sai một nhịp là thấy ngay: 340px/đệm 22px cho ra lệch 23px trái và 9px phải; 348px/đệm
 * 20px sau khi lịch dày thêm 18px thì mép phải chỉ còn 1px.
 *
 * ⛔ KHÔNG sửa bằng cách bóp chiều rộng lịch: `.dayContainer` và `.flatpickr-day` có luật riêng,
 * đụng vào là bảy cột dính vào nhau (đã vỡ một lần ngày 2026-08-30).
 */
.ota-book { border: 1px solid var(--ota-line); border-radius: var(--ota-radius); background: #fff; padding: 22px 20px; box-shadow: var(--ota-shadow); }
.ota-book__score { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ota-line); }
.ota-book__score-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--ota-radius-sm); background: var(--ota-brand); color: #fff; font-weight: 700; }
.ota-book__score em { display: block; font-style: normal; font-size: 13px; color: var(--ota-ink-soft); }
.ota-book__title { font-size: 17px; margin: 0 0 14px; }
/*
 * Email định danh dưới tiêu đề khối tài khoản. Nhạt hơn tiêu đề vì là thứ để ĐỐI CHIẾU, không
 * phải thứ để thao tác. `overflow-wrap` vì email dài không có khoảng trắng nào để ngắt dòng, để
 * mặc thì nó tràn ra khỏi hộp trên màn hẹp.
 */
.ota-book__ident { margin: -6px 0 14px; font-size: 14.5px; color: var(--ota-ink-soft); overflow-wrap: anywhere; }
.ota-book__form { display: grid; gap: 12px; }

.ota-field { display: block; }
/*
 * Nhãn và số đêm nằm một hàng, số đêm đẩy sang mép phải. Để chúng chảy như chữ thường thì hễ ô hẹp
 * lại hoặc số đêm dài ra ("(10 đêm)") là nhãn tự xuống dòng, khối nhảy cao lên một nhịp.
 */
.ota-field > span { display: block; font-size: 13px; color: var(--ota-ink-soft); margin-bottom: 5px; }
.ota-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ota-field__head > span { white-space: nowrap; }
.ota-field input {
    width: 100%; padding: 11px 13px; font: inherit; color: var(--ota-ink);
    background: #fff; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
}
.ota-field input:focus { outline: 2px solid var(--ota-brand); outline-offset: -1px; border-color: var(--ota-brand); }
.ota-field input[readonly] { cursor: pointer; }
.ota-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ota-book__meta { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ota-line); display: grid; gap: 6px; font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-book__meta b { color: var(--ota-ink); }

/* ── Danh sách hạng phòng ─────────────────────────────────────────────────── */

.ota-rooms { display: grid; gap: 14px; }
.ota-room { display: grid; grid-template-columns: 208px minmax(0, 1fr) auto; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--ota-line); border-radius: var(--ota-radius); padding: 15px; }
/*
 * Ảnh căn TRÊN (`align-self: start`) và giữ nguyên tỉ lệ 4/3.
 *
 * Với `align-items: center` của `.ota-room`, ảnh nằm giữa khối chữ nên mép trên tụt dưới tên phòng
 * 22px ở thẻ này và 37px ở thẻ kia - lệch KHÔNG ĐỀU vì phụ thuộc số dòng thông tin của từng hạng
 * phòng, nhìn xuống danh sách thấy so le.
 *
 * ⛔ Đừng chữa bằng `align-self: stretch`: ảnh cao bằng cả hàng thì `object-fit: cover` cắt mất
 * hai bên, mà phần bị cắt lại chính là thứ khách cần thấy (giường, cửa sổ, tầm nhìn).
 */
.ota-room__media {
    border-radius: var(--ota-radius-sm); overflow: hidden; aspect-ratio: 4 / 3;
    align-self: start;
    /* `background-color` chứ không shorthand - xem lý do ở `.ota-card__media`. */
    background-color: var(--ota-bg-alt);
}
.ota-room__media img { width: 100%; height: 100%; object-fit: cover; }
.ota-room__name { font-size: 17px; margin: 0 0 4px; }
.ota-room__meta { margin: 0 0 9px; color: var(--ota-ink-soft); font-size: 14px; }
/*
 * `justify-items: end` chứ không `stretch`: bộ đếm là khối bo tròn có bề rộng tự nhiên, kéo giãn
 * cho bằng ô thì thừa ra một mảng trắng bên phải dấu cộng, trông như hỏng.
 */
.ota-room__buy { display: grid; gap: 8px; justify-items: end; text-align: right; min-width: 168px; }
.ota-room__price b { font-size: 19px; color: var(--ota-price); }
.ota-room__price em { font-style: normal; font-size: 13px; color: var(--ota-ink-soft); margin-left: 3px; }
/* "Đã gồm VAT": dòng riêng dưới giá, chữ nhỏ và nhạt - là chú thích của con số, không tranh chỗ với nó. */
.ota-room__vat { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ota-ink-soft); }
.ota-room__price--ask { font-size: 17px; }

.ota-empty { text-align: center; color: var(--ota-ink-soft); padding: 34px 0; }

/*
 * Khối thông tin dưới cùng chạy một cột. Chặn bề rộng dòng chữ ở 78ch: dòng dài hết 1180px thì mắt
 * mất chỗ khi xuống dòng, đọc vài đoạn là nản.
 */
.ota-info > .ota-prose, .ota-info > .ota-block__title { max-width: 78ch; }

/* ── Modal chi tiết hạng phòng ────────────────────────────────────────────── */

/*
 * Dùng thẻ `<dialog>` thay vì tự dựng lớp phủ: phím Esc, bẫy tiêu điểm bàn phím và lớp nền mờ đều
 * do trình duyệt lo. Tự viết ba thứ đó cho đúng là nhiều mã hơn và dễ sót đúng phần trợ năng.
 */
.ota-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: var(--ota-radius); box-shadow: var(--ota-shadow-lift); background: #fff; color: var(--ota-ink); overflow: hidden; }
.ota-modal::backdrop { background: rgba(11, 20, 33, .55); }
.ota-modal__box { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
.ota-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--ota-line); }
.ota-modal__title { font-size: 19px; margin: 0; }
.ota-modal__close { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--ota-ink-soft); cursor: pointer; padding: 0 4px; }
.ota-modal__close:hover { color: var(--ota-ink); }
.ota-modal__body { padding: 20px 22px; overflow-y: auto; }
.ota-modal__sub { font-size: 15px; margin: 20px 0 10px; }
.ota-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-top: 1px solid var(--ota-line); background: var(--ota-bg-alt); }

/*
 * Lưới, KHÔNG phải dải cuộn ngang. Thanh cuộn trên macOS chỉ hiện lúc đang cuộn, nên dải ngang bắt
 * khách ĐOÁN là còn ảnh phía sau. Lưới bày hết trong một tầm mắt.
 */
/*
 * Ảnh phòng chụp ngang tỉ lệ 4:3, nên khung cũng phải 4:3. Ép vào khung thấp hơn là `object-fit`
 * cắt mất trên dưới, tự làm xấu chính tấm ảnh khách sạn gửi lên.
 *
 * Giữ tỉ lệ mà không để khối ảnh cao quá thì phải giảm bề RỘNG mỗi tấm: ba đến bốn tấm xếp một
 * hàng thay vì hai hàng. Muốn xem to thì bấm vào, đã có hộp phóng ảnh.
 */
.ota-modal__photos { display: grid; gap: 8px; margin-bottom: 18px; }
.ota-modal__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ota-radius-sm); }

/*
 * Bố cục ĐỔI THEO SỐ ẢNH, vì không có lưới nào cân với mọi số lượng. Lưới ba cột cố định để bốn
 * tấm thì tấm thứ tư đứng một mình cả một hàng, nhìn như thiếu ảnh.
 *
 * 1-2 tấm: xếp ngang. 3-4 tấm: hai cột, chia hết. Từ 5 tấm: tấm đầu chiếm hai cột hai hàng, bốn
 * tấm còn lại lấp vừa khít phần bên phải.
 */
/* Một tấm thì không để nó chiếm cả bề ngang hộp thoại, cao gần 500px. */
.ota-modal__photos[data-count="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ota-modal__photos[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.ota-modal__photos[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.ota-modal__photos[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
/*
 * Từ 5 tấm: tấm đầu chiếm hai cột hai hàng. Hai hàng nhỏ cộng lại vừa đúng chiều cao tấm lớn nên
 * lưới kín, không hở ô nào.
 */
.ota-modal__photos[data-count="5"] { grid-template-columns: repeat(4, 1fr); }
.ota-modal__photos[data-count="5"] .ota-modal__photo:first-child { grid-column: span 2; grid-row: span 2; }
.ota-modal__photos[data-count="5"] .ota-modal__photo:first-child img { height: 100%; aspect-ratio: auto; }

@media (max-width: 991px) {
    /* Khối đặt phòng thôi bám dính và xuống dưới nội dung: hai cột dưới 992px là cột nào cũng hẹp. */
    .ota-detail { grid-template-columns: 1fr; gap: 30px; }
    .ota-detail__side { position: static; }
    .ota-room { grid-template-columns: 168px minmax(0, 1fr); }
    .ota-room__buy { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; align-items: center; text-align: left; }
}

@media (max-width: 575px) {
    /*
     * Ẩn hẳn khối "Giá mỗi đêm từ" ở đầu trang trên màn điện thoại.
     *
     * Ở đây nó lặp lại đúng con số đã nằm ngay cạnh mỗi hạng phòng bên dưới, mà lại chen giữa tên
     * khách sạn và lưới ảnh - đẩy phần khách cần xem xuống thêm một khúc trên màn hình vốn đã hẹp.
     * Trên desktop nó nằm ở góc phải cùng hàng với tên nên không lấy chỗ của ai, vì vậy giữ lại.
     */
    .ota-hotel__price { display: none; }

    /*
     * ═══ MÀN ĐIỆN THOẠI: ẢNH TRÊN, CHỮ TRÁI, GIÁ PHẢI ═══
     *
     * Bản trước xếp một cột nên giá và bộ đếm rơi xuống ĐÁY thẻ, dưới cả link "Xem chi tiết".
     * Muốn so giá giữa các hạng phòng, khách phải cuộn qua trọn khối thông tin của từng hạng rồi
     * mới thấy con số - mà giá lại chính là thứ họ quét mắt tìm đầu tiên.
     *
     * Nay ảnh kéo hết hàng trên, phần dưới chia hai: thông tin bên trái, giá và bộ đếm bên phải
     * ngang hàng với tên phòng. Cột phải để `auto` nên nó chỉ rộng đúng bằng bộ đếm.
     */
    .ota-room { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .ota-room__media { grid-column: 1 / -1; }
    .ota-room__buy {
        grid-column: 2; grid-row: 2;
        grid-template-columns: 1fr; align-self: start;
        justify-items: end; text-align: right; min-width: 0;
    }


    /* Màn hẹp: mọi bố cục về hai cột, tấm đầu kéo hết hàng trên. */
    .ota-modal__photos[data-count] { grid-template-columns: repeat(2, 1fr); }
    .ota-modal__photos[data-count] .ota-modal__photo:first-child { grid-column: span 2; grid-row: auto; }
}

/* ── Bộ đếm số phòng ──────────────────────────────────────────────────────── */

/*
 * Cỡ chữ ngang với nút bên cạnh. Đây là thao tác CHÍNH của cả trang - khách vào để chọn phòng - mà
 * chữ nhỏ hơn nút phụ thì mắt lướt qua mất.
 */
.ota-stepper {
    display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid var(--ota-line); border-radius: 999px; padding: 4px; background: #fff;
}
.ota-stepper__btn {
    position: relative;
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ota-brand-soft);
    color: var(--ota-brand-dark); font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
    display: grid; place-items: center; transition: background .15s, color .15s;
}
.ota-stepper__btn:hover:not(:disabled) { background: var(--ota-brand); color: #fff; }
.ota-stepper__btn:disabled { background: transparent; color: #c3ccd8; cursor: default; }
.ota-stepper__value { min-width: 56px; text-align: center; font-size: 15px; font-weight: 600; }
.ota-stepper__value b { font-size: 17px; }
/* Trần số phòng in nhạt: nó là thông tin phụ, không phải con số khách đang chỉnh. */
.ota-stepper__max { color: var(--ota-ink-soft); font-size: 13px; font-weight: 500; }

/*
 * Bộ đếm thu gọn ở màn điện thoại. Cột phải rộng bao nhiêu thì cột chữ mất bấy nhiêu: ở bề rộng
 * gốc 140px, cột trái chỉ còn 160px và ba dòng thông tin phòng ("Tiêu chuẩn 2 khách, tối đa 4",
 * "Miễn phí 1 em bé dưới 6 tuổi") vỡ làm đôi.
 *
 * ⛔ Khối này PHẢI đứng SAU các luật cơ sở ở trên. `@media` KHÔNG làm tăng đặc hiệu, nên đặt nó
 * lên trước thì `.ota-stepper { gap: 3px }` ở dưới thắng và không có gì thay đổi - triệu chứng là
 * sửa CSS xong đo lại thấy y nguyên, rất dễ tưởng chưa nạp lại tệp.
 *
 * ⚠️ Nút NHÌN nhỏ hơn nhưng VÙNG BẤM không nhỏ đi: `::after` phủ một ô 44x44 vô hình quanh nút,
 * đúng mức Apple HIG đặt cho vùng chạm. Thu kích thước hiển thị mà để vùng chạm co theo là đổi một
 * lỗi bố cục lấy một lỗi thao tác - ngón tay trượt ra ngoài nút thì khách bấm hai ba lần mới thêm
 * được một phòng.
 */
@media (max-width: 575px) {
    /*
     * `gap: 2px` chứ không 0: số dính sát mép hai nút tròn nhìn rất chật, thấy rõ nhất khi trần
     * phòng lên hai chữ số ("22/66").
     *
     * `min-width: 0` để ô số tự co giãn theo nội dung. Trần cố định 30px đủ cho "0/6" nhưng thiếu
     * cho "22/66", và nới trần lên cho vừa số dài nhất thì mọi hạng phòng đều gánh chỗ thừa đó -
     * mà cột phải rộng thêm bao nhiêu là cột chữ mất bấy nhiêu.
     */
    .ota-stepper { gap: 2px; padding: 2px; }
    .ota-stepper__btn { width: 28px; height: 28px; font-size: 17px; }
    .ota-stepper__btn::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    .ota-stepper__value { min-width: 0; padding: 0 2px; font-size: 14px; }
    .ota-stepper__value b { font-size: 16px; }
    .ota-stepper__max { font-size: 12px; }
    .ota-room__price b { font-size: 17px; }
    /* Chữ "/ đêm" xuống dòng riêng: để cùng hàng với giá là cột phải phải rộng thêm ~34px. */
    .ota-room__price em { display: block; margin-left: 0; }
}
.ota-room__soldout { color: var(--ota-ink-soft); font-size: 14px; }

/* ═══ Trang chuyển khoản ═══ */

/*
 * Khung hẹp cho trang chỉ có một luồng đọc duy nhất. Cột chữ dài quá 70 ký tự là mắt phải quét
 * ngang rồi tìm lại đầu dòng - trang này toàn số và mã, đọc nhầm một ký tự là chuyển sai.
 */
.ota-wrap--narrow { max-width: 620px; }

.ota-lead { color: var(--ota-ink-soft); font-size: 15px; margin: 0 0 22px; }

/* ═══ Trang hoàn tất đơn ═══ */

/*
 * ⚠️ Hai biến khoảng cách khai ở CẢ `.ota-done` lẫn `.ota-done__grid`.
 *
 * Khối đơn nay còn dùng trong hộp thoại "Xem chi tiết đơn" ở trang tài khoản, nơi KHÔNG có
 * `.ota-done` bọc ngoài. Khai mỗi ở `.ota-done` thì trong hộp thoại hai biến không tồn tại, mọi
 * `margin`/`padding` gọi tới chúng thành giá trị không hợp lệ và bị bỏ qua - kết quả là chữ dính
 * sát vạch kẻ, các mục chồng lên nhau, mà không có lỗi nào báo.
 *
 * `.ota-done` vẫn phải giữ vì `.ota-done__head` (lời cảm ơn) nằm ngoài lưới.
 */
.ota-done,
.ota-done__grid {
    --gap-block: 24px;
    --gap-group: 18px;
}

.ota-done {
    padding-top: 30px; padding-bottom: 48px;
}

/* Lời cảm ơn: căn giữa, vì nó là một lời nói chứ không phải dữ liệu để đối chiếu theo cột. */
.ota-done__head { text-align: center; margin-bottom: var(--gap-block); }
.ota-done__tick {
    width: 52px; height: 52px; margin: 0 auto 12px;
    display: grid; place-items: center;
    font-size: 26px; color: #1a7f4b; background: #e6f6ed; border-radius: 50%;
}
.ota-done__title { font-size: 23px; line-height: 1.35; margin: 0 0 6px; }
.ota-done__lead { margin: 0 0 14px; color: var(--ota-ink-soft); font-size: 14.5px; line-height: 1.65; }

/*
 * ═══ HAI CỘT: TRÁI LÀ ĐƠN, PHẢI LÀ VIỆC PHẢI LÀM ═══
 *
 * Cùng cách chia với trang đặt phòng, nên khách đọc tiếp một mạch quen thuộc thay vì phải học lại
 * bố cục mới ngay ở bước cuối.
 *
 * Cột phải hẹp hơn: nó là một khối thao tác, còn cột trái là văn bản để đọc.
 */
.ota-done__grid { display: flex; flex-direction: column; gap: var(--gap-block); }
.ota-done__col { display: flex; flex-direction: column; gap: var(--gap-block); min-width: 0; }

.ota-done__card {
    background: #fff; border: 1px solid var(--ota-line);
    border-radius: var(--ota-radius); padding: 22px 24px;
}
.ota-done__card-title { font-size: 17px; margin: 0 0 var(--gap-group); }

/* Mỗi cụm thông tin cách nhau bằng một đường kẻ nhạt: đủ để mắt tách nhóm, không thành khung hộp. */
.ota-done__block + .ota-done__block { margin-top: var(--gap-group); padding-top: var(--gap-group); border-top: 1px solid var(--ota-line); }
.ota-done__block-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ota-ink-soft); margin: 0 0 8px; }

.ota-done__hotel { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.ota-done__addr { margin: 0; color: var(--ota-ink-soft); font-size: 14px; }

.ota-done__rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ota-done__rooms li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14.5px; }
.ota-done__rooms b { white-space: nowrap; }

.ota-done__facts { margin: 0; }
.ota-done__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0; }
.ota-done__facts dt { margin: 0; color: var(--ota-ink-soft); font-size: 14px; white-space: nowrap; }
.ota-done__facts dd { margin: 0; text-align: right; font-size: 14.5px; word-break: break-word; }
.ota-done__facts em { font-style: normal; font-size: 13.5px; color: var(--ota-ink-soft); }

/*
 * Đồng hồ đếm ngược: nền vàng nhạt vì đây là thứ NHẮC, không phải báo lỗi. Dùng màu đỏ thì khách
 * tưởng đơn đã hỏng trong khi chỗ vẫn đang được giữ.
 */
.ota-done__timer {
    margin: 0 0 var(--gap-group); padding: 10px 14px; text-align: center;
    background: #fff8e6; border: 1px solid #f0dfae; border-radius: var(--ota-radius-sm);
    font-size: 14px; color: var(--ota-ink);
}
.ota-done__timer b { font-variant-numeric: tabular-nums; }
.ota-done__timer.is-expired { background: var(--ota-bg-alt); border-color: var(--ota-line); color: var(--ota-ink-soft); }

.ota-done__money { margin: 0 0 var(--gap-group); }
.ota-done__money > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 14px; }
.ota-done__money dt { margin: 0; color: var(--ota-ink-soft); }
.ota-done__money dd { margin: 0; white-space: nowrap; }

/* Số tiền là con số khách phải gõ vào ứng dụng ngân hàng - để to nhất khối. */
.ota-done__amount {
    text-align: center; padding: 16px 0;
    border-top: 1px solid var(--ota-line); border-bottom: 1px solid var(--ota-line);
}
.ota-done__amount span { display: block; color: var(--ota-ink-soft); font-size: 13.5px; margin-bottom: 4px; }
.ota-done__amount b { font-size: 28px; color: var(--ota-price); }

/* Mã QR nằm trên, thông tin tài khoản nằm dưới: cột phải hẹp, xếp ngang thì cả hai đều bị bóp. */
.ota-done__bank { margin-top: var(--gap-group); }
.ota-done__qr { margin: 0 0 var(--gap-group); text-align: center; }
.ota-done__qr img { display: block; margin: 0 auto; width: 200px; height: 200px; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm); }
.ota-done__qr figcaption { margin-top: 6px; font-size: 12.5px; color: var(--ota-ink-soft); }

.ota-done__account { margin: 0; }
.ota-done__account > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.ota-done__account > div + div { border-top: 1px dashed var(--ota-line); }
.ota-done__account dt { margin: 0; color: var(--ota-ink-soft); font-size: 13.5px; white-space: nowrap; }
.ota-done__account dd { margin: 0; text-align: right; font-size: 14px; word-break: break-word; }
/* Số tài khoản và mã đơn dùng chữ đều nét: dễ soi từng ký tự khi gõ lại. */
.ota-done__account dd b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }

.ota-copy {
    margin-left: 8px; padding: 3px 9px; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--ota-brand-dark); background: var(--ota-brand-soft);
    border: 0; border-radius: 6px; cursor: pointer;
}
.ota-copy:hover { background: #dbe7fd; }
.ota-copy.is-done { color: #1a7f4b; background: #e6f6ed; }

.ota-done__points { list-style: none; margin: var(--gap-group) 0 0; padding: var(--gap-group) 0 0; border-top: 1px solid var(--ota-line); display: grid; gap: 8px; }
.ota-done__points li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ota-ink-soft); line-height: 1.5; }
.ota-done__points li::before { content: '✓'; position: absolute; left: 0; color: var(--ota-brand); font-weight: 700; }

.ota-done__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--gap-group); }
.ota-done__actions .ota-btn { flex: 1 1 140px; justify-content: center; }

@media (min-width: 992px) {
    /* Cột trái rộng hơn: nó là văn bản để đọc, cột phải là một khối thao tác gọn. */
    .ota-done__grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; column-gap: 26px; }
}

@media (max-width: 575px) {
    .ota-done__card { padding: 18px; }
    .ota-done__title { font-size: 20px; }
    .ota-done__amount b { font-size: 25px; }
    /* Nhãn và giá trị chồng dọc: ở màn hẹp hai bên ép nhau làm mã đơn xuống dòng giữa chừng. */
    .ota-done__account > div { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ota-done__account dd { text-align: left; }
}

/*
 * Danh sách phòng lúc đang hỏi lại chỗ trống. Chỉ mờ đi và chặn bấm, KHÔNG che bằng lớp phủ hay
 * vòng quay: dữ liệu cũ vẫn đúng cho tới khi có dữ liệu mới, giấu nó đi chỉ làm trang chớp một
 * nhịp trắng rồi hiện lại gần y hệt.
 */
.ota-rooms.is-checking { opacity: .45; pointer-events: none; transition: opacity .12s ease; }

/* Dòng báo kết quả kiểm phòng, ngay dưới nút "Xem phòng trống". */
.ota-book__msg { margin: 10px 0 0; font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-book__msg.is-error { color: var(--ota-price); }

/* Khung ảnh phòng là nút bấm: gỡ sạch trang trí mặc định của <button>. */
button.ota-room__media { padding: 0; border: 0; cursor: pointer; display: block; width: 100%; }

/* Đường phụ thì viết như một liên kết, không phải nút to tranh chỗ với nút đặt. */
.ota-room__more {
    margin-top: 9px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px;
    color: var(--ota-brand); cursor: pointer; text-align: left;
}
.ota-room__more:hover { text-decoration: underline; }

.ota-ticks--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 14px; }
.ota-ticks--wide b { color: var(--ota-ink); }

.ota-modal__price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.ota-modal__price b { font-size: 22px; }
.ota-modal__price em { font-style: normal; font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-modal__guests { margin: 0 0 4px; color: var(--ota-ink-soft); font-size: 14px; }
.ota-modal__photo { display: block; flex: 0 0 auto; cursor: zoom-in; }
.ota-modal__pick { display: flex; align-items: center; gap: 10px; }
.ota-modal__pick-label { font-size: 14.5px; color: var(--ota-ink); font-weight: 500; }

/* ── Thanh giỏ phòng ở đáy màn hình ───────────────────────────────────────── */

/*
 * Chỉ hiện khi giỏ có phòng. Nút "Xem phòng trống" ở cột phải và nút đặt đơn là hai việc khác
 * nhau; để cạnh nhau thì khách phải đoán bấm cái nào, nên nút đặt đẩy hẳn xuống đáy màn hình và
 * chỉ xuất hiện sau khi đã chọn được phòng.
 */
.ota-cart {
    position: fixed; inset: auto 0 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--ota-line);
    box-shadow: 0 -6px 24px rgba(16, 32, 47, .1);
    animation: ota-cart-up .18s ease-out;
}
@keyframes ota-cart-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/*
 * Chừa chỗ dưới trang cho thanh giỏ ở MỌI bề rộng màn hình. Thanh nằm đè lên trang, không có chỗ
 * trống này thì nó che mất mấy dòng cuối chân trang - và chân trang là nơi để địa chỉ, hotline,
 * chính sách, tức là đúng những thứ khách tìm khi phân vân trước lúc đặt.
 */
body:has(.ota-cart:not([hidden])) { padding-bottom: 104px; }
@media (prefers-reduced-motion: reduce) { .ota-cart { animation: none; } }

.ota-cart__inner { display: flex; align-items: center; gap: 20px; padding-top: 11px; padding-bottom: 11px; }
.ota-cart__main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ota-cart__line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.ota-cart__label { color: var(--ota-ink-soft); }
.ota-cart__list { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.ota-cart__row { color: var(--ota-ink); }
.ota-cart__row b { color: var(--ota-ink); }
/*
 * Dấu phẩy vẽ bằng `::after` nên nó dính sát tên đứng trước; chèn thành thẻ riêng thì khoảng cách
 * của flex đẩy nó ra giữa hai tên, đọc thành một dấu lơ lửng.
 */
.ota-cart__row:not(:last-child)::after { content: ','; color: var(--ota-ink-soft); }
.ota-cart__dates { color: var(--ota-ink); font-weight: 600; }
/* Đây là chỗ bấm được, nên nó được phép mang màu thương hiệu. */
.ota-cart__change {
    padding: 0; border: 0; background: none; font: inherit; font-size: 13px;
    color: var(--ota-brand); cursor: pointer; text-decoration: underline;
}
.ota-cart__change:hover { color: var(--ota-brand-dark); }
.ota-cart__sum { text-align: right; white-space: nowrap; }
.ota-cart__sum span { display: block; font-size: 12.5px; color: var(--ota-ink-soft); }
.ota-cart__sum b { font-size: 19px; color: var(--ota-price); }

/* ── Lịch chọn ngày ───────────────────────────────────────────────────────── */

/*
 * flatpickr để cỡ chữ mặc định khá lớn (ô ngày 14px, tên tháng 17px, ô cao 39px) nên trên một khối
 * rộng 340px nó trông thô và chiếm gần nửa màn hình. Hạ toàn bộ một nhịp và bo góc theo khung của
 * theme; số vẫn đọc rõ ở 13px vì nền trắng và chữ đậm.
 */
/*
 * ⛔ CHỈ đổi cỡ chữ, chiều cao và màu. TUYỆT ĐỐI không đụng `width`, `max-width` hay `flex-basis`
 * của `.flatpickr-days`, `.dayContainer` và `.flatpickr-day`.
 *
 * flatpickr chia bảy cột bằng chiều rộng cố định của `.dayContainer` (307.875px) cộng
 * `flex-basis: 14.2857%` trên từng ô. Bản đầu ngày 2026-08-30 đặt `width: auto` cho container và
 * `max-width: 36px` cho ô: bảy cột co lại còn container giữ nguyên, các số dính vào nhau và cả
 * bảng lệch hẳn khỏi khung.
 */
.flatpickr-calendar {
    font-family: var(--ota-font); font-size: 13px;
    border-radius: var(--ota-radius-sm); box-shadow: var(--ota-shadow-lift); border: 1px solid var(--ota-line);
}
.flatpickr-months { padding-top: 4px; }
.flatpickr-current-month { font-size: 14.5px; font-weight: 600; padding-top: 5px; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-size: 14.5px; font-weight: 600; }
.flatpickr-weekday { font-size: 11.5px; font-weight: 600; color: var(--ota-ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.flatpickr-day {
    height: 34px; line-height: 34px; border-radius: 8px;
    font-size: 13px; color: var(--ota-ink); border: 0; cursor: pointer;
}
.flatpickr-day:hover { background: var(--ota-brand-soft); }
.flatpickr-day.today { box-shadow: inset 0 0 0 1px var(--ota-brand); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: var(--ota-brand); color: #fff; }
/* Dải giữa hai đầu tô nhạt, bo vuông để cả dải đọc thành một khối liền. */
.flatpickr-day.inRange { background: var(--ota-brand-soft); border-radius: 0; box-shadow: none; }
.flatpickr-day.startRange { border-radius: 8px 0 0 8px; }
.flatpickr-day.endRange { border-radius: 0 8px 8px 0; }
/*
 * ⛔ Ba lớp này KHÔNG cùng nghĩa, đừng gộp lại một luật màu.
 *
 * `flatpickr-disabled` là ngày quá khứ - `minDate: 'today'` đã khoá thật, bấm không ăn.
 * `prevMonthDay` / `nextMonthDay` chỉ nói ô đó thuộc tháng khác, KHÔNG nói bị khoá: ngày 02-06
 * của tháng sau vẫn chọn được bình thường.
 *
 * Gộp cả ba vào `color: #c3ccd8` làm ngày chọn được trông y hệt ngày bị khoá, và khách không biết
 * mình còn đặt được sang tháng sau hay không. Chỉ ô nào THẬT SỰ bị khoá mới được làm mờ.
 */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #c3ccd8;
    background: transparent;
    cursor: not-allowed;
}
.flatpickr-day.prevMonthDay:not(.flatpickr-disabled),
.flatpickr-day.nextMonthDay:not(.flatpickr-disabled) { color: var(--ota-ink); cursor: pointer; }

/*
 * Chừa lề cho ô ngày ĐƯỢC CHỌN ở cột ngoài cùng.
 *
 * Ô thường trong suốt nên sát viền cũng không ai thấy. Ô được chọn có nền đặc và bo góc, dính vào
 * viền lịch là lộ ngay - nhất là ngày cuối tuần (cột CN) và ngày đầu tuần (cột T2), hai cột chạm
 * mép trái phải.
 *
 * Đệm ở lớp BỌC (`.flatpickr-days`) chứ không ở từng ô: đụng vào chiều rộng của ô là bảy cột lệch
 * nhau (đã vỡ một lần ngày 2026-08-30). Lớp bọc rộng ra thì cả bảng dịch vào trong, cột vẫn đều.
 */
.flatpickr-days { padding: 0 8px 8px; box-sizing: content-box; }
.flatpickr-calendar { width: auto; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ota-brand); }

@media (max-width: 991px) {
    /*
     * Điện thoại: ô chọn ngày phải đứng TRƯỚC danh sách phòng. Chọn ngày rồi mới xem phòng mới là
     * đúng thứ tự khách nghĩ; bắt cuộn hết danh sách phòng mới thấy lịch là đi ngược.
     */
    .ota-detail__side { order: -1; }
    .ota-detail__main { order: 0; }
}

@media (max-width: 767px) {
    body:has(.ota-cart:not([hidden])) { padding-bottom: 176px; }
    .ota-cart__inner { flex-wrap: wrap; gap: 8px 10px; }
    /*
     * Bỏ nhãn "Ngày nhận - trả phòng" ở màn hẹp: chính hai con số ngày đã nói rõ đó là gì, còn giữ
     * nhãn thì cụm ngày dài quá một dòng và đẩy nút "Đổi ngày" rơi xuống dòng riêng.
     */
    .ota-cart__line--dates .ota-cart__label { display: none; }
    .ota-cart__main { flex: 1 1 100%; order: -1; }
    .ota-cart__sum { flex: 1; text-align: left; }
    .ota-cart__sum b { font-size: 17px; }
    .ota-cart__inner .ota-btn { flex: 0 0 auto; }

}

/* ── Hộp thoại phóng ảnh ──────────────────────────────────────────────────── */

/*
 * Là `<dialog>` thứ hai nên nó xếp trên hộp thoại hạng phòng, không phải đóng cái nào đi.
 * Nền trong suốt, chỉ có tấm ảnh và ba nút, để mắt bám vào ảnh.
 */
.ota-zoom {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    padding: 0; border: 0; background: transparent;
    display: none; align-items: center; justify-content: center; gap: 10px;
}
.ota-zoom[open] { display: flex; }
.ota-zoom::backdrop { background: rgba(8, 14, 23, .9); }
.ota-zoom img { max-width: min(1200px, 88vw); max-height: 86vh; object-fit: contain; border-radius: var(--ota-radius-sm); }

.ota-zoom__close, .ota-zoom__nav {
    border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
    border-radius: 50%; display: grid; place-items: center; line-height: 1;
    transition: background .15s;
}
.ota-zoom__close:hover, .ota-zoom__nav:hover { background: rgba(255, 255, 255, .3); }
.ota-zoom__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; font-size: 26px; }
.ota-zoom__nav { width: 46px; height: 46px; font-size: 30px; flex: 0 0 auto; }
/* Một tấm ảnh thì hai nút chuyển không có việc gì để làm. */
.ota-zoom[data-single="1"] .ota-zoom__nav { visibility: hidden; }

@media (max-width: 575px) {
    .ota-zoom__nav { width: 38px; height: 38px; font-size: 25px; }
    .ota-zoom img { max-width: 78vw; }
}

@media (max-width: 575px) {
    .ota-modal__foot { flex-wrap: wrap; }
    .ota-modal__foot .ota-btn { width: 100%; }
}

/* ── Dòng thông tin gốc của hạng phòng ────────────────────────────────────── */

/*
 * View, diện tích, giường, sức chứa. Đây là phần khách quét mắt để so hai hạng phòng, nên xếp dọc
 * thành danh sách chứ không gộp vào đám chip tiện nghi - chip nào cũng giống chip nào thì mắt
 * không bắt được thông tin nào là chính.
 */
.ota-facts { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 5px; }
.ota-fact { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ota-ink-soft); }
.ota-fact__icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ota-ink-soft); }
/* Ưu đãi tô xanh để nhảy ra khỏi danh sách xám. */
.ota-fact--is-perk { color: #1a7f4b; font-weight: 600; }
.ota-fact--is-perk .ota-fact__icon { color: #1a7f4b; }

/* Trong modal có chỗ rộng hơn, xếp hai cột cho đỡ thành một cột chữ dài. */
.ota-facts--full { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 7px 20px; margin: 10px 0 16px; }

/* Số đêm đứng cạnh nhãn ô ngày, chữ nhỏ để không tranh chỗ với chính nhãn. */
/* ⛔ Màu thương hiệu dành cho thứ bấm được. Đây là chữ đọc, giữ màu chữ phụ. */
.ota-field__note { color: var(--ota-ink-soft); font-weight: 500; }

@media (max-width: 575px) {
    .ota-modal__photos[data-count="3"],
    .ota-modal__photos[data-count="4"],
    .ota-modal__photos[data-count="5"] { grid-template-columns: repeat(2, 1fr); }
    .ota-modal__photos[data-count="5"] .ota-modal__photo:first-child { grid-column: span 2; grid-row: auto; }
    .ota-modal__photos[data-count="5"] .ota-modal__photo:first-child img { aspect-ratio: 4 / 3; }
}

/* Hiệu ứng trượt khi chuyển ảnh trong hộp phóng to. */
.ota-zoom img[data-enter="right"] { opacity: 0; transform: translateX(26px); }
.ota-zoom img[data-enter="left"] { opacity: 0; transform: translateX(-26px); }
.ota-zoom img[data-enter="none"] { opacity: 0; transform: scale(.97); }
.ota-zoom img[data-enter="done"] { opacity: 1; transform: none; transition: opacity .22s ease, transform .22s ease; }

@media (prefers-reduced-motion: reduce) {
    .ota-zoom img[data-enter] { opacity: 1; transform: none; transition: none; }
}

/*
 * Giờ nhận và trả phòng: danh sách trơn, KHÔNG dấu tick. Dấu tick ở `.ota-ticks` mang nghĩa "khách
 * sạn có thứ này", còn giờ nhận trả là ràng buộc chứ không phải tiện nghi được tặng.
 */
.ota-hours { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; color: var(--ota-ink-soft); font-size: 14.5px; }
.ota-hours b { color: var(--ota-ink); }

/* Tiện nghi nổi bật in đậm ngay trong danh sách, không tách ra thành khối lặp lại. */
.ota-ticks li.is-hot { color: var(--ota-ink); font-weight: 600; }
.ota-ticks li.is-hot::before { color: var(--ota-brand-dark); }

/*
 * Hàng cuối chân trang: bản quyền bên trái, dòng ghi công bên phải. Hai câu này cùng loại - chú
 * thích về quyền và nguồn gốc - nên xếp một hàng thay vì để bản quyền lạc trong cột địa chỉ.
 */
.ota-footer__bottom {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.ota-footer__bottom .ota-footer__copyright { margin: 0; }
.ota-footer__credit {
    margin: 0; text-align: right; font-size: 13px; color: rgba(255, 255, 255, .55);
}
.ota-footer__credit a { color: rgba(255, 255, 255, .85); font-weight: 600; }
.ota-footer__credit a:hover { color: #fff; text-decoration: underline; }

/*
 * "Liên hệ" khi hạng phòng chưa có giá: là chỗ bấm gọi được nên mang màu thương hiệu, không phải
 * màu giá tiền - nó không phải một mức giá.
 */
a.ota-room__price--ask, a.ota-money--ask { color: var(--ota-brand); font-weight: 700; text-decoration: none; }
a.ota-room__price--ask:hover, a.ota-money--ask:hover { color: var(--ota-brand-dark); text-decoration: underline; }

/* ── Trang xác nhận đặt phòng ─────────────────────────────────────────────── */

.ota-notice { text-align: center; padding: 40px 20px; }
.ota-notice p { color: var(--ota-ink-soft); margin-bottom: 18px; }

/* Lời nhắc giữa trang: đơn vẫn đặt được, chỉ thiếu vài hạng phòng. Khác hộp lỗi choán cả trang nên
   phải gọn, căn trái, và nằm ngay trên phần nội dung mà nó nói tới. */
.ota-notice--warn {
    text-align: left;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    border: 1px solid var(--ota-warn-line, #f0d48a);
    background: var(--ota-warn-bg, #fdf6e3);
    color: var(--ota-warn-ink, #7a5d09);
    font-size: 14px;
    line-height: 1.5;
}

/*
 * Hàng ô nhập: ba cột là mặc định, hàng đôi khai riêng ở khối dưới. LỀ do khối "Trang đặt phòng"
 * bên dưới đặt - ở đây chỉ có cách chia cột và khoảng hở giữa các ô.
 */
.ota-guest-form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Vượt sức chứa: đổi màu cả dòng nhắc để khách thấy ngay mình vừa gõ quá. */
.ota-guest-form__note.is-over { color: var(--ota-price); font-weight: 600; }
.ota-field input.is-over { border-color: var(--ota-price); }

.ota-book__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ota-book__total b { font-size: 21px; color: var(--ota-price); }

/* ═══ Trang đặt phòng ═══ */

/*
 * ═══ MỘT THANG KHOẢNG CÁCH DUY NHẤT ═══
 *
 * Trước đây mỗi thành phần tự chọn lấy một con số: khối cách nhau 10px cộng 12px, ghi chú 18px, ô
 * tick 14px, panel 10px. Đứng riêng thì cái nào cũng có lý, xếp cạnh nhau thì không có nhịp nào -
 * mắt không đoán được đâu là hết một mục.
 *
 * Nay chỉ còn bốn bậc, và mọi luật bên dưới đều gọi qua biến. Muốn nới hay thu cả trang thì sửa
 * đúng bốn dòng này.
 */
.ota-checkout {
    --gap-block: 26px;   /* giữa hai mục lớn */
    --gap-group: 16px;   /* giữa các cụm trong cùng một mục */
    --gap-row: 12px;     /* giữa hai hàng ô nhập */
    --gap-note: 6px;     /* chú thích dính vào thứ nó giải thích */

    padding-top: 18px;
    padding-bottom: 40px;
}
.ota-checkout > .ota-wrap > .ota-block__title:first-child { margin-top: 0; margin-bottom: 16px; }


/*
 * ═══ HAI CỘT ĐỘC LẬP ═══
 *
 * Mỗi cột chảy liên tục theo chiều cao thật của nó. Điện thoại thì hai cột xếp chồng, ra đúng thứ
 * tự đọc: khách sạn → phòng → thời gian → khách → liên hệ → tiền, tiền nằm ngay trên nút bấm.
 *
 * ⛔ KHÔNG quay lại cách xếp mọi khối thành một mạch phẳng rồi gán `grid-row` cho từng cái. Lưới
 * ràng hai ô cùng hàng phải cao bằng nhau; khối khách sạn cao chưa bằng một phần ba hàng ô "Số
 * lượng khách" đối diện, nên phần dư thành một mảng trắng hơn trăm pixel ngay giữa tên khách sạn
 * và danh sách phòng - và mỗi hàng lại hụt một kiểu khác. Đó chính là chỗ trang trông xộc xệch.
 */
.ota-checkout__grid { display: flex; flex-direction: column; gap: var(--gap-block); }
.ota-checkout__col { display: flex; flex-direction: column; gap: var(--gap-block); min-width: 0; }

/* Khoảng cách giữa các khối do CỘT đặt, không phải `margin` của từng khối. */
.ota-cbox { margin: 0; }
.ota-cbox__title { font-size: 16px; margin: 0 0 var(--gap-group); }
.ota-cbox__addr { margin: var(--gap-note) 0 0; font-size: 14px; color: var(--ota-ink-soft); }

/*
 * Khối khách sạn KHÔNG đóng khung - xem lý do ở `checkout.php`. Chỉ khối tiền giữ nền và viền, vì
 * nó phải nổi lên khỏi vùng nhập liệu: đó là con số khách kiểm lại lần cuối trước khi bấm.
 */
.ota-cbox--money {
    background: #fff; border: 1px solid var(--ota-line);
    border-radius: var(--ota-radius); padding: 18px 20px;
}
.ota-cbox--hotel .ota-cbox__title { margin-bottom: var(--gap-note); }
.ota-cbox--hotel .ota-book__sub { margin-bottom: 0; }

/* ── Phòng đã chọn ── */
.ota-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-group); }
.ota-summary > li { padding-bottom: var(--gap-group); border-bottom: 1px solid var(--ota-line); }
.ota-summary > li:last-child { padding-bottom: 0; border-bottom: 0; }
/*
 * Dòng đầu đọc thành MỘT câu: tên phòng · giá mỗi đêm nhân mấy đêm · thành tiền.
 *
 * Phép nhân đứng SÁT bên trái con số nó cộng ra, ở giữa dòng. Bản trước để nó xuống dòng dưới,
 * cùng hàng với mô tả phòng - hai thứ vốn là một phép tính lại cách nhau một dòng, mắt phải đi
 * vòng mới ghép được.
 *
 * Tên phòng co giãn (`min-width: 0` cho phép nó xuống dòng khi cột hẹp), còn phép nhân và thành
 * tiền giữ nguyên bề rộng: chúng là con số, cắt dòng giữa chừng là đọc sai.
 */
.ota-summary__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; flex-wrap: wrap;
}
.ota-summary__name { flex: 1 1 auto; min-width: 0; }
.ota-summary__price { margin: 0; font-size: 13px; color: var(--ota-ink-soft); white-space: nowrap; }
.ota-summary__perk { color: #1a7f4b; font-weight: 600; }
/* Một dòng văn xuôi thay cho sáu dòng có biểu tượng - xem `partial-room-line.php`. */
.ota-room-line { margin: 4px 0 0; font-size: 14px; color: var(--ota-ink-soft); }

/* ── Thời gian lưu trú: thứ đứng TRƯỚC ngày, cùng một dòng ── */
.ota-stay { margin: 0; }
.ota-stay > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.ota-stay dt { margin: 0; font-size: 14px; color: var(--ota-ink-soft); }
.ota-stay dd { margin: 0; text-align: right; }
.ota-stay em { font-style: normal; font-size: 13.5px; color: var(--ota-ink-soft); }

/* ── Ô nhập ── */
.ota-field__req { color: var(--ota-price); font-weight: 700; }
/* Khoảng tuổi trong nhãn: cùng cỡ chữ nhưng nhạt hơn, để tên nhóm khách vẫn là thứ đọc trước. */
.ota-field__age { font-style: normal; opacity: .75; }
.ota-field--inline { display: flex; align-items: center; gap: 12px; }
.ota-field--inline > span { margin-bottom: 0; }
.ota-field--inline input { width: 90px; }

/*
 * Ô giờ: bấm vào ĐÂU trong ô cũng bung bảng chọn giờ, không bắt trúng cái đồng hồ nhỏ bên phải.
 * Cái biểu tượng đó rộng chừng 16px trong một ô rộng gần 300px - phần còn lại bấm vào thì không có
 * gì xảy ra, và khách tưởng ô bị khoá.
 */
.ota-field input[type="time"] { cursor: pointer; }

/* Báo lỗi tiếng Việt thay cho bong bóng mặc định của trình duyệt - xem `theme.js`. */
.ota-field__error { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ota-price); }

/*
 * Dòng phản hồi dưới ô giờ. Chỉ hiện khi thật sự có khoản tiền, nên luôn mang màu thương hiệu -
 * khách đọc được ngay con số sắp phải trả.
 */
.ota-field__hint { display: block; margin-top: 5px; font-size: 12.5px; font-style: normal; color: var(--ota-brand-dark); font-weight: 600; }
.ota-field input.is-invalid { border-color: var(--ota-price); }

/* ── Bậc phụ thu nhận sớm / trả muộn ── */
.ota-tiers__title { margin: var(--gap-group) 0 0; font-size: 13px; font-weight: 600; }
.ota-tiers {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: grid; gap: 4px; font-size: 13px;
}
.ota-tiers > li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0; border-bottom: 1px dashed var(--ota-line);
}
.ota-tiers > li:last-child { border-bottom: 0; }
.ota-tiers span { color: var(--ota-ink-soft); }
.ota-tiers b { white-space: nowrap; }

/*
 * Giường phụ: nền vàng nhạt vì đây là CẢNH BÁO nhẹ, không phải mục bình thường của biểu mẫu. Dùng
 * màu giá (đỏ) thì thành báo lỗi, mà khách chưa làm gì sai.
 */
.ota-extra-bed {
    margin-top: var(--gap-group); padding: 14px 16px;
    background: #fff8e6; border: 1px solid #f0dfae; border-radius: var(--ota-radius-sm);
}
.ota-extra-bed__note { margin: 0; font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-extra-bed__note a { color: var(--ota-brand-dark); font-weight: 600; }
.ota-extra-bed__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: var(--gap-row); flex-wrap: wrap;
}
.ota-extra-bed__price { white-space: nowrap; }

/* ── Ô tick mở ra một khối ── */
.ota-check { display: flex; align-items: center; gap: 9px; margin-top: var(--gap-group); font-size: 14.5px; cursor: pointer; }
.ota-check input { width: 17px; height: 17px; accent-color: var(--ota-brand); cursor: pointer; }
.ota-optional__panel {
    margin-top: var(--gap-row); padding: 16px 18px; background: var(--ota-bg-alt);
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
}
/*
 * Trong panel, hàng ô nhập là thứ ĐẦU TIÊN nên không cần lề trên, và câu chú thích ngay dưới nó
 * thuộc về chính nó nên dính sát. Bản trước panel đệm dưới 18px còn hàng ô lại đệm dưới 10px nữa,
 * cộng thành một dải trắng dày hơn cả khoảng cách giữa hai mục.
 */
.ota-optional__panel > :first-child { margin-top: 0; }
.ota-optional__panel > :last-child { margin-bottom: 0; }
.ota-optional__note { margin: var(--gap-note) 0 0; font-size: 13px; color: var(--ota-ink-soft); line-height: 1.6; }

/* ── Khối tiền ── */
/*
 * Bốn tầng, đọc từ trên xuống là đúng thứ tự phép cộng:
 *
 *   1. `.ota-money-lines`      các khoản cộng thêm (giường phụ, nhận sớm, trả muộn)
 *   2. `[data-money-subtotal]` tổng trước thuế   - chỉ hiện khi có thuế
 *   3. `[data-money-tax]`      tiền thuế         - chỉ hiện khi có thuế
 *   4. `.ota-book__total`      tổng cuối
 *
 * Đặt tổng lên trên thì khách đọc con số cuối trước rồi mới thấy nó gồm những gì.
 */
.ota-money-lines { display: grid; gap: 6px; font-size: 13.5px; }
.ota-money-lines > div,
.ota-money-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ota-money-lines span,
.ota-money-row span { color: var(--ota-ink-soft); }
.ota-money-lines b,
.ota-money-row b { white-space: nowrap; }
.ota-money-row { font-size: 13.5px; }

/*
 * ═══ ĐƯỜNG KẺ ĐI TRƯỚC MỖI KẾT QUẢ ═══
 *
 * Kẻ một gạch ngay trên thứ ĐANG là kết quả của những dòng phía trên nó:
 *
 *   · dòng tổng cuối luôn là một kết quả, nên luôn có gạch;
 *   · dòng trước thuế là kết quả trung gian, chỉ có gạch khi nó hiện.
 *
 * ⚠️ Không dùng bộ chọn liền kề `+` ở đây. Giữa danh sách khoản và dòng tổng còn hai dòng thuế bật
 * tắt độc lập, nên "liền kề" thay đổi theo trạng thái và luật sẽ hụt đúng lúc cần nhất.
 */
.ota-cbox--money .ota-book__total,
[data-money-subtotal]:not([hidden]) {
    margin-top: var(--gap-row); padding-top: var(--gap-row); border-top: 1px solid var(--ota-line);
}
/* Thuế đi liền dưới dòng trước thuế: chúng là một cặp, không tách bằng khoảng trắng. */
[data-money-subtotal]:not([hidden]) + [data-money-tax] { margin-top: 6px; }
.ota-book__vat { margin: var(--gap-note) 0 0; font-size: 13px; color: var(--ota-ink-soft); }
.ota-book__hint { margin: var(--gap-row) 0 0; font-size: 13px; color: var(--ota-ink-soft); }
.ota-cbox--money .ota-btn { margin-top: var(--gap-group); }

/* ── Hàng ô nhập ── */
/*
 * Lề của hàng ô nhập do CỤM đứng sau nó quyết định, không phải do chính nó. Ghi chú dính sát ô nó
 * giải thích; hai hàng ô liền nhau thì cách một bậc `--gap-row`.
 */
.ota-checkout .ota-guest-form__row { margin: 0; row-gap: var(--gap-row); }
.ota-checkout .ota-guest-form__row + .ota-guest-form__row { margin-top: var(--gap-row); }
.ota-checkout .ota-guest-form__note { margin: var(--gap-note) 0 0; font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-checkout .ota-guest-form__note + .ota-guest-form__note { margin-top: 4px; }

@media (max-width: 767px) {
    .ota-checkout .ota-guest-form__row { grid-template-columns: 1fr; }

    /*
     * ═══ BA Ô SỐ KHÁCH NẰM NGANG TRÊN ĐIỆN THOẠI ═══
     *
     * Mỗi ô một dòng thì riêng khối này chiếm gần nửa màn hình, và khách phải cuộn qua nó mỗi lần
     * muốn tới phần liên hệ. Nội dung mỗi ô chỉ là một con số - chúng không cần cả bề ngang.
     *
     * Nhãn thu nhỏ và cho xuống dòng: "Người lớn (từ 12 tuổi)" không vừa một dòng ở cột hẹp, mà
     * cắt cụt mất khoảng tuổi thì khách khai sai nhóm.
     */
    .ota-checkout .ota-cbox--guests .ota-field__row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ota-checkout .ota-cbox--guests .ota-field > span { font-size: 12.5px; line-height: 1.35; }
    .ota-checkout .ota-cbox--guests .ota-field__age { display: block; }
    .ota-checkout .ota-cbox--guests .ota-field input { padding-left: 10px; padding-right: 4px; }

    /*
     * Khối giường phụ: ô nhập và giá về cùng một hàng với nhau thay vì mỗi thứ một dòng.
     */
    .ota-extra-bed { padding: 12px 14px; }
    .ota-extra-bed__row { margin-top: 10px; gap: 10px; }
    .ota-extra-bed__row .ota-field--inline input { width: 72px; }
}

@media (min-width: 992px) {
    /*
     * ═══ DESKTOP: TRÁI LÀ ĐƠN HÀNG, PHẢI LÀ CHỖ ĐIỀN ═══
     *
     *   cột trái  · khách sạn → phòng → thời gian
     *   cột phải  · số lượng khách → thông tin liên hệ → tiền và nút
     *
     * Bản trước dồn hết vào cột trái và để mỗi khối tiền bên phải: cột trái dài gấp bốn lần cột
     * phải, nhìn lệch hẳn một bên và khoảng trắng bên phải kéo suốt màn hình.
     *
     * Chia theo VIỆC thì cân hơn và cũng đúng nghĩa hơn: bên trái là những gì khách đã chọn (đọc
     * để xác nhận), bên phải là những gì khách phải điền.
     *
     * ⛔ Nút Đặt phòng nằm cuối cột PHẢI, cùng cột với chỗ khách vừa điền. Để nó cuối cột trái thì
     * khách gõ xong ô cuối cùng bên phải lại phải kéo mắt ngược sang trái và xuống dưới để tìm
     * nút. Nút bấm luôn đi sau việc vừa làm, không phải đi cùng thứ nó cộng ra.
     */
    .ota-checkout__grid { flex-direction: row; align-items: flex-start; gap: 30px; }
    .ota-checkout__col { flex: 1 1 0; }

    /*
     * Hàng ba ô (số lượng khách) tự xuống dòng theo bề rộng thật; hàng ĐÔI thì luôn đúng hai cột.
     * Để chung một luật `auto-fit` thì hàng đôi cũng tự nhồi được ba ô vào một dòng khi cột rộng,
     * và ô họ tên lại hẹp đúng bằng thứ vừa sửa xong.
     */
    .ota-checkout .ota-guest-form__row { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
    .ota-checkout .ota-guest-form__row--pair { grid-template-columns: 1fr 1fr; }
}

/* ─── Trang danh sách: tiêu đề, bộ lọc đang bật, phân trang ─────────────────────────────────── */

.ota-archive__title { font-size: clamp(25px, 3vw, 34px); margin: 0; }
.ota-archive__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: 10px; color: var(--ota-ink-soft); font-size: 15px;
}
.ota-archive__meta b { color: var(--ota-ink); }

/*
 * Chip gỡ bộ lọc. `.ota-chip` nền là một nhãn tĩnh, ở đây nó là LIÊN KẾT nên phải nói rõ bấm được:
 * viền đậm hơn khi rê chuột và con trỏ đổi. Dấu × chỉ là hình, chữ cho trình đọc màn hình nằm ở
 * `.ota-sr` bên trong.
 */
.ota-chip--clear { display: inline-flex; align-items: center; gap: 7px; color: var(--ota-ink); }
.ota-chip--clear:hover { border-color: var(--ota-brand); color: var(--ota-brand); }
.ota-chip__x { font-size: 17px; line-height: 1; opacity: .55; }
.ota-chip--clear:hover .ota-chip__x { opacity: 1; }

/* Chữ chỉ dành cho trình đọc màn hình: không dùng display:none vì như thế trình đọc cũng bỏ qua. */
.ota-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ota-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 38px; }
.ota-pager__page,
.ota-pager__step {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 13px;
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
    background: var(--ota-bg); color: var(--ota-ink); font-size: 14.5px; font-weight: 500;
}
.ota-pager__page:hover,
.ota-pager__step:hover { border-color: var(--ota-brand); color: var(--ota-brand); }
.ota-pager__page.is-now {
    background: var(--ota-brand); border-color: var(--ota-brand); color: #fff; font-weight: 600;
}
/* Nút Trước/Sau ở hai đầu danh sách vẫn CHIẾM CHỖ, để dãy số không nhảy ngang khi đổi trang. */
.ota-pager__step.is-off { color: var(--ota-ink-soft); opacity: .4; }
.ota-pager__gap { padding: 0 4px; color: var(--ota-ink-soft); }

@media (max-width: 560px) {
    /* Màn hẹp bỏ hẳn nhãn chữ hai đầu, giữ dãy số cho đủ chỗ trên một dòng. */
    .ota-pager__step { display: none; }
}

/* ─── Dòng tour ở trang danh sách ──────────────────────────────────────────────────────────── */

.ota-tourrow {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 196px;
    gap: 24px;
    align-items: start;
    padding: 26px 0;
    border-top: 1px solid var(--ota-line);
    color: inherit;
}
/*
 * Đường kẻ NẰM TRÊN mỗi dòng, và dòng đầu bỏ kẻ. Cách này không cần biết dòng nào là dòng cuối,
 * nên khi trang chỉ có một tour thì cũng không thừa một vạch lửng dưới đáy danh sách.
 */
.ota-tourrow:first-child { border-top: 0; padding-top: 6px; }
.ota-tourrow:hover .ota-tourrow__title { color: var(--ota-brand); }
.ota-tourrow:hover .ota-tourrow__media img { transform: scale(1.04); }

/*
 * Khổ 4/3 chứ không phải ô vuông như bản mẫu. Bản mẫu lấp đủ chiều cao 250px vì mỗi dòng của nó có
 * điểm đánh giá, hai dòng nhãn và tiêu đề dài hai dòng. Dữ liệu thật của ta thưa hơn (chưa chấm
 * điểm tour, phần lớn tour chưa có mô tả ngắn), nên ô vuông chừa ra khoảng trắng gần 90px giữa giá
 * và nút. Đo lại 2026-08-31 sau khi đổi: hết trống.
 */
/* `background-color` chứ không shorthand - xem lý do ở `.ota-card__media`. */
.ota-tourrow__media {
    aspect-ratio: 4 / 3; border-radius: var(--ota-radius); overflow: hidden; background-color: var(--ota-bg-alt);
}
.ota-tourrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }

/*
 * Dòng KHÔNG có cột phải: bài viết không có giá hay nút để bày ở đó. Bỏ hẳn cột thứ ba thay vì để
 * nó rỗng - cột rỗng vẫn chiếm 196px cộng khoảng cách, tức là đoạn tóm tắt mất 220px vô ích.
 */
.ota-tourrow--text { grid-template-columns: 240px minmax(0, 1fr); }

/*
 * Khối thuê theo giờ: ngày một dòng, hai ô giờ chia đôi ngay dưới. Xếp ba ô thành ba dòng thì hộp
 * đặt cao lên đúng chỗ đang cần gọn, mà hai ô giờ vốn rất hẹp.
 */
.ota-rent__times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ota-rent--hour select {
    width: 100%; padding: 11px 13px; font: inherit; color: var(--ota-ink);
    background: #fff; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
    cursor: pointer;
}
.ota-rent--hour select:focus { outline: 2px solid var(--ota-brand); outline-offset: -1px; border-color: var(--ota-brand); }

/* Ngày đăng đứng TRÊN tiêu đề, cùng chỗ mà dòng tour đặt thông số - hai loại dòng cùng một nhịp. */
.ota-postrow__date { font-size: 13.5px; color: var(--ota-ink-soft); }

/*
 * Kẹp bề ngang đoạn tóm tắt lại. Bỏ cột phải xong thì cột chữ rộng khoảng 870px, tức là hơn 110 ký
 * tự một dòng - mắt trượt khỏi hàng lúc xuống dòng và phải dò lại từ đầu. Khoảng 70 ký tự là chỗ dễ
 * đọc nhất. Tiêu đề KHÔNG kẹp: nó chỉ một tới hai dòng và cần nổi bật hết bề ngang.
 */
.ota-tourrow--text .ota-tourrow__brief { max-width: 70ch; }

.ota-tourrow__facts { font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-tourrow__title { font-size: 18px; font-weight: 600; line-height: 1.45; margin: 5px 0 0; transition: color .16s; }
.ota-tourrow__place { font-size: 13.5px; color: var(--ota-ink-soft); margin-top: 5px; }
.ota-tourrow__brief { font-size: 14px; line-height: 1.6; color: var(--ota-ink-soft); margin: 12px 0 0; }
.ota-tourrow__next { font-size: 14px; font-weight: 500; color: #16794a; margin-top: 12px; }

/* Cột phải dồn xuống đáy để nút của mọi dòng thẳng hàng, bất kể dòng nào dài hơn. */
/*
 * Căn GIỮA theo chiều dọc, không dồn xuống đáy. Dồn đáy chỉ đẹp khi dòng nào cũng cao đều nhau;
 * ở đây dòng có mô tả ngắn cao hơn dòng không có, nên dồn đáy làm nút nhảy chỗ giữa các dòng.
 */
.ota-tourrow__side {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    text-align: right; padding-left: 22px; border-left: 1px solid var(--ota-line);
}
.ota-tourrow__from { font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-tourrow__price { font-size: 22px; font-weight: 600; color: var(--ota-price); line-height: 1.25; }
.ota-tourrow__unit { font-size: 13px; color: var(--ota-ink-soft); }
.ota-tourrow__cta { margin-top: 14px; }

@media (max-width: 900px) {
    /*
     * Mỗi mục thành một THẺ riêng, không còn là dòng ngăn bằng vạch.
     *
     * Ở màn rộng ba cột nằm ngang nên mắt tự thấy đâu là một mục. Xuống một cột thì ảnh, chữ và giá
     * xếp chồng, mà vạch ngăn giữa hai mục lại y hệt vạch ngăn giữa phần chữ và phần giá BÊN TRONG
     * một mục - không còn cách nào phân biệt nội dung của xe nào với xe nào (HieuNQ chốt 2026-09-10).
     *
     * Viền bao quanh và khoảng hở giữa các thẻ làm việc đó rõ ràng hơn mọi đường kẻ.
     */
    .ota-tourrow {
        grid-template-columns: 1fr; gap: 16px;
        padding: 16px; margin-bottom: 14px;
        border: 1px solid var(--ota-line); border-radius: var(--ota-radius);
        background: #fff;
    }
    /* Dòng đầu không còn phải bỏ vạch trên - giờ mỗi thẻ tự có viền đủ bốn phía. */
    .ota-tourrow:first-child { border: 1px solid var(--ota-line); padding-top: 16px; }
    .ota-tourrow:last-child { margin-bottom: 0; }
    .ota-tourrow__media { aspect-ratio: 16 / 9; }
    .ota-tourrow__side {
        flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px;
        text-align: left; padding-left: 0; border-left: 0;
        padding-top: 14px; border-top: 1px solid var(--ota-line);
    }
    /* Hàng ngang thì "Giá từ" và "mỗi khách" thành chú thích quanh con số, không phải 3 dòng riêng. */
    .ota-tourrow__cta { margin-top: 0; margin-left: auto; }
}

/* ─── Trang chi tiết tour ──────────────────────────────────────────────────────────────────── */

.ota-tour__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.ota-tour__name { font-size: clamp(24px, 3vw, 33px); margin: 0; line-height: 1.25; }
.ota-tour__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 9px; font-size: 14.5px; color: var(--ota-ink-soft); }
.ota-tour__len { font-weight: 600; color: var(--ota-ink); }
/* Dấu chấm ngăn cách vẽ bằng ::before, không gõ vào HTML: thiếu một vế thì dấu tự biến mất. */
.ota-tour__route::before { content: '•'; margin-right: 14px; opacity: .5; }
.ota-tour__price { text-align: right; }
.ota-tour__price span { display: block; font-size: 13px; color: var(--ota-ink-soft); }
.ota-tour__price b { font-size: 25px; color: var(--ota-price); }

/* Hai cột "đã bao gồm" và "chưa bao gồm" đứng cạnh nhau để so được, xuống một cột ở màn hẹp. */
.ota-tour__inex { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 30px; }
.ota-tour__inex-head { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.ota-tour__inex-head--yes { color: #16794a; }
.ota-tour__inex-head--no { color: var(--ota-ink-soft); }
.ota-tour__inex-head--yes::before { content: '✓'; font-weight: 700; }
.ota-tour__inex-head--no::before { content: '×'; font-weight: 700; font-size: 17px; line-height: 1; }

/*
 * Lịch trình: vạch dọc nối các chặng, mỗi chặng một chấm tròn. Vạch vẽ trên `li` chứ không trên
 * `ol`, nếu không nó thò xuống quá chặng cuối cùng.
 */
.ota-timeline { list-style: none; margin: 0; padding: 0; }
.ota-timeline__item { position: relative; padding: 0 0 22px 26px; }
.ota-timeline__item::before {
    content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 11px;
    border-radius: 50%; background: var(--ota-brand); box-shadow: 0 0 0 3px var(--ota-brand-soft);
}
.ota-timeline__item:not(:last-child)::after {
    content: ''; position: absolute; left: 5px; top: 20px; bottom: 0; width: 1px; background: var(--ota-line);
}
.ota-timeline__title { font-size: 16px; margin: 0 0 5px; }

.ota-book__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.ota-book__price b { font-size: 26px; color: var(--ota-price); }
.ota-book__price span { font-size: 13.5px; color: var(--ota-ink-soft); }
.ota-book__was { font-size: 14px; color: var(--ota-ink-soft); }
.ota-book__label { font-size: 13.5px; font-weight: 600; margin: 16px 0 8px; }

.ota-book__rates { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ota-book__rates li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.ota-book__rates span { color: var(--ota-ink-soft); }
.ota-book__rates b { white-space: nowrap; }

.ota-depart { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ota-depart__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
}
.ota-depart__row:hover { border-color: var(--ota-brand); }
.ota-depart__seats { display: block; font-size: 12.5px; color: var(--ota-ink-soft); }
.ota-depart .ota-btn { padding: 7px 16px; }
.ota-note {
    margin: 0; padding: 15px 17px; border-radius: var(--ota-radius-sm);
    background: var(--ota-bg-alt); border: 1px solid var(--ota-line);
    font-size: 14.5px; line-height: 1.6; color: var(--ota-ink-soft);
}
.ota-note a { color: var(--ota-brand); font-weight: 600; }

/* Icon dòng phụ của dòng tour: cùng cỡ chữ, tụt nhẹ cho thẳng chân chữ. */
.ota-tourrow__icon { width: 15px; height: 15px; flex: none; opacity: .7; }
.ota-tourrow__facts,
.ota-tourrow__place { display: flex; align-items: center; gap: 6px; }
/* Tên tour nay đứng đầu khối nên không cần đẩy xuống nữa. */
.ota-tourrow__title { margin-top: 0; }
.ota-tourrow__facts { margin-top: 7px; }
.ota-tourrow__price--ask { font-size: 17px; color: var(--ota-ink); }

/* ─── Dòng khách sạn (trang /khach-san) ────────────────────────────────────────────────────── */
/*
 * Dòng khách sạn là thẻ `div` chứ không phải một liên kết bọc cả khối như dòng tour và dòng xe:
 * bên trong đã có liên kết "Xem bản đồ" trỏ ra Google Maps, mà liên kết lồng trong liên kết là
 * HTML không hợp lệ - trình duyệt tự gỡ, và chỗ bấm ra sai chỗ.
 *
 * Đổi lại phải tự dựng hiệu ứng di chuột, vì `.ota-tourrow:hover` cũ nhắm vào thẻ liên kết.
 */
.ota-hotelrow .ota-tourrow__title a { color: inherit; transition: color .16s; }
.ota-hotelrow:hover .ota-tourrow__title a { color: var(--ota-brand); }
.ota-hotelrow:hover .ota-tourrow__media img { transform: scale(1.04); }

/* Hạng sao: vẽ đúng số sao khách sạn có, không vẽ 5 ô rồi tô màu một phần. */
/*
 * Hạng sao. Một luật, hai chỗ dùng: dòng ở trang danh sách và thẻ lưới ở trang chủ. Khai chung một
 * bộ chọn để hai trang không bao giờ vẽ ngôi sao hai cỡ khác nhau.
 */
.ota-hotelrow__stars,
.ota-card__stars { display: flex; gap: 2px; margin-top: 6px; }
.ota-hotelrow__stars svg,
.ota-card__stars svg { width: 15px; height: 15px; fill: #f5a623; }

/* Trong thẻ lưới, sao nằm sát dưới tên nên cần khoảng hở nhỏ hơn dòng danh sách. */
.ota-card__stars { margin-top: 4px; margin-bottom: 2px; }

/* Nút mở bản đồ: là `button` (mở modal) nhưng phải trông như liên kết trong dòng chữ. */
.ota-hotelrow__map {
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--ota-brand); font-weight: 500;
}
.ota-hotelrow__map:hover { text-decoration: underline; }

/* Modal bản đồ: khung chiếm trọn bề ngang, không chừa lề như modal chữ. */
.ota-modal--map { width: min(860px, calc(100vw - 32px)); }
.ota-modal__body--flush { padding: 0; }
.ota-hotelrow__frame { display: block; width: 100%; height: min(60vh, 460px); border: 0; }
.ota-modal__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 22px; border-top: 1px solid var(--ota-line);
}
.ota-hotelrow__addr { font-size: 13.5px; color: var(--ota-ink-soft); }
@media (max-width: 560px) {
    /* Màn hẹp: địa chỉ xuống dòng riêng, nút chỉ đường chiếm trọn bề ngang cho dễ bấm. */
    .ota-modal__foot { flex-direction: column; align-items: stretch; text-align: center; }
}

/*
 * Các khối nội dung của trang chi tiết tour xếp thẳng trong một cột, không mỗi khối một `section`
 * như trang khách sạn, nên phải tự chừa khoảng. Kẹp trong `.ota-detail__main` để không đụng những
 * chỗ khác đang dùng `.ota-block`.
 */
.ota-detail__main .ota-block + .ota-block { margin-top: 32px; }

/* ─── Dải cuộn ngang (điểm tham quan của tour, tour tương tự) ──────────────────────────────── */

/*
 * Cuộn bằng chính thanh cuộn của trình duyệt, không dựng nút trái/phải bằng JavaScript.
 *
 * Trên điện thoại và bàn di chuột thì vuốt là thao tác tự nhiên; trên chuột lăn thì `overflow-x`
 * vẫn kéo được bằng shift + lăn. Thêm cặp nút chỉ để có nút là thêm mã phải nuôi, thêm trạng thái
 * bật/tắt ở hai đầu, mà không cho khách khả năng nào mới.
 *
 * `scroll-snap` để thẻ luôn dừng đúng mép, không bị cắt nửa thẻ giữa khung.
 */
.ota-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
    gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
    /* Chừa chỗ cho bóng đổ của thẻ, nếu không nó bị thanh cuộn cắt mất. */
    padding-bottom: 12px; margin-bottom: -12px;
    scrollbar-width: thin;
}
.ota-strip > * { scroll-snap-align: start; }
/* Thẻ tour rộng hơn thẻ điểm đến vì còn phải chứa tên tour và giá. */
.ota-strip--wide { grid-auto-columns: minmax(258px, 1fr); }

/* Dòng báo chưa mở lịch: tách hẳn khỏi nút bên dưới cho khỏi dính chữ vào nút. */
.ota-book__msg--spaced { margin: 4px 0 14px; }

/* ─── Chọn số khách trong hộp đặt tour ─────────────────────────────────────────────────────── */

.ota-seats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ota-seats__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ota-seats__row label { display: grid; gap: 1px; font-size: 14px; }
.ota-seats__row label span { font-size: 13px; color: var(--ota-ink-soft); }
/*
 * Ô số rộng cố định 74px: đủ cho hai chữ số cùng cặp mũi tên tăng giảm của trình duyệt, mà cột
 * tên bên trái vẫn giữ được chỗ. Để `width: auto` thì Chrome và Safari cho ra hai bề rộng khác nhau.
 */
.ota-seats__row input {
    width: 74px; padding: 8px 10px; text-align: center;
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
    font: inherit; color: var(--ota-ink); background: #fff;
}
.ota-seats__row input:focus-visible { outline: 2px solid var(--ota-brand); outline-offset: 1px; }

.ota-book__form select {
    width: 100%; padding: 10px 12px; font: inherit; color: var(--ota-ink);
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm); background: #fff;
}

/*
 * Tóm tắt đơn tour ở trang xác nhận.
 *
 * ⛔ KHÔNG đặt tên `.ota-summary__head` - lớp đó đã có ở khối tóm tắt phòng phía trên với
 * `justify-content: space-between`, và luật viết sau sẽ đè lên nó làm hàng tiền của TRANG ĐẶT
 * PHÒNG mất căn hai đầu. Đúng mẫu lỗi "CSS dùng chung ăn vào vùng của người khác".
 */
.ota-tsum { display: flex; gap: 12px; align-items: flex-start; }
.ota-summary__thumb { width: 76px; height: 57px; object-fit: cover; border-radius: var(--ota-radius-sm); flex: none; }
.ota-summary__meta { font-size: 13px; color: var(--ota-ink-soft); margin-top: 3px; }

/* Một dòng khách trong khối "Số khách đã chọn" của trang xác nhận tour. */
.ota-tsum-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ota-line);
}
.ota-tsum-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ota-cbox__foot { margin: 14px 0 0; font-size: 14px; color: var(--ota-ink-soft); }
.ota-cbox__foot b { color: var(--ota-ink); }
.ota-cbox__foot a { color: var(--ota-brand); font-weight: 600; margin-left: 6px; }
.ota-checkout__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ota-line);
}
.ota-checkout__total b { font-size: 22px; color: var(--ota-price); }
.ota-checkout__submit { margin-top: 22px; }

/* Nhãn loại tour đè lên ảnh của dòng danh sách. */
.ota-tourrow__media { position: relative; }
/*
 * Nhãn loại tour: nằm TRONG cột chữ, không đè lên ảnh.
 *
 * Đè lên ảnh thì tour chưa có ảnh hiện một nhãn lơ lửng giữa ô xám, còn tour có ảnh thì nhãn che
 * mất góc hình. Nền đặc thay cho nền trắng mờ - giờ nó đứng trên nền trang, không còn ảnh phía sau
 * để mà xuyên qua.
 */
.ota-tourrow__badge {
    display: inline-block; margin-bottom: 7px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--ota-bg-alt); color: var(--ota-ink-soft);
    font-size: 12px; font-weight: 600;
}
.ota-tour__group {
    padding: 3px 10px; border-radius: 999px; background: var(--ota-brand-soft);
    color: var(--ota-brand-dark); font-size: 13px; font-weight: 600;
}

/*
 * Chân của một dòng phòng ở trang đặt phòng: tiện nghi bên trái, "có bữa sáng" căn phải thẳng dưới
 * thành tiền. Thiếu tiện nghi thì bữa sáng vẫn nằm đúng bên phải nhờ `margin-left: auto`.
 */
.ota-summary__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ota-summary__foot .ota-room-line { margin: 0; }
.ota-summary__foot .ota-summary__perk { margin-left: auto; white-space: nowrap; }

/* ─── Sửa vặt 2026-08-31 ───────────────────────────────────────────────────────────────────── */

/*
 * Mũi tên của `select` do trình duyệt vẽ ĐÈ lên vùng chữ, không tự chừa chỗ. Chỉ có `padding-right`
 * mới đẩy chữ ra khỏi nó; thiếu là chữ dài chạm sát mũi tên rồi bị nó che.
 */
.ota-book__form select { padding-right: 34px; }

/*
 * Thẻ điểm đến cỡ nhỏ cho khối phụ cuối trang chi tiết tour.
 *
 * Khổ 1/1 thay vì 3/4: ô cao 3/4 sinh ra cho khối "Điểm đến nổi bật" ở trang chủ, nơi nó là nhân
 * vật chính. Ở cuối trang tour nó chỉ là gợi ý, mà đo trên màn 390px thì một thẻ cao tới 467px -
 * chiếm hơn nửa màn hình cho một khối phụ.
 */
.ota-place--sm { aspect-ratio: 1 / 1; }
.ota-place--sm .ota-place__cap { font-size: 14px; padding: 26px 12px 11px; }
.ota-strip--sm { grid-auto-columns: minmax(178px, 1fr); }
/* Lưới (từ 4 thẻ trở xuống) cũng phải nhỏ theo, nếu không hai chế độ ra hai cỡ khác nhau. */
.ota-grid--4 .ota-place--sm { aspect-ratio: 1 / 1; }

@media (max-width: 700px) {
    /*
     * Đầu trang chi tiết tour trên màn hẹp: giá xuống hàng riêng và căn TRÁI.
     *
     * Giữ `text-align: right` khi đã xuống hàng thì con số nằm lệch giữa một hộp rộng 154px đứng ở
     * mép trái - không thẳng lề với tên tour bên trên, cũng không sát mép phải. Đo 2026-08-31.
     */
    .ota-tour__head { flex-direction: column; align-items: stretch; gap: 12px; }
    .ota-tour__price { text-align: left; }
    .ota-tour__price b { font-size: 22px; }
}

/*
 * Lưới ảnh khi chỉ có 1-2 tấm: các ô bằng nhau, không có ô lớn chiếm hai hàng.
 *
 * Luật gốc (`2fr 1fr 1fr` + ô đầu `span 2`) dựng cho trang khách sạn có 5 ảnh. Loại xe thường chỉ
 * có 2 ảnh, và khi đó nửa phải của khối bỏ trống hoàn toàn.
 */
.ota-gallery--few { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-rows: auto; }
.ota-gallery--few a:first-child { grid-row: auto; aspect-ratio: 4 / 3; }

/* ─── Chọn hình thức thuê xe ───────────────────────────────────────────────────────────────── */

.ota-modes { display: flex; gap: 8px; margin-bottom: 14px; }
.ota-mode { flex: 1 1 0; }
.ota-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ota-mode span {
    display: block; padding: 9px 12px; text-align: center; cursor: pointer;
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
    font-size: 14px; font-weight: 500; transition: border-color .16s, background .16s, color .16s;
}
.ota-mode input:checked + span {
    border-color: var(--ota-brand); background: var(--ota-brand-soft); color: var(--ota-brand-dark);
}
/* Bàn phím phải thấy được ô nào đang được chọn: ô thật ẩn nên viền hiện trên nhãn. */
.ota-mode input:focus-visible + span { outline: 2px solid var(--ota-brand); outline-offset: 1px; }

.ota-rent { display: grid; gap: 10px; margin-bottom: 12px; }
.ota-book__form .ota-field input[type="date"],
.ota-book__form .ota-field input[type="datetime-local"],
.ota-book__form .ota-field input[type="number"] {
    width: 100%; padding: 10px 12px; font: inherit; color: var(--ota-ink);
    border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm); background: #fff;
}

/* ─── Trang chi tiết xe: gọn lại ───────────────────────────────────────────────────────────── */

/*
 * Thông số xe bày thành hàng ngang. Xe chỉ có 3 thông số, bảng dọc kéo thành ba dòng cao gần 120px
 * cạnh một hộp đặt cao gấp bốn - cột trái trống hoác.
 */
.ota-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.ota-specs li {
    display: flex; align-items: baseline; gap: 7px;
    padding: 9px 14px; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
    background: var(--ota-bg-alt);
}
.ota-specs span { font-size: 13px; color: var(--ota-ink-soft); }
.ota-specs b { font-size: 14.5px; }

/*
 * ⛔ HAI Ô NGÀY LUÔN XẾP DỌC trong hộp đặt, KHÔNG chia hai cột.
 *
 * Đã thử chia hai cột để hộp thấp xuống ~90px, và nó VỠ: `input[type=date]` của trình duyệt có bề
 * rộng tối thiểu tự nhiên khoảng 170px (chữ ngày + biểu tượng lịch). Hai ô cùng khoảng cách 12px là
 * 352px, trong khi lòng hộp chỉ 326px - ô thứ hai tràn 25px ra ngoài mép hộp.
 *
 * Đo 2026-08-31 trên hộp rộng 368px. Ép `min-width: 0` thì ô co lại nhưng trình duyệt cắt mất biểu
 * tượng lịch, đổi một lỗi lấy một lỗi khác.
 */
.ota-book__form .ota-rent { grid-template-columns: minmax(0, 1fr); }
/* Chặn tràn cho mọi ô trong hộp đặt, không riêng ô ngày. */
.ota-book__form .ota-field,
.ota-book__form .ota-field input,
.ota-book__form select { min-width: 0; max-width: 100%; }

/* Dịch vụ thêm ở trang xác nhận thuê xe: tên bên trái, giá căn phải. */
.ota-extras { display: grid; gap: 4px; }
.ota-extras__row { display: flex; align-items: center; gap: 10px; }
.ota-extras__row span { flex: 1 1 auto; }
.ota-extras__row b { white-space: nowrap; }

/* ─── Trang kết quả dùng chung (hết chỗ, phiên hết hạn...) ─────────────────────────────────── */

.ota-result { max-width: 520px; margin: 0 auto; text-align: center; }
.ota-result__icon {
    width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 28px; font-weight: 700;
    background: #e8f6ee; color: #16794a;
}
.ota-result__icon.is-error { background: #fdecea; color: #b3261e; }
.ota-result__title { font-size: clamp(22px, 3vw, 28px); margin: 0; }
.ota-result__msg { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ota-ink-soft); }
.ota-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/*
 * Lịch trình và điểm tham quan trên biên nhận đơn tour: chỉ liệt kê tên, không kèm nội dung chặng.
 *
 * Tiêu đề nhỏ phải cách hẳn dòng dữ liệu ngay trên nó. Dính sát thì "3 người" và "LỊCH TRÌNH" đọc
 * thành một cụm, mắt không nhận ra đây đã sang một mục khác.
 */
.ota-done__card .ota-done__block-title:not(:first-child) { margin-top: 20px; }
.ota-done__legs { margin: 0 0 var(--gap-group); padding-left: 20px; display: grid; gap: 5px; font-size: 14.5px; }
.ota-done__spots { margin: 0; font-size: 14.5px; color: var(--ota-ink-soft); line-height: 1.6; }

/* ── Trang địa danh và bài viết ─────────────────────────────────────────────
 *
 * Ba trang danh mục (tour, địa danh, bài viết) dùng chung khung `ota-card`; phần thêm ở đây chỉ là
 * đoạn giới thiệu trong thân thẻ và mấy khối riêng của trang đọc.
 */

/*
 * Đoạn dẫn trong thẻ. Kẹp đúng 3 dòng để mọi thẻ trên một hàng cao bằng nhau: cắt chữ ở máy chủ
 * theo SỐ KÝ TỰ không cho ra chiều cao đều nhau, vì tên địa danh dài ngắn khác nhau đẩy đoạn dẫn
 * xuống những vị trí khác nhau.
 */
.ota-card__brief {
    margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ota-ink-soft);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ota-card__body .ota-card__meta + .ota-card__title { margin-top: 2px; }

/*
 * Hộp bên phải mở đầu bằng danh sách thông tin thì bỏ đường kẻ trên của nó. `ota-book__meta` sinh ra
 * để nằm DƯỚI một khối khác (giá, nút đặt) nên có sẵn viền trên; đứng đầu hộp thì đường kẻ đó lửng
 * lơ ngay dưới mép hộp.
 */
.ota-book__meta:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/*
 * Địa chỉ và giờ mở cửa ngay dưới tên địa danh. Nằm ngang khi vừa chỗ - hai mẩu thông tin ngắn xếp
 * thành hai dòng riêng chỉ đẩy phần giới thiệu xuống thấp mà không rõ hơn chút nào.
 */
.ota-place__facts {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    font-size: 14.5px; color: var(--ota-ink-soft);
}
.ota-place__facts b { color: var(--ota-ink); font-weight: 600; }

/* Đoạn giới thiệu ngắn ngay dưới tên địa danh, trước lưới ảnh. */
.ota-place__intro {
    margin: 10px 0 0; max-width: 760px;
    font-size: 16px; line-height: 1.65; color: var(--ota-ink-soft);
}

/* Hàng tiêu đề kèm ô tìm kiếm ở trang danh mục bài viết. */
.ota-archive__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.ota-searchbox { display: flex; gap: 8px; }
/*
 * Bề rộng đủ chứa TRỌN câu gợi ý "Tìm khách sạn, tour, xe, địa danh, bài viết" - 240px cắt cụt nó
 * ngay giữa chữ, người dùng không đọc được mình tìm được những gì.
 *
 * `min()` để trên màn hẹp nó co lại theo khung chứ không đẩy nút "Tìm" ra ngoài.
 */
.ota-searchbox input {
    width: min(420px, 100%); padding: 10px 13px; font: inherit; color: var(--ota-ink);
    background: #fff; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
}
.ota-searchbox input:focus { outline: 2px solid var(--ota-brand); outline-offset: -1px; border-color: var(--ota-brand); }

/*
 * Trang đọc bài: một cột, kẹp bề ngang lại.
 *
 * Dòng chữ quá dài thì mắt trượt khỏi hàng lúc xuống dòng và phải dò lại từ đầu; khoảng 70 ký tự
 * một dòng là chỗ dễ đọc nhất, tức là quanh 760px với cỡ chữ này.
 */
.ota-article { max-width: 800px; }
.ota-article__title { font-size: clamp(25px, 3vw, 34px); margin: 0; line-height: 1.3; }
.ota-article__meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 10px; font-size: 14px; color: var(--ota-ink-soft);
}
.ota-article__cover {
    width: 100%; margin-top: 20px; border-radius: var(--ota-radius); display: block;
}
.ota-article__body { margin-top: 22px; font-size: 16px; }

@media (max-width: 575px) {
    .ota-searchbox { width: 100%; }
    .ota-searchbox input { flex: 1; width: auto; }
}

/* ── Tài khoản khách ────────────────────────────────────────────────────────
 *
 * Ba trang (đăng nhập, đăng ký, tài khoản) dùng chung khối `ota-auth`; trang tài khoản mượn thêm
 * khung hai cột `ota-detail` sẵn có.
 */

/* Khung hẹp canh giữa: trang đăng nhập chỉ có một việc, dàn rộng ra chỉ tổ phải tìm ô nhập. */
.ota-auth { max-width: 440px; }
.ota-auth__title { font-size: clamp(24px, 3vw, 30px); margin: 0 0 22px; }
.ota-auth__form { display: grid; gap: 14px; }
.ota-auth__form .ota-btn { margin-top: 6px; }
.ota-auth__alt { margin: 20px 0 0; text-align: center; color: var(--ota-ink-soft); }
.ota-auth__note { margin: 10px 0 0; font-size: 13.5px; color: var(--ota-ink-soft); line-height: 1.6; }
.ota-field__opt { font-style: normal; color: var(--ota-ink-soft); font-weight: 400; }

/*
 * Hộp báo lỗi và báo thành công. Lỗi dùng cùng bảng màu với `ota-field__error` để người dùng nhận ra
 * ngay đây là cùng một loại thông báo, chỉ khác chỗ đứng.
 */
.ota-authmsg { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.55; }
.ota-authmsg p { margin: 0; }
.ota-authmsg p + p { margin-top: 4px; }
.ota-authmsg--error { border: 1px solid #f2c4bf; background: #fdecea; color: #a5251b; }
.ota-authmsg--ok { border: 1px solid #b9e0c9; background: #e8f6ee; color: #14663f; }

/*
 * Cụm tài khoản ở header, đứng cạnh hotline.
 *
 * Khoảng hở hẹp (6px) vì chữ Thoát đứng trong ngoặc: ngoặc ngụ ý nó thuộc về tên ngay trước nó, mà
 * cách xa ra thì đọc thành hai mục rời nhau trên thanh điều hướng.
 */
/*
 * `margin-left` tách khỏi nhóm mục bán hàng ngay bên trái.
 *
 * Khối này nằm trong `<nav>` (để màn hẹp nó theo vào menu xổ), mà `<nav>` xếp các mục sát nhau -
 * không chừa thì "Đăng nhập" dính vào "Thông tin" và đọc thành một mục menu nữa.
 */
.ota-nav__account { display: flex; align-items: center; gap: 6px; margin-left: 14px; }
.ota-nav__login {
    font-size: 14.5px; font-weight: 500; color: var(--ota-ink);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ota-nav__login:hover { color: var(--ota-brand); }
.ota-nav__logout { margin: 0; }
.ota-nav__logout button {
    font: inherit; font-size: 13.5px; color: var(--ota-ink-soft);
    background: none; border: 0; padding: 0; cursor: pointer;
}
.ota-nav__logout button:hover { color: var(--ota-price); }

/*
 * Trang không tìm thấy.
 *
 * Căn giữa và rộng vừa phải: cả trang chỉ có 1 việc để làm (tìm lại), nên không có gì tranh chỗ với
 * ô tìm kiếm. Đây là ngoại lệ có chủ đích với luật căn trái của các trang khác.
 */
.ota-404 { max-width: 620px; text-align: center; padding: 20px 0 10px; }
/*
 * Số 404 to nhưng NHẠT, và mang `aria-hidden`: nó là hình trang trí báo hiệu "trang này khác thường",
 * không phải thông tin. Trình đọc màn hình đọc "bốn không bốn" chen giữa hai câu là gây rối.
 */
.ota-404__code {
    margin: 0; font-size: clamp(56px, 9vw, 92px); font-weight: 700; line-height: 1;
    letter-spacing: -.04em; color: var(--ota-line);
}
.ota-404__title { margin: 6px 0 0; font-size: clamp(21px, 2.6vw, 27px); }
.ota-404__lead { margin: 10px auto 0; max-width: 460px; color: var(--ota-ink-soft); }
.ota-404__search { margin: 22px auto 0; max-width: 470px; }
/*
 * Ô nhập giãn hết phần còn lại. `.ota-searchbox input` cắm bề rộng cố định cho thanh lọc ở trang
 * danh sách, mà ở đây ô đứng một mình giữa trang nên bề rộng đó cắt cụt câu gợi ý trong ô.
 */
.ota-404__search input { flex: 1; width: auto; min-width: 0; }
/*
 * Các lối đi xuống dòng được và căn giữa: số mục thay đổi theo thứ khách sạn thật sự bán, nên không
 * cắm cứng số cột.
 */
.ota-404__links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px;
}
.ota-404__links a {
    padding: 7px 14px; border: 1px solid var(--ota-line); border-radius: 999px;
    font-size: 14px; font-weight: 500; color: var(--ota-ink);
}
.ota-404__links a:hover { border-color: var(--ota-brand); color: var(--ota-brand); }

/*
 * Trang kết quả tìm kiếm.
 *
 * Dùng lại `.ota-archive__bar`, `.ota-searchbox` và `.ota-empty` của các trang danh sách - trang
 * này cùng một khung với chúng, dựng bộ lớp riêng chỉ để đổi vài con số là thêm một chỗ phải sửa
 * mỗi lần chỉnh giao diện danh sách.
 */
.ota-results { margin-bottom: 30px; }
.ota-results:last-child { margin-bottom: 0; }
.ota-results__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px solid var(--ota-line);
}
.ota-results__title { font-size: 17px; margin: 0; }
.ota-results__all { font-size: 14px; font-weight: 500; color: var(--ota-brand); white-space: nowrap; }
.ota-results__list { display: grid; gap: 8px; }

/*
 * Mỗi kết quả là một khối bấm được, KHÔNG phải một dòng chữ có liên kết ở tiêu đề. Vùng bấm rộng
 * hết chiều ngang thì trên điện thoại không phải nhắm vào mấy chữ tiêu đề.
 *
 * ⚠️ Tên là `ota-hit`, KHÔNG phải `ota-result`: lớp đó đã thuộc về trang xác nhận đặt phòng
 * (`booking-result.php`), nơi nó căn giữa và phóng chữ lên 28px. Đặt trùng tên thì hai trang không
 * liên quan gì tới nhau lại giành nhau một bộ luật, và trang tới sau thừa hưởng giao diện của
 * trang kia mà không có lỗi nào báo.
 */
.ota-hit {
    display: block; padding: 11px 14px; border: 1px solid var(--ota-line);
    border-radius: var(--ota-radius-sm); color: var(--ota-ink);
}
.ota-hit:hover { border-color: var(--ota-brand); background: var(--ota-bg-alt); }
/* Cùng cỡ chữ và độ đậm với dòng trong hộp xổ - hai nơi bày cùng một thứ. */
.ota-hit__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
/*
 * `overflow-wrap` vì dòng mô tả của phòng ghép nhiều ý ("1 giường King · View thành phố · Tối đa
 * 4 khách · từ 800.000đ/đêm") nên trên màn hẹp nó phải xuống được dòng.
 */
.ota-hit__meta {
    display: block; margin-top: 2px; font-size: 13px; line-height: 1.45;
    color: var(--ota-ink-soft); overflow-wrap: anywhere;
}
.ota-empty__hint { margin: 10px 0 0; font-size: 14px; }
.ota-empty__hint a { color: var(--ota-brand); }

/* Danh sách đơn của tôi. */
.ota-orders { display: grid; gap: 14px; margin-top: 16px; }
.ota-order { border: 1px solid var(--ota-line); border-radius: var(--ota-radius); padding: 18px 20px; }
.ota-order__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ota-order__kind { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ota-ink-soft); }
.ota-order__status { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.ota-order__status.is-ok { background: #e8f6ee; color: #14663f; }
.ota-order__status.is-warn { background: #fdf6e3; color: #7a5d09; }
.ota-order__status.is-off { background: var(--ota-bg-alt); color: var(--ota-ink-soft); }
.ota-order__title { font-size: 17px; margin: 8px 0 0; }
.ota-order__facts { margin: 12px 0 0; display: grid; gap: 5px; }
.ota-order__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ota-order__facts dt { margin: 0; font-size: 14px; color: var(--ota-ink-soft); }
.ota-order__facts dd { margin: 0; font-size: 14.5px; text-align: right; }
.ota-order__link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ota-brand); }

/* Khối đổi mật khẩu tách khỏi khối hồ sơ bằng một đường kẻ, không phải bằng một cái hộp thứ hai. */
.ota-book__pwd { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ota-line); display: grid; gap: 14px; }
.ota-book__pwd .ota-book__title { margin: 0; }

@media (max-width: 767px) {
    /* Màn hẹp: tên tài khoản ngắn lại để không đẩy nút ba gạch ra khỏi hàng. */
    .ota-nav__login { max-width: 92px; }
}

/*
 * Dòng tóm tắt lỗi ở đầu form, do `theme.js` chèn khi bộ kiểm chặn.
 *
 * Cùng bảng màu với hộp lỗi của trang tài khoản: hai thứ đều là "form không đi tiếp được", khác
 * nhau chỗ một cái từ máy chủ về, một cái chặn ngay tại chỗ - người dùng không cần phân biệt.
 */
.ota-formsum {
    margin: 0 0 4px; padding: 11px 14px; border-radius: 10px;
    border: 1px solid #f2c4bf; background: #fdecea; color: #a5251b;
    font-size: 14px; line-height: 1.5;
}

/* ── Cụm nút liên hệ nổi ───────────────────────────────────────────────────
 *
 * Zalo và Messenger, góc dưới bên phải, đè lên nội dung. Bốn luật:
 *
 *   1. **Chữ hiện SẴN.** Bản đầu giấu nhãn và chỉ bung khi rê chuột, nhưng người dùng phải đoán hai
 *      vòng tròn màu kia là gì trước khi biết có nên rê vào - còn trên điện thoại thì không có thao
 *      tác rê chuột nào cả.
 *   2. **Màu nền đúng của từng kênh** (Zalo xanh dương, Messenger tím), để nhận ra bằng màu trước
 *      cả khi kịp đọc chữ.
 *   3. Xếp DỌC, không xếp ngang: xếp ngang thì trên điện thoại nó chiếm hết chiều rộng.
 *   4. `z-index: 40` - dưới thanh điều hướng dính trên đầu (50) nhưng trên mọi khối nội dung (1..30).
 *      Hộp thoại thì không phải lo: chúng là `<dialog>` mở bằng `showModal()` nên trình duyệt đưa
 *      lên lớp trên cùng, đứng trên mọi `z-index` bất kể số bao nhiêu.
 */
.ota-dock {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
/* Chỉ biểu tượng, không chữ: nút là một hình tròn vừa đúng huy hiệu bên trong. */
.ota-dock__btn {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ota-brand); color: #fff; text-decoration: none;
    box-shadow: 0 6px 18px rgba(15, 33, 66, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ota-dock__btn:hover, .ota-dock__btn:focus-visible {
    transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 33, 66, .28);
}
/*
 * Huy hiệu tròn: nền TRẮNG, hình bên trong mang màu thương hiệu của kênh. Đặt trên nút màu nên nó
 * nổi hẳn lên như một cái nhãn dán, đúng kiểu hai ứng dụng này tự vẽ nút của họ.
 */
.ota-dock__badge {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    border-radius: 50%; background: #fff; overflow: hidden;
}
.ota-dock__badge svg { width: 34px; height: 34px; display: block; }

/* Màu riêng từng kênh, đúng màu thương hiệu để nhận ra trước cả khi đọc chữ. */
.ota-dock__btn--zalo { background: #0068ff; }
.ota-dock__btn--messenger { background: #a33bd6; }

/*
 * Màn hẹp: thu gọn đôi chút nhưng VẪN giữ chữ. Bỏ chữ đi là quay lại đúng vấn đề ban đầu, mà điện
 * thoại lại là nơi cụm nút này được bấm nhiều nhất.
 */
@media (max-width: 640px) {
    /* Cách mép dưới rộng tay hơn: sát quá thì ngón cái chạm nhầm thanh điều hướng của trình duyệt. */
    .ota-dock { right: 12px; bottom: 22px; gap: 8px; }
    /*
     * CHỈ màn hẹp mới chừa chỗ cuối trang cho cụm nút nổi.
     *
     * Trên điện thoại cụm nút đè lên dòng cuối chân trang - "Thiết kế bởi SENNET" nằm nép mép phải,
     * đúng chỗ hai nút đứng. Màn rộng thì chân trang trải hết bề ngang và hai nút không che chữ nào,
     * chừa thêm ở đó chỉ tạo một mảng trống dài thượt (HieuNQ chốt 2026-09-10).
     *
     * Con số 148px = 22 (cách mép) + 48 + 8 + 48 (hai nút và khe giữa) + 22 lề thở. Đổi cỡ nút hay
     * `bottom` thì phải tính lại ở đây, không thì dòng cuối lại bị che.
     */
    body:has(.ota-dock) .ota-footer { padding-bottom: 148px; }
    .ota-dock__btn { width: 48px; height: 48px; }
    .ota-dock__badge { width: 31px; height: 31px; }
    .ota-dock__badge svg { width: 31px; height: 31px; }
}

/* Ai đặt hệ điều hành giảm chuyển động thì bỏ hết hiệu ứng. */
@media (prefers-reduced-motion: reduce) {
    .ota-dock__btn { transition: none; }
    .ota-dock__btn:hover, .ota-dock__btn:focus-visible { transform: none; }
}

/*
 * Đoạn chữ dài gấp lại còn mấy dòng đầu (xem khối `data-clamp` trong `theme.js`).
 *
 * `-webkit-line-clamp` là cách duy nhất cắt theo SỐ DÒNG mà mọi trình duyệt hiện nay đều hiểu; cắt
 * theo chiều cao cố định thì đổi cỡ chữ một cái là cắt giữa dòng.
 *
 * Lớp `is-clamped` do JavaScript gắn, nên tắt JavaScript là chữ hiện đủ - đúng thứ muốn có.
 */
.ota-intro__body.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.ota-clamp__more {
    margin-top: 10px; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 600; color: var(--ota-brand); cursor: pointer;
}
.ota-clamp__more:hover { text-decoration: underline; }

/* ── Câu hỏi thường gặp ────────────────────────────────────────────────────
 *
 * HAI CỘT chiếm hết bề ngang, tiêu đề nằm trên như các khối khác.
 *
 * Mười câu xếp một cột thì khối cao gấp đôi và nửa bề ngang bỏ trống.
 *
 * Dùng `<details>`/`<summary>` của chính HTML: gập mở được khi JavaScript tắt, bàn phím dùng được,
 * và bộ máy tìm kiếm đọc được câu trả lời bên trong.
 *
 * ⚠️ Hai cột là hai `<div>` do PHP chia sẵn, KHÔNG phải `columns` của CSS. Khối `<details>` mở ra
 * sẽ cao lên, và CSS multi-column cân lại chiều cao hai cột mỗi lần đó - các câu bên dưới nhảy sang
 * cột kia ngay dưới ngón tay người đang bấm.
 */
.ota-faq {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px; align-items: start; margin-top: 26px;
}

.ota-faq__col { display: flex; flex-direction: column; gap: 12px; }

.ota-faq__item {
    background: #fff; border: 1px solid var(--ota-line); border-radius: var(--ota-radius-sm);
    padding: 0 18px;
}

.ota-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 0; cursor: pointer; font-weight: 600; list-style: none;
}
/* Bỏ mũi tên mặc định của trình duyệt để tự vẽ mũi tên bên dưới. */
.ota-faq__item summary::-webkit-details-marker { display: none; }

/*
 * MŨI TÊN CHỈ XUỐNG, xoay ngửa lên khi mở.
 *
 * Vẽ bằng hai cạnh viền của một ô vuông xoay 45 độ, không dùng ký tự: ký tự mũi tên khác nhau ở mỗi
 * phông và nhiều máy không có glyph, rơi về ô vuông rỗng.
 *
 * ⚠️ Xoay quanh TÂM ô (`transform-origin` mặc định) nên mũi tên phải được đẩy lên trước bằng
 * `margin-top`: hai cạnh viền nằm lệch xuống dưới tâm hình học của ô, để nguyên thì lúc mở nó nhảy
 * một nhịp lên trên.
 */
.ota-faq__item summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
    border-right: 2px solid var(--ota-brand); border-bottom: 2px solid var(--ota-brand);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.ota-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }

.ota-faq__answer {
    padding: 0 0 16px; color: var(--ota-ink-soft); line-height: 1.75;
    border-top: 1px solid var(--ota-line); padding-top: 14px; margin-top: -1px;
}

@media (max-width: 760px) {
    .ota-faq { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ota-faq__item summary::after { transition: none; }
}

/* ── Dải logo đối tác ──────────────────────────────────────────────────────
 *
 * MỘT DẢI THẤP, không phải một khối như những phần khác của trang chủ.
 *
 * Trang chủ đang là chuỗi khối cùng khuôn: tiêu đề căn giữa rồi lưới thẻ bên dưới. Thêm một khối
 * nữa đúng khuôn đó là cuộn mãi không có nhịp nghỉ. Dải này cố ý thấp và nằm ngang: chữ bên trái,
 * logo bên phải, cả cụm cao bằng đúng một hàng logo.
 *
 * Kẻ trên và kẻ dưới thay cho nền riêng - nó đọc như một đường phân cách có nội dung.
 */
.ota-partners {
    padding: 26px 0;
    border-top: 1px solid var(--ota-line);
    border-bottom: 1px solid var(--ota-line);
}

.ota-partners__wrap { display: flex; align-items: center; gap: 40px; }

/*
 * Nhãn không xuống dòng và không co lại: nó là mốc neo bên trái, gãy đôi thành hai dòng là cả dải
 * cao gấp rưỡi mà chẳng được gì.
 *
 * ⚠️ `nowrap` chứ KHÔNG phải một `max-width` ước lượng. Bản đầu đặt 140px, đo ra dòng chữ cần 143px
 * nên nó gãy làm hai - lệch đúng 3px. Chiều rộng thật đổi theo phông của từng máy, nên chốt bằng
 * hành vi (cấm xuống dòng) chứ đừng chốt bằng một con số.
 */
.ota-partners__label {
    flex: none; margin: 0; white-space: nowrap;
    font-size: 13px; font-weight: 600; line-height: 1.4;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ota-ink-soft);
}

/*
 * Logo TRẢI ĐỀU hết bề ngang bằng lưới chia đều, không xếp sát nhau rồi bỏ trống bên phải.
 *
 * Bản đầu dùng flex với `gap` cố định: bốn logo chiếm một phần ba dải và hai phần ba còn lại trống
 * huơ, nhìn như đang thiếu dữ liệu chứ không phải một dải cố ý thưa.
 *
 * `auto-fit` + `minmax` để số logo nào cũng lấp kín: ít thì mỗi ô rộng ra, nhiều thì xuống hàng.
 */
.ota-partners__list {
    flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: center; gap: 16px 24px;
}

/* Căn giữa trong ô của mình: logo ngang và logo vuông rộng chênh nhau, căn trái là hàng răng cưa. */
.ota-partners__item { display: flex; align-items: center; justify-content: center; }

/*
 * Logo giữ MÀU THẬT, trỏ chuột vào thì phóng to nhẹ.
 *
 * Bản đầu lọc xám cho đỡ chói, nhưng logo đối tác chính là thứ cần nhận ra ngay - xám đi thì mất
 * đúng cái màu thương hiệu mà khách dùng để nhận diện, và cả dải trông như ảnh hỏng.
 *
 * ⚠️ Phóng to bằng `transform`, KHÔNG bằng `height`. Đổi `height` là ô lưới cao lên theo và cả dải
 * giật một nhịp mỗi lần rê chuột qua; `transform` không đụng tới bố cục.
 */
.ota-partners__item img {
    height: 50px; max-width: 100%; width: auto; object-fit: contain;
    transition: transform .2s ease;
}

.ota-partners__item img:hover { transform: scale(1.12); }

/*
 * Màn hẹp: CUỘN NGANG chứ không xuống dòng.
 *
 * Tám logo xuống dòng trên điện thoại thành một khối bốn hàng cao bằng nửa màn hình - đúng thứ dải
 * này sinh ra để tránh. Cho trượt ngang thì nó vẫn là một dải, và bản thân việc trượt được cũng nói
 * cho khách biết còn logo nữa ở bên phải.
 */
@media (max-width: 700px) {
    .ota-partners__wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
    /*
     * ⚠️ Đổi hẳn sang `flex` ở đây, KHÔNG giữ lưới. Lưới `auto-fit` luôn co các ô cho vừa bề ngang
     * nên không bao giờ tràn ra để mà cuộn - dải vẫn xuống hàng thành một khối cao.
     */
    .ota-partners__list {
        width: 100%; display: flex; flex-wrap: nowrap; gap: 28px;
        overflow-x: auto; scroll-snap-type: x proximity;
        /* Thanh cuộn ẩn: đây là một dải trang trí, thanh cuộn xám cắt ngang dưới logo trông như lỗi. */
        scrollbar-width: none;
    }
    .ota-partners__list::-webkit-scrollbar { display: none; }
    .ota-partners__item { flex: none; scroll-snap-align: start; }
    .ota-partners__item img { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .ota-partners__item img { transition: none; }
    .ota-partners__item img:hover { transform: none; }
}

/* ── Khối "Cần tư vấn thêm?" ───────────────────────────────────────────────
 *
 * Nổi ở góc dưới BÊN TRÁI. Góc phải đã có cụm nút Zalo/Messenger; hai khối nổi cùng một góc thì
 * khối sau che nút của khối trước.
 *
 * ⚠️ `hidden` do JavaScript gỡ, CSS KHÔNG được đè nó. Vì vậy mọi quy tắc ở đây phải chấp nhận
 * `[hidden]` vẫn ẩn - đừng khai `display` cho `.ota-advice` ở trạng thái mặc định.
 */
.ota-advice {
    position: fixed; left: 20px; bottom: 20px; z-index: 60;
    width: 300px; max-width: calc(100vw - 40px);
    padding: 18px 20px 20px;
    background: var(--ota-bg); border: 1px solid var(--ota-line); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
    /* Trượt lên khi mở. Trạng thái đóng nằm ở đây, `.is-open` mới đưa về vị trí thật. */
    transform: translateY(12px); opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.ota-advice.is-open { transform: none; opacity: 1; }

.ota-advice__close {
    position: absolute; top: 8px; right: 10px;
    padding: 4px 8px; border: 0; background: none;
    font-size: 22px; line-height: 1; color: var(--ota-ink-soft); cursor: pointer;
}

.ota-advice__close:hover { color: var(--ota-ink); }

.ota-advice__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--ota-ink); }
.ota-advice__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ota-ink-soft); }

.ota-advice__field { display: block; margin-bottom: 10px; }
.ota-advice__field span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ota-ink-soft); }

.ota-advice__field input,
.ota-advice__field textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--ota-line); border-radius: 8px;
    font: inherit; font-size: 14px; color: var(--ota-ink); background: var(--ota-bg);
}

/*
 * Chặn kéo giãn ô nội dung. Khối này nổi cố định ở góc màn hình; kéo cao lên là nó tràn khỏi màn
 * hình và không cuộn lại được.
 */
.ota-advice__field textarea { resize: none; display: block; }

.ota-advice__field input:focus,
.ota-advice__field textarea:focus { outline: 2px solid var(--ota-brand); outline-offset: -1px; }

/* Chữ "(không bắt buộc)" nhạt hơn nhãn để mắt vẫn đọc nhãn trước. */
.ota-advice__field em { font-style: normal; opacity: .75; }

/*
 * Bẫy bot. Ẩn bằng `position: absolute` + `left: -9999px` chứ KHÔNG bằng `display: none`: một số
 * bot bỏ qua đúng những ô `display: none`, và cách này thì chúng vẫn thấy ô để mà điền vào.
 */
.ota-advice__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ota-advice__error { margin: 0 0 10px; font-size: 13px; color: #b42318; }

.ota-advice__submit {
    width: 100%; padding: 10px 16px; border: 0; border-radius: 8px;
    background: var(--ota-brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}

.ota-advice__submit:hover { filter: brightness(1.06); }
.ota-advice__submit:disabled { opacity: .6; cursor: default; }

.ota-advice__done { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ota-ink); }

/*
 * Màn hẹp: dải ngang sát đáy, chừa chỗ cho cụm nút chat bên phải.
 *
 * Giữ nguyên thẻ 300px trên điện thoại thì nó đè lên đúng hai nút Zalo/Messenger, và cả hai cùng
 * vô dụng.
 */
@media (max-width: 640px) {
    /*
     * `right: 76px` chừa đúng cột nút chat: 12 (lề `.ota-dock`) + 52 (bề ngang nút) + 12 (khe).
     * Kéo hết bề ngang thì khối này đè lên cả hai nút Zalo/Messenger và cả ba cùng vô dụng.
     */
    .ota-advice {
        left: 12px; right: 76px; bottom: 12px; width: auto; max-width: none;
        padding: 16px 16px 18px;
    }
    .ota-advice__lead { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ota-advice { transition: none; }
}

/* ── Hộp thoại chi tiết đơn ở trang tài khoản ──────────────────────────────
 *
 * Dùng lại khung `.ota-modal`, chỉ nới bề ngang: bên trong là HAI CỘT của trang hoàn tất, mà 760px
 * thì mỗi cột chỉ còn hơn 350px và bảng tiền lẫn khối QR đều chật.
 */
.ota-order-modal { width: min(960px, calc(100vw - 32px)); }

/*
 * Bỏ khoảng đệm quanh thân: phần thân nạp vào đã là hai thẻ có viền và có đệm riêng, cộng thêm
 * một lớp đệm nữa là hộp thoại viền trong viền.
 */
.ota-order-modal .ota-modal__body { padding: 18px; background: var(--ota-bg-alt); }

/*
 * ⚠️ KHÔNG cần khai lại lưới hai cột ở đây.
 *
 * `.ota-done__grid` mặc định là MỘT cột (flex dọc) và chỉ thành hai cột trong `@media (min-width:
 * 992px)`. Hộp thoại rộng tối đa 960px, nhưng media query đo BỀ NGANG MÀN HÌNH chứ không đo hộp
 * thoại - nên trên màn rộng nó vẫn là hai cột đúng như ngoài trang, còn màn hẹp thì tự về một cột.
 */

.ota-order-modal__status { margin: 0; padding: 24px 4px; text-align: center; color: var(--ota-ink-soft); }