/* ══════════════════════════════════════════════════════════════════════
   bai-khoi.css — bộ khối dựng bài viết, phong cách riêng của MH Travel.

   VÌ SAO CÓ FILE NÀY
   Trước đây mỗi bài mang theo một khối <style> riêng nhét thẳng vào nội
   dung — 60 bài, 101 KB CSS lặp lại, và mỗi bài một bộ tên lớp khác nhau
   (m vc, tuc, wb, llq, cm, bh…). Muốn đổi phong cách thì phải sửa 60 chỗ,
   mà sửa xong vẫn không đồng nhất vì tên lớp không giống nhau.

   Từ nay bài mới dùng bộ lớp bt-* trong file này. Bài cũ giữ khung riêng
   cho tới khi được viết lại — không đụng vào để tránh vỡ hàng loạt.

   KHÁC GÌ KHUNG CŨ
   Khung cũ bê từ Ái Vân nên mang tông xanh lá ngọc lục bảo của bên đó.
   Hai site cùng chủ mà bài viết trông y hệt nhau thì khách không phân biệt
   được, và đó cũng là một dạng trùng lặp. Bộ này lấy tông biển: xanh sâu
   và ngọc cho khối chính, cát cho điểm nhấn, đỏ thương hiệu cho nút.
   ══════════════════════════════════════════════════════════════════════ */

.bt {
    /* Tông riêng của bài viết. Khai tại đây chứ không dùng thẳng biến toàn
       cục: bài viết cần dải màu sâu hơn giao diện chung, mà đổi biến toàn
       cục thì kéo theo cả site. */
    --bt-sau:   #0b3d4f;   /* xanh biển sâu — khối mở đầu, nền bảng */
    --bt-ngoc:  #12849b;   /* ngọc — tiêu đề mục, chữ nhấn */
    --bt-ngoc2: #0e6b7e;   /* ngọc đậm hơn, dùng khi rê chuột */
    --bt-cat:   #d9a441;   /* cát — vạch nhấn, nhãn */
    /* Đỏ thương hiệu là #e84038, nhưng chữ trắng trên nền đó chỉ đạt tương
       phản 4,02 — dưới mức 4,5. Nút là chỗ bắt buộc phải đọc rõ, nên dùng
       sắc đậm hơn của chính màu đó: đo ra 5,17. Vẫn là đỏ MH Travel, chỉ
       đậm hơn một nhịp. */
    --bt-do:    #c9312a;
    --bt-nen:   #f2f9fb;   /* nền khối nhạt, ngả xanh */
    --bt-chu:   #16262c;
    --bt-mut:   #4d6570;   /* chữ phụ */
    --bt-ke:    #d7e8ee;

    max-width: 920px;
    margin: 0 auto;
    color: var(--bt-chu);
    font-size: 17.5px;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
}
.bt * { box-sizing: border-box; }
.bt p { margin: 0 0 20px; }
.bt strong { color: var(--bt-ngoc2); font-weight: 700; }
.bt a {
    color: var(--bt-ngoc2); font-weight: 600; text-decoration: none;
    border-bottom: 2px solid rgba(18, 132, 155, .25);
}
.bt a:hover { color: var(--bt-do); border-bottom-color: var(--bt-do); }

/* ── Tiêu đề mục ────────────────────────────────────────────────────────
   Vạch cát ngắn phía trên thay cho gạch chân — chi tiết nhận diện, và giúp
   mắt bắt được chỗ bắt đầu mục mới khi lướt nhanh. */
.bt h3 {
    position: relative;
    font-size: clamp(20px, 2.9vw, 26px);
    font-weight: 800;
    color: var(--bt-sau);
    margin: 54px 0 18px;
    padding-top: 16px;
    letter-spacing: -.4px;
    line-height: 1.32;
}
.bt h3::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 42px; height: 4px; border-radius: 3px; background: var(--bt-cat);
}
.bt h4 { font-size: 17.5px; font-weight: 700; margin: 28px 0 10px; color: var(--bt-chu); }

/* ── Khối mở đầu ────────────────────────────────────────────────────────
   Khác khung cũ ở chỗ dùng nền chuyển màu theo chiều ngang và một dải sáng
   chéo, gợi mặt biển thay vì khối màu phẳng. */
