/* bien.css — lớp "chất biển" cho trang chủ MH Travel.
   Tải SAU trangchu-goc.css và trangchu-mht.css.

   Nguyên tắc: KHÔNG đụng bố cục đã trích từ Ái Vân, chỉ thêm lớp da bên ngoài —
   dải sóng ngăn khối, màu biển, và vài chuyển động nhẹ. Sửa bố cục thì lần trích
   sau lại lệch; thêm da thì trích lại vẫn dùng được.

   Mọi chuyển động đều tắt khi máy khách bật "giảm chuyển động" (cuối file). */

:root {
  /* Bảng màu biển — đặt cạnh navy + đỏ thương hiệu, không thay chúng */
  --bien-sau:   #0b2545;   /* biển sâu, dùng làm nền tối */
  --bien-vua:   #12507a;
  --bien-nong:  #1a8fa8;   /* nước nông gần bờ */
  --ngoc:       #24b6c9;   /* xanh ngọc — điểm nhấn mát */
  --cat:        #f4e4c8;   /* cát */
  --cat-dam:    #e0c9a0;
  --troi:       #eaf6fb;   /* trời sớm, nền nhạt cho khối sáng */
}

/* ═══ 1. DẢI SÓNG NGĂN KHỐI ═══════════════════════════════════════════════
   Dùng ở mép dưới khối nền tối để chuyển sang khối nền sáng, thay cho đường
   cắt ngang phẳng. Sóng vẽ bằng SVG nội tuyến trong CSS nên không thêm lượt
   tải nào, và co giãn theo bề ngang màn hình. */
.b-song {
    position: relative;
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
}
.b-song svg { display: block; width: 100%; height: 100%; }

/* Hai lớp sóng trôi ngược chiều nhau — nhìn có chiều sâu hơn một lớp.
   Mỗi lớp rộng gấp đôi khung rồi trượt đúng một nửa, nên nối liền không thấy mối. */