.bt-mo {
    position: relative; overflow: hidden;
    border-radius: 22px; padding: 44px 38px; margin: 0 0 40px;
    /* Điểm sáng nhất của dải màu phải đủ tối để chữ trắng còn đọc được.
       Bản đầu kết thúc ở #1aa3ab: đo ra tương phản chỉ 3,06 — dưới mức 4,5,
       tức là chữ trắng ở góc phải khối bị chìm. Hạ xuống #0e6b7e thì đạt 6,0,
       màu vẫn ra chất biển mà không phải đổi chữ sang màu khác. */
    background: linear-gradient(112deg, #0b3d4f 0%, #0d5f70 58%, #0e6b7e 100%);
    color: #fff;
}
.bt-mo::after {
    content: ''; position: absolute; right: -80px; top: -90px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}
.bt-mo h2 {
    position: relative; z-index: 1; color: #fff;
    font-size: clamp(23px, 3.5vw, 33px); font-weight: 800;
    line-height: 1.28; margin: 0 0 16px; letter-spacing: -.6px;
}
.bt-mo p { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, .92); }
.bt-mo strong { color: #fff; }
.bt-tem {
    display: inline-block; position: relative; z-index: 1;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 800; padding: 7px 15px; border-radius: 20px;
    margin-bottom: 18px; background: var(--bt-cat); color: #3a2600;
}

/* ── Dải số ─────────────────────────────────────────────────────────────
   Khung cũ để số trong ô nền phẳng. Ở đây thêm vạch cát bên trái để dải số
   không bị trôi thành một mảng đồng màu khi có bốn ô liền nhau. */
.bt-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; margin: 30px 0; }
.bt-so > div {
    background: var(--bt-nen); border-left: 4px solid var(--bt-cat);
    border-radius: 0 14px 14px 0; padding: 20px 16px; text-align: left;
}
.bt-so b { display: block; font-size: 27px; font-weight: 800; line-height: 1.1; margin-bottom: 6px; letter-spacing: -1px; color: var(--bt-sau); }
.bt-so span { font-size: 12px; line-height: 1.5; display: block; font-weight: 600; color: var(--bt-mut); }

/* ── Thẻ ────────────────────────────────────────────────────────────── */
.bt-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 28px 0; }
.bt-the > div {
    background: #fff; border: 1.5px solid var(--bt-ke);
    border-radius: 18px; padding: 26px 24px; transition: .22s;
}
.bt-the > div:hover { border-color: var(--bt-ngoc); box-shadow: 0 12px 30px rgba(11, 61, 79, .1); transform: translateY(-3px); }
.bt-the h4 { margin: 0 0 10px; color: var(--bt-sau); }
.bt-the p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--bt-mut); }

/* ── Khối lưu ý ─────────────────────────────────────────────────────── */
.bt-luu {
    background: var(--bt-nen); border-left: 5px solid var(--bt-cat);
    border-radius: 0 14px 14px 0; padding: 22px 26px; margin: 28px 0;
    font-size: 16.5px; line-height: 1.85; color: var(--bt-mut);
}
.bt-luu p:last-child { margin: 0; }
.bt-luu b.nh {
    display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    margin-bottom: 9px; font-weight: 800; color: var(--bt-sau);
}

/* ── Bảng ───────────────────────────────────────────────────────────── */
.bt-bang { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px; }
.bt-bang caption { text-align: left; font-size: 12.5px; padding-bottom: 11px; font-style: italic; color: var(--bt-mut); }
.bt-bang th {
    text-align: left; padding: 13px 15px; font-size: 11.5px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 800; background: var(--bt-sau); color: #fff;
}
.bt-bang td { padding: 13px 15px; vertical-align: top; border-bottom: 1px solid var(--bt-ke); color: var(--bt-mut); }
.bt-bang td:first-child { font-weight: 700; color: var(--bt-chu); }
.bt-bang tr:nth-child(even) td { background: var(--bt-nen); }