.b-song .song-lop { animation: bienTroi 18s linear infinite; }
.b-song .song-lop-2 { animation: bienTroi 26s linear infinite reverse; opacity: .55; }
@keyframes bienTroi {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ═══ 2. BANNER — MỘT KIỂU CHO CẢ SITE ═══════════════════════════════════
   Bìa trang chủ (.m-bia) và banner các trang trong (.m-bn) dùng CHUNG bộ luật
   này. Trước kia mỗi bên một bản: trang chủ nền xanh biển cao 520px có sóng,
   các trang trong nền xanh LÁ cao một nửa, nhãn kiểu khác, cắt phựt sang nền
   sáng không có sóng — đi từ trang chủ sang trang trong như bước sang site
   khác. Viết chung ở đây để sửa một lần là cả site đổi theo, không còn cảnh
   sửa bên này quên bên kia.

   Khác biệt CÒN GIỮ giữa hai loại: bìa trang chủ cao hơn và có ô tìm phòng đè
   lên, nên tiêu đề lớn hơn một nhịp. Đó là khác biệt có chủ ý, không phải lệch. */
.m-bia,
.m-bn {
    position: relative;
    background-color: var(--bien-sau);
    overflow: hidden;
}
/* Không ảnh thì nền chuyển sắc biển — trước .m-bn là xanh lá #0f766e→#134e4a,
   lạc hẳn khỏi bảng màu của site. */
.m-bn {
    background-image: linear-gradient(160deg, var(--bien-sau, #0b2545) 0%, var(--bien-vua, #14416e) 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.m-bn.m-bn-anh { background-image: none; }   /* có ảnh thì ảnh làm nền, không đè gradient lên */
/* Ảnh banner hai cỡ. Cùng luật với .m-bia trong mht.css và cùng ngưỡng 900px
   với banner-slider.js — ba chỗ lệch nhau là máy tải một ảnh rồi CSS lại đòi
   ảnh khác, thành tải hai lần. Đo được bản điện thoại nhẹ hơn 64% mà SSIM
   0,987, tức mắt thường không phân biệt ở cỡ màn hình đó. */
.m-bn.m-bn-anh[style*="--bn-dt"] { background-image: var(--bn-dt); }
@media (min-width: 900px) { .m-bn.m-bn-anh[style*="--bn-pc"] { background-image: var(--bn-pc); } }
/* Lớp phủ CÓ HƯỚNG, không phủ đều cả tấm.
   Bản đầu phủ theo trục dọc, đều nhau từ trái sang phải — hỏng cả hai đường:
   ảnh bị bạc màu như nhìn qua kính mờ, mà chữ vẫn chìm vì rơi đúng vào vùng
   ảnh sáng. Đo ra khối chữ chỉ chiếm từ 22% đến 74% chiều ngang, nửa phải bỏ
   trống — nên dồn độ đậm về bên trái, thả nửa phải gần như trong để ảnh giữ
   nguyên màu.

   Các mốc dưới đây tính theo trường hợp xấu nhất là ảnh TRẮNG TINH: tại mốc
   75% (đúng mép phải của tiêu đề) độ phủ .62 cho chữ trắng 4,87:1 — vẫn trên
   chuẩn 4,5:1. Ảnh thật tối hơn thì chỉ dễ đọc hơn. Đừng hạ các mốc này xuống
   cho "ảnh sáng hơn": ảnh sáng là lúc chữ biến mất. */
.m-bia::before,
.m-bn.m-bn-anh::after {
    content: '';
    position: absolute; inset: 0;
    background:
        /* 1 · trục ngang, RẤT nhẹ — chỉ đủ dìm nền, không còn gánh việc làm nổi
               chữ nữa. Việc đó đã giao cho tấm kính .m-bia-chu bên dưới. */
        linear-gradient(96deg,
            rgba(8,28,54,.48) 0%,
            rgba(8,28,54,.34) 48%,
            rgba(8,28,54,.16) 78%,
            rgba(8,28,54,.08) 100%),
        /* 2 · đáy đậm nhẹ để dải chấm và ô đếm đọc được trên mọi ảnh */
        linear-gradient(180deg, transparent 55%, rgba(8,28,54,.50) 100%),
        /* 3 · ánh ngọc góc trên phải, giữ chất biển của thương hiệu */
        radial-gradient(90% 70% at 88% 6%, rgba(36,182,201,.18) 0%, transparent 62%);
    z-index: 0;
}

/* ── Tấm kính sau khối chữ ──────────────────────────────────────────────────
   Đây mới là thứ làm chữ đọc được, chứ không phải lớp phủ toàn ảnh. Đo trên
   nền TRẮNG TINH (trường hợp xấu nhất) tấm này cho chữ trắng 8,5:1 — dư chuẩn
   4,5:1 — mà ảnh xung quanh chỉ mất 8–16% độ sáng ở nửa phải.

   Trước đây phải phủ tối tới 90% cả nửa trái mới đọc được chữ, và đó chính là
   cái làm banner "mờ quá". */
.m-bia-chu,
.m-bn-chu {
    position: relative;
    /* 720px cho cả trang chủ lẫn trang trong. Hai khung rộng khác nhau thì cùng
       một tiêu đề chỗ vừa chỗ tràn, mà mốc số ký tự chỉ có một bộ. */
    max-width: 720px;
    margin-bottom: 22px;         /* không thì ô tìm phòng dính sát mép kính */
    padding: 26px 30px 28px;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(6,22,44,.62) 0%, rgba(6,22,44,.52) 100%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 46px rgba(3,12,26,.34);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
/* Trang trong không có ô tìm phòng nằm dưới nên không cần chừa khoảng, và chữ
   thường dài hơn tiêu đề trang chủ nên cho rộng thêm chút. */
.m-bn-chu { max-width: 720px; margin-bottom: 0; }
/* Máy cũ không có backdrop-filter: đắp thêm nền đặc hơn để không hụt tương phản */
@supports not (backdrop-filter: blur(4px)) {
    .m-bia-chu, .m-bn-chu { background: rgba(6,22,44,.82); }
}
/* Vệt ngọc mảnh chạy dọc mép trái — chi tiết nhận diện, không phải trang trí thừa */
.m-bia-chu::before,
.m-bn-chu::before {
    content: '';
    position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--ngoc, #24b6c9), var(--do, #e84038));
}
.m-bia-chu > :first-child, .m-bn-chu > :first-child { margin-top: 0; }
.m-bia-chu > :last-child,  .m-bn-chu > :last-child  { margin-bottom: 0; }
.m-bia > * { position: relative; z-index: 1; }

/* Ảnh tươi lên một nhịp. Đặt trên .hero-slide chứ không trên .m-bia — filter ở
   khối cha sẽ kéo theo cả chữ, làm tiêu đề nhoè theo ảnh. */
.m-bia .hero-slide,
.m-bn .hero-slide { filter: saturate(1.12) contrast(1.05); }

/* Chữ tách khỏi ảnh bằng bóng mềm. Bóng lớn tán rộng làm nền tối cục bộ ngay
   sau nét chữ, bóng nhỏ viền lại mép — cách này giữ được chữ sắc, khác với
   việc phủ thêm một lớp tối lên toàn ảnh. */
/* ── Ngắt dòng tiêu đề ──────────────────────────────────────────────────
   Trình duyệt xuống dòng khi hết chỗ, nên tiêu đề hay rơi vào cảnh dòng cuối
   còn trơ MỘT chữ — "Ở rộng rãi hơn khách sạn, tính theo / căn". Chữ lẻ đó
   nhìn hụt hẫng.

   text-wrap:balance bảo trình duyệt chia đều các dòng thay vì nhồi đầy dòng
   trên rồi vứt phần thừa xuống dưới. Đặt ở đây một lần cho mọi tiêu đề banner,
   không phải đi chèn dấu cách cứng vào từng câu — cách đó vỡ ngay khi anh Vân
   sửa tiêu đề trong admin.

   Trình duyệt cũ không hiểu thì bỏ qua dòng này, tiêu đề về đúng như cũ chứ
   không hỏng. */
/* Gồm cả bìa riêng của trang Liên hệ (.lx-hero) và Nội thất (.nt-hero) — hai
   trang đó dùng khối bìa bê từ bên Ái Vân nên tên lớp khác, sót là chúng vẫn
   để chữ lẻ như cũ. */
.m-bia h1, .m-bn h1, .lx-hero h1, .nt-hero h1, .lx-h2, .nt-h2 {
    text-wrap: balance;
}

/* ── Tiêu đề banner nằm gọn MỘT DÒNG ────────────────────────────────────
   PHP đếm số ký tự rồi gắn lớp bn-d1…bn-d5; cỡ chữ co dần theo. Nhờ vậy anh
   Vân gõ tiêu đề dài ngắn thế nào thì nó cũng tự vừa một dòng, không phải
   canh từng chữ.

   Vì sao không dùng một cỡ chữ cố định rồi cho xuống dòng: dòng cuối hay còn
   trơ một chữ, nhìn hụt. Vì sao không ép nowrap cho mọi cỡ: tiêu đề quá dài
   mà ép một dòng thì chữ bé bằng chữ thân bài, đọc còn khó hơn.

   Chỉ ép một dòng từ khổ 820px trở lên. Điện thoại bề ngang có bấy nhiêu,
   ép nữa là chữ li ti. */
@media (min-width: 820px) {
    .m-bia h1, .m-bn h1 { white-space: nowrap; }
    .m-bia h1.bn-d1, .m-bn h1.bn-d1 { font-size: clamp(28px, 3.4vw, 42px); }
    .m-bia h1.bn-d2, .m-bn h1.bn-d2 { font-size: clamp(27px, 3.0vw, 38px); }
    .m-bia h1.bn-d3, .m-bn h1.bn-d3 { font-size: clamp(25px, 2.6vw, 32px); }
    .m-bia h1.bn-d4, .m-bn h1.bn-d4 { font-size: clamp(23px, 2.3vw, 28px); }
    .m-bia h1.bn-d5, .m-bn h1.bn-d5 { font-size: clamp(21px, 2.0vw, 25px); }
    /* Quá dài: thả cho xuống dòng, chia đều hai dòng thay vì ép co tiếp */
    .m-bia h1.bn-d6, .m-bn h1.bn-d6 {
        white-space: normal;
        font-size: clamp(24px, 2.3vw, 30px);
    }
}
/* Tấm kính trang chủ nới bằng trang trong: khung hai bên khác nhau thì cùng
   một tiêu đề chỗ vừa chỗ tràn, mà mốc ký tự chỉ có một bộ. */
.m-bia-chu { max-width: 720px; }
/* Đoạn văn dùng 'pretty': nó không chia đều mà chỉ lo mỗi việc không để dòng
   cuối trơ một chữ — hợp với phụ đề dài, nơi chia đều sẽ làm dòng ngắn bất
   thường. */
.m-bia p, .m-bn p, .m-bia-chu p, .m-bn-chu p,
.lx-hero p, .lx-lead, .nt-hero p, .nt-lead {
    text-wrap: pretty;
}

.m-bia h1 {
    /* Chặn trên 46px chứ không 52px: tấm kính rộng 640px, chữ 52px đẩy tiêu đề
       xuống ba dòng làm khối cao vống, lấn cả ô tìm phòng. */
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.14;
    letter-spacing: -.022em;
    text-shadow: 0 2px 20px rgba(4,16,34,.55), 0 1px 3px rgba(4,16,34,.45);
}
/* Trang trong nhỏ hơn bìa trang chủ một nhịp — trang chủ là mặt tiền, trang
   trong là chỗ làm việc. Cùng ngôn ngữ, khác âm lượng. */
.m-bn h1 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.16;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    max-width: none;
    text-shadow: 0 2px 18px rgba(4,16,34,.5), 0 1px 3px rgba(4,16,34,.42);
}
.m-bia > .m-bao > p,
.m-bia p,
.m-bn p {
    color: #e9f3f1;                        /* sáng hơn #dbeae7 một nhịp */
    text-shadow: 0 1px 10px rgba(4,16,34,.5);
}
.m-bn p { font-size: 16.5px; line-height: 1.72; max-width: none; }

/* Nhãn trên tiêu đề — kính mờ, viền ngọc, chữ trắng hẳn. Trước .m-bn-nhan là
   viên trắng đục còn .m-bia-nhan là viên đỏ: hai trang cạnh nhau trông như hai
   thương hiệu. */
.m-bia .m-bia-nhan,
.m-bn .m-bn-nhan {
    background: rgba(36,182,201,.26);
    border: 1px solid rgba(120,225,240,.55);
    color: #eafcff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 1px 6px rgba(4,16,34,.45);
}

/* Số liệu nhỏ dưới phụ đề — "12 bài trong vùng này" */
.m-bn-so { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.m-bn-so div { font-size: 13.5px; color: rgba(233,243,241,.82); }
.m-bn-so b { font-size: 20px; font-weight: 900; color: #fff; margin-right: 5px; }

/* Chiều cao: trang trong thấp hơn bìa trang chủ nhưng vẫn phải ra dáng banner,
   không phải một dải mỏng. Căn giữa theo chiều dọc như bìa. */
.m-bn .m-bn-trong {
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 44px; padding-bottom: 44px;
}

@media (max-width: 820px) {
    /* Màn hẹp: tấm kính trải gần hết bề ngang nên bo góc lớn và đệm rộng trông
       nặng nề — thu lại cho vừa mắt. */
    .m-bia-chu, .m-bn-chu { max-width: none; padding: 20px 18px 22px; border-radius: 16px; }
    .m-bn .m-bn-trong { min-height: 0; padding-top: 34px; padding-bottom: 34px; }
    .m-bia::before,
    .m-bn.m-bn-anh::after {
        background:
            linear-gradient(180deg, rgba(8,28,54,.42) 0%, rgba(8,28,54,.34) 55%, rgba(8,28,54,.52) 100%),
            radial-gradient(90% 60% at 85% 6%, rgba(36,182,201,.16) 0%, transparent 62%);
    }
}

/* Nhãn nhỏ trên tiêu đề — kiểu vé lên tàu */
.m-bia-nhan {
    background: rgba(36,182,201,.18);
    border: 1px solid rgba(36,182,201,.45);
    color: #bdf0f7;
}

/* ═══ 3. KHỐI SỐ LIỆU ════════════════════════════════════════════════════ */
.hi-stat {
    background: linear-gradient(160deg, #fff 0%, var(--troi) 100%);
    border-color: #cfe6ef;
}
.hi-num { color: var(--bien-vua); }
/* Nhãn dưới số: màu trích từ Ái Vân là #7b8a99, trên nền sáng chỉ đạt 3,38:1 —
   dưới chuẩn 4,5:1, mà đây lại là chữ nhỏ 11,5px in hoa nên càng khó đọc.
   #55677a đạt 5,74:1. */
.hi-lab { color: #55677a; }

/* ═══ 4A. BỐN LÝ DO ══════════════════════════════════════════════════════
   Thẻ trắng bo lớn, bóng dịu CÓ SẴN (không đợi rê chuột), huy hiệu biểu tượng
   58px viền gradient, số thứ tự 01–04 in chìm góc phải làm nhịp thị giác.
   Khác hẳn khối ba bước bên dưới để người đọc phân biệt được hai khối. */
.b-ly-do {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.b-ld-o {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3edf3;
    border-radius: 18px;
    padding: 28px 24px 26px;
    box-shadow: 0 6px 18px rgba(11,37,69,.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.b-ld-o:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(11,37,69,.13);
    border-color: #bfdcea;
}
/* Số thứ tự in chìm góc trên phải — như số trang một cuốn cẩm nang */
.b-ld-stt {
    position: absolute; top: 14px; right: 18px;
    font-size: 34px; font-weight: 900; letter-spacing: -1px;
    color: #edf4f8;
    transition: color .22s ease;
    pointer-events: none;
    line-height: 1;
}
.b-ld-o:hover .b-ld-stt { color: #d9ecf4; }
/* Huy hiệu biểu tượng: viền gradient làm bằng hai lớp nền — lớp ngoài gradient,
   lớp trong trắng, không cần thêm thẻ bọc */
.b-ld-ic {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 17px;
    font-size: 27px; line-height: 1;
    background:
        linear-gradient(#f2fafc, #e3f4f9) padding-box,
        linear-gradient(140deg, var(--ngoc), var(--bien-vua)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 4px 10px rgba(26,143,168,.14);
    margin-bottom: 16px;
    transition: transform .22s ease;
}
.b-ld-o:hover .b-ld-ic { transform: scale(1.06) rotate(-3deg); }
.b-ld-o h3 {
    margin: 0 0 8px;
    font-size: 17px; line-height: 1.42;
    color: var(--muc);
    letter-spacing: -.2px;
    /* chừa chỗ cho số in chìm, tiêu đề dài không chui xuống dưới nó */
    padding-right: 30px;
}
.b-ld-o p { margin: 0; font-size: 14.5px; line-height: 1.72; color: #5a6b7a; }

/* ═══ 4B. BA BƯỚC — PANÔ ĐẶT PHÒNG ═══════════════════════════════════════
   Cả khối nằm trong một tấm panô nền biển nhạt bo 22px — tách khỏi nền trang
   và khỏi khối lý do phía trên. Ba chặng nối bằng nét đứt qua tâm vòng tròn,
   dưới cùng là cặp nút hành động: đọc xong quy trình thì bấm được ngay. */
.b-dat-phong {
    /* Khoảng hở giữa các chặng khai thành BIẾN — công thức vẽ đường nối phải
       trừ đúng nó. Sửa gap mà quên công thức là đường lệch (đã dính: đầu 11px
       đuôi 31px). */
    --ht-ho: 24px;
    background:
        radial-gradient(90% 70% at 8% 0%, rgba(36,182,201,.10) 0%, transparent 55%),
        radial-gradient(70% 60% at 96% 100%, rgba(232,64,56,.06) 0%, transparent 60%),
        linear-gradient(165deg, #f3fafc 0%, #e9f4f9 100%);
    border: 1px solid #d8eaf2;
    border-radius: 22px;
    padding: 40px 34px 36px;
}
.b-hanh-trinh {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ht-ho);
    margin-top: 10px;
}
.b-ht-o {
    position: relative;
    text-align: center;
    /* KHÔNG đệm ngang: công thức vẽ đường nối tính theo bề rộng .b-ht-dau, mà
       đệm ở đây làm .b-ht-dau hẹp hơn cột đúng bằng phần đệm — đường lệch 20px
       (đã dính). Chữ đã tự thở bằng max-width của <p>. */
    padding: 0;
}
.b-ht-dau { position: relative; margin-bottom: 16px; }
/* Đường nối: vẽ trong .b-ht-dau nên tự nằm đúng cao độ tâm vòng tròn,
   không phụ thuộc chiều cao phần chữ bên dưới */
@media (min-width: 780px) {
    .b-ht-o:not(:last-child) .b-ht-dau::after {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(50% + 45px);
        right: calc(45px - var(--ht-ho) - 50%);
        border-top: 2px dashed #a9cddd;
    }
    /* mũi nhọn nhỏ cuối nét đứt — chỉ hướng đi tới */
    .b-ht-o:not(:last-child) .b-ht-dau::before {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(45px - var(--ht-ho) - 50% - 1px);
        transform: translateY(-4px) rotate(45deg);
        width: 8px; height: 8px;
        border-top: 2px solid #a9cddd;
        border-right: 2px solid #a9cddd;
    }
}
.b-ht-so {
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; margin: 0 auto;
    border-radius: 50%;
    font-size: 24px; font-weight: 900; color: #fff;
    /* Bắt đầu từ #1a8fa8, KHÔNG từ xanh ngọc tươi #24b6c9: màu kia với chữ trắng
       chỉ đạt 2,44:1 — không đọc nổi. #1a8fa8 đạt 3,79:1, đủ cho chữ lớn đậm. */
    background: linear-gradient(140deg, var(--bien-nong), var(--bien-vua));
    box-shadow: 0 8px 18px rgba(18,80,122,.28), 0 0 0 7px #fff, 0 0 0 8px #cfe4ee;
    position: relative; z-index: 1;
}
.b-ht-nhan {
    display: inline-block;
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    /* --bien-nong (#1a8fa8) trên nền panô sáng chỉ đạt 3,59:1 — chữ 11px cần
       4,5:1. Dùng màu biển vừa đậm hơn. */
    color: var(--bien-vua);
    margin-bottom: 6px;
}
.b-ht-o h3 { margin: 0 0 8px; font-size: 17.5px; line-height: 1.4; color: var(--muc); letter-spacing: -.2px; }
.b-ht-o p  { margin: 0 auto; font-size: 14.5px; line-height: 1.72; color: #52646f; max-width: 290px; }

.b-ht-cta {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-top: 32px; padding-top: 28px;
    border-top: 1px dashed #c4dde9;
}

@media (max-width: 779px) {
    .b-dat-phong { padding: 28px 18px 26px; border-radius: 18px; }
    /* Màn hẹp: xếp dọc, vòng tròn lùi sang trái cạnh chữ, thêm thanh dọc mảnh
       nối các chặng cho mạch không đứt */
    .b-hanh-trinh { grid-template-columns: 1fr; gap: 22px; }
    .b-ht-o {
        display: grid;
        grid-template-columns: 54px 1fr;
        column-gap: 16px;
        text-align: left;
        padding: 0;
    }
    .b-ht-dau { grid-row: 1 / 4; margin: 0; }
    .b-ht-so {
        width: 54px; height: 54px; margin: 0; font-size: 20px;
        box-shadow: 0 5px 12px rgba(18,80,122,.24), 0 0 0 5px #fff, 0 0 0 6px #cfe4ee;
    }
    /* thanh nối dọc giữa các chặng */
    .b-ht-o:not(:last-child) .b-ht-dau::after {
        content: '';
        position: absolute;
        left: 50%; top: 62px; bottom: -26px;
        border-left: 2px dashed #a9cddd;
    }
    .b-ht-o p { max-width: none; }
    .b-ht-cta { margin-top: 24px; padding-top: 22px; }
}

/* ═══ 5. THẺ VILLA ═══════════════════════════════════════════════════════ */
.rent-card, .hot-card {
    transition: transform .22s ease, box-shadow .22s ease;
}
.rent-card:hover, .hot-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(11,37,69,.16);
}
.rent-img img, .hot-card-img img { transition: transform .5s ease; }
.rent-card:hover .rent-img img, .hot-card:hover .hot-card-img img { transform: scale(1.05); }

/* Nhãn giá — nền biển sâu thay vì đen, chữ cát cho ấm */
.rent-price {
    background: linear-gradient(135deg, rgba(11,37,69,.94), rgba(18,80,122,.94));
    color: var(--cat);
}

/* ═══ 6. KHỐI TỐI (tiện ích) ═════════════════════════════════════════════ */
.am-section {
    background: linear-gradient(165deg, var(--bien-sau) 0%, var(--bien-vua) 55%, #0a1f38 100%);
}
/* đốm sáng mờ như ánh nước, đặt dưới nội dung */
.am-section::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 40% at 15% 12%, rgba(36,182,201,.20) 0%, transparent 70%),
        radial-gradient(50% 35% at 88% 78%, rgba(232,64,56,.16) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.am-section > * { position: relative; z-index: 1; }

/* ═══ 7. DẢI VỊ TRÍ ══════════════════════════════════════════════════════ */
.location-cards {
    background: linear-gradient(100deg, var(--bien-sau) 0%, var(--bien-vua) 100%);
    border-radius: 16px;
    overflow: hidden;
}

/* ═══ 8. HIỆN DẦN KHI CUỘN ═══════════════════════════════════════════════
   Khối bắt đầu mờ và thấp hơn một chút, tới nơi thì nổi lên. Nếu JavaScript
   không chạy thì .b-hien không bao giờ được gắn — nên trạng thái MẶC ĐỊNH phải
   là đã hiện, và chỉ khi JS chạy mới hạ xuống. Làm ngược lại là tắt JS thì
   trang trắng trơn. */
.js-hieu-ung .b-len { opacity: 0; transform: translateY(18px); }
.js-hieu-ung .b-len.b-hien {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.68,0,1.1);
}

/* ═══ 9. TÔN TRỌNG NGƯỜI TẮT CHUYỂN ĐỘNG ═════════════════════════════════
   Có người chóng mặt vì hiệu ứng trượt. Máy họ bật "giảm chuyển động" thì bỏ
   hết, chỉ giữ phần nhìn tĩnh. */
@media (prefers-reduced-motion: reduce) {
    .b-song .song-lop, .b-song .song-lop-2 { animation: none; }
    .rent-card, .hot-card, .rent-img img, .hot-card-img img { transition: none; }
    .rent-card:hover, .hot-card:hover { transform: none; }
    .rent-card:hover .rent-img img, .hot-card:hover .hot-card-img img { transform: none; }
    .js-hieu-ung .b-len { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
    .b-song { height: 34px; }
}