/* ── Danh sách ──────────────────────────────────────────────────────── */
.bt-ds { list-style: none; padding: 0; margin: 22px 0; }
.bt-ds li { position: relative; padding: 0 0 13px 28px; line-height: 1.85; color: var(--bt-mut); }
.bt-ds li::before {
    content: ''; position: absolute; left: 0; top: 12px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 3px solid var(--bt-cat); background: #fff;
}
.bt-ds li b { color: var(--bt-chu); }

/* ── Ảnh ────────────────────────────────────────────────────────────── */
.bt-fig { margin: 32px 0; border-radius: 16px; overflow: hidden; background: var(--bt-nen); }
.bt-fig img { display: block; width: 100%; height: auto; }
.bt-fig figcaption { font-size: 13.5px; line-height: 1.7; padding: 12px 16px; font-style: italic; color: var(--bt-mut); }
.bt-fig figcaption span { display: block; margin-top: 6px; font-size: 11.5px; font-style: normal; opacity: .78; }

/* ── Câu hỏi thường gặp ─────────────────────────────────────────────── */
.bt-faq .faq-item { padding: 20px 0; border-bottom: 1px solid var(--bt-ke); }
.bt-faq .faq-q { font-size: 17px; font-weight: 700; margin: 0 0 9px; line-height: 1.5; color: var(--bt-ngoc2); }
.bt-faq .faq-a p { font-size: 15.5px; line-height: 1.85; margin: 0; color: var(--bt-mut); }

/* ── Điện thoại ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bt { font-size: 16.5px; }
    .bt-mo { padding: 30px 22px; border-radius: 16px; }
    .bt-bang { font-size: 14px; }
    .bt-bang th, .bt-bang td { padding: 10px 10px; }
    .bt-the > div { padding: 22px 18px; }
    .bt h3 { margin-top: 44px; }
}

/* ── Khối mời cuối bài ──────────────────────────────────────────────────
   Đây là chỗ duy nhất trong bài dùng đỏ thương hiệu. Để đỏ rải rác khắp bài
   thì tới cuối không còn gây chú ý được nữa — mà cuối bài mới là chỗ cần. */
.bt-cta {
    border-radius: 22px; padding: 36px 32px; margin: 46px 0 0; text-align: center;
    /* Điểm sáng nhất của dải màu phải đủ tối để chữ trắng còn đọc được.
       Bản đầu kết thúc ở #1aa3ab: đo ra tương phản chỉ 3,06 — dưới mức 4,5,
       tức là chữ trắng ở góc phải khối bị chìm. Hạ xuống #0e6b7e thì đạt 6,0,
       màu vẫn ra chất biển mà không phải đổi chữ sang màu khác. */
    background: linear-gradient(112deg, #0b3d4f 0%, #0d5f70 58%, #0e6b7e 100%);
}
.bt-cta h4 { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: #fff; }
.bt-cta p { max-width: 560px; margin: 0 auto 20px; font-size: 16px; color: rgba(255,255,255,.9); }
.bt-cta a {
    display: inline-block; padding: 14px 32px; font-size: 14px; font-weight: 800;
    letter-spacing: .06em; text-decoration: none; border: 0; border-radius: 30px;
    background: var(--bt-do); color: #fff;
}
.bt-cta a:hover { background: #fff; color: var(--bt-sau); }

/* ── Nguồn tham khảo ────────────────────────────────────────────────────
   Chữ nhỏ và nhạt, nhưng KHÔNG dưới mức đọc được: đây là chỗ ghi công ảnh
   và nguồn số liệu, giấu quá thì thành như muốn giấu. */
.bt-ng {
    margin: 34px 0 0; padding: 20px 0 0; border-top: 1px solid var(--bt-ke);
    font-size: 13.5px; line-height: 1.8; color: var(--bt-mut);
}
.bt-ng b {
    display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    margin-bottom: 8px; color: var(--bt-sau);
}

/* ── Chỗ chừa ảnh ───────────────────────────────────────────────────── */
.bt-ph {
    padding: 36px 26px; margin: 30px 0; text-align: center;
    border: 2px dashed var(--bt-cat); border-radius: 16px; background: var(--bt-nen);
}
.bt-ph-no {
    display: inline-block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    padding: 5px 13px; margin-bottom: 13px; font-weight: 800;
    background: var(--bt-cat); color: #3a2600; border-radius: 20px;
}
.bt-ph-t { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.5; color: var(--bt-chu); }
.bt-ph-g { font-size: 13.5px; line-height: 1.7; max-width: 520px; margin: 0 auto; font-style: italic; color: var(--bt-mut); }

/* ══════════════════════════════════════════════════════════════════════
   KHỐI CHO BÀI DU LỊCH
   Bốn khối dưới đây thêm cho bài kể theo hành trình. Bài du lịch đọc khác
   bài số liệu: người ta không dò bảng mà đi theo mạch "sáng làm gì, trưa
   làm gì" — nên cần khối dựng theo trình tự chứ không phải theo cột.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Lịch theo giờ ──────────────────────────────────────────────────────
   Vạch dọc nối các mốc, chấm cát ở mỗi mốc. Đọc dọc xuống là thấy cả ngày,
   không phải đối chiếu ngang như bảng. */
.bt-lich { position: relative; margin: 30px 0; padding-left: 26px; }
.bt-lich::before {
    content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px;
    width: 2px; background: var(--bt-ke);
}
.bt-lich > div { position: relative; padding: 0 0 24px 4px; }
.bt-lich > div::before {
    content: ''; position: absolute; left: -25px; top: 7px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 3px solid var(--bt-cat);
}
.bt-lich > div:last-child { padding-bottom: 0; }
.bt-gio {
    display: inline-block; font-size: 11.5px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--bt-ngoc2); margin-bottom: 4px;
}
.bt-lich h4 { margin: 0 0 6px; color: var(--bt-sau); }
.bt-lich p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--bt-mut); }

/* ── Thẻ điểm đến có ảnh ────────────────────────────────────────────────
   Bài du lịch cần cho thấy nơi chốn, không chỉ tả bằng chữ. Ảnh nằm trên,
   chữ nằm dưới, cả thẻ bấm được nếu bọc trong <a>. */
.bt-diem { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin: 30px 0; }
.bt-diem > * {
    display: block; background: #fff; border: 1.5px solid var(--bt-ke);
    border-radius: 18px; overflow: hidden; transition: .22s;
    text-decoration: none; border-bottom-width: 1.5px;
}
.bt-diem > *:hover { border-color: var(--bt-ngoc); box-shadow: 0 14px 34px rgba(11,61,79,.11); transform: translateY(-3px); }
.bt-diem img { display: block; width: 100%; height: 172px; object-fit: cover; }
.bt-diem-than { padding: 18px 20px 20px; }
.bt-diem-nhan {
    display: inline-block; font-size: 10.5px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--bt-ngoc2); margin-bottom: 7px;
}
.bt-diem h4 { margin: 0 0 8px; color: var(--bt-sau); font-size: 17px; }
.bt-diem p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--bt-mut); }

/* ── Câu dẫn ────────────────────────────────────────────────────────────
   Một câu tách riêng giữa bài, dùng để chuyển mạch. Không phải trích dẫn
   người khác nên không có ngoặc kép — chỉ là nhấn nhịp đọc. */
.bt-dan {
    margin: 34px 0; padding: 4px 0 4px 24px;
    border-left: 4px solid var(--bt-cat);
    font-size: 19.5px; line-height: 1.7; font-weight: 600;
    color: var(--bt-sau);
}
.bt-dan span { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--bt-mut); }

/* ── Giờ vàng ───────────────────────────────────────────────────────────
   Khối nhỏ nêu khung giờ đẹp nhất của một nơi. Dùng nền cát nhạt để tách
   khỏi khối lưu ý (nền xanh nhạt) — hai loại thông tin khác nhau. */
.bt-vang {
    display: flex; align-items: flex-start; gap: 14px;
    background: #fdf6e6; border-left: 5px solid var(--bt-cat);
    border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 26px 0;
}
.bt-vang-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.bt-vang p { margin: 0; font-size: 16px; line-height: 1.8; color: #5c4a1f; }
.bt-vang b { color: #4a3813; }

@media (max-width: 640px) {
    .bt-diem img { height: 150px; }
    .bt-dan { font-size: 17.5px; padding-left: 18px; }
    .bt-lich { padding-left: 22px; }
}