/* bai.css — giao diện cho cẩm nang, tin tức và trang đọc bài.
   Cấu trúc khối bê từ bên Ái Vân (hub chia cụm cho cẩm nang, bố cục toà soạn cho
   tin tức), nhưng vẻ ngoài nghiêng du lịch: cụm là CHẶNG có số thứ tự, thẻ bài có
   nhãn màu theo chặng, meta ghi thời gian đọc và hợp với ai.
   Tiền tố b- , không dùng !important — cùng quy ước với mht.css. */

/* ═══ 1. BÌA TRANG ══════════════════════════════════════════════════════
   Khối .b-bia (bìa bo góc nằm lọt trong trang, phủ tối .92) ĐÃ GỠ. Cẩm nang và
   Tin tức nay dùng chung banner tràn viền như mọi trang khác — xem .m-bn trong
   css/bien.css. Số liệu "5 vùng đất · 76 bài đã viết" chuyển sang .m-bn-so.

   Gỡ hẳn chứ không để lại: luật CSS không còn ai dùng là thứ lần sau mở ra sẽ
   tưởng đang chạy, rồi sửa nhầm vào đó và ngồi tìm mãi không hiểu sao không đổi. */

/* ═══ 2. HUB CẨM NANG — các CHẶNG ═══════════════════════════════════════ */
.b-hub-dan { max-width: 720px; margin: 0 0 26px; }
.b-hub-dan h2 { margin: 0 0 8px; font-size: clamp(21px, 2.8vw, 28px); color: var(--muc); letter-spacing: -.4px; }
.b-hub-dan p { margin: 0; color: var(--xam); font-size: 15.5px; line-height: 1.7; }

.b-chang { margin-bottom: 34px; }
.b-chang-dau {
    position: relative; overflow: hidden; border-radius: 16px;
    padding: 24px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    color: #fff;
}
/* Số chặng chìm phía sau — gợi cột mốc trên đường đi, không cạnh tranh với tiêu đề */
.b-chang-so {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 96px; font-weight: 900; line-height: 1;
    color: rgba(255,255,255,.13); letter-spacing: -4px; pointer-events: none;
}
.b-chang-ic {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
}
.b-chang-chu { flex: 1 1 260px; min-width: 0; position: relative; z-index: 1; }
.b-chang-nhan {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.78);
}
.b-chang-ten { margin: 4px 0 5px; font-size: 21px; font-weight: 800; line-height: 1.3; }
.b-chang-ten a { color: #fff; text-decoration: none; }
.b-chang-ten a:hover { text-decoration: underline; }
.b-chang-phu { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); }
.b-chang-di {
    position: relative; z-index: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 800;
    background: #fff; color: #14416e; text-decoration: none;
}
.b-chang-di:hover { text-decoration: none; transform: translateY(-1px); }
.b-chang.b-sap .b-chang-dau { filter: saturate(.55); }

.b-the-hang {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 16px; margin-top: 16px;
}

/* ═══ 3. THẺ BÀI ════════════════════════════════════════════════════════ */
.b-the {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--trang); border: 1px solid var(--vien); border-radius: 14px;
    text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.b-the:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--bong); }
.b-the-anh { position: relative; aspect-ratio: 16/10; background: #eef2f6; overflow: hidden; }
.b-the-anh img { width: 100%; height: 100%; object-fit: cover; }
/* Bài chưa có ảnh: nền vân chéo dịu thay vì ô xám trống */
.b-the-anh.b-trong {
    background: repeating-linear-gradient(135deg, #eef3f8 0 12px, #e6edf4 12px 24px);
    display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .55;
}
.b-the-nhan {
    position: absolute; left: 10px; top: 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 5px 10px; border-radius: 999px; color: #fff;
    background: rgba(20,50,90,.88);
}
.b-the-than { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.b-the-ten { font-size: 15.5px; font-weight: 800; line-height: 1.42; color: var(--muc); margin: 0; }
.b-the-mo { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--xam); }
.b-the-meta {
    margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 5px 12px;
    font-size: 12.5px; color: #7b8794;
}
.b-ghim {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px; background: var(--do-nhat); color: var(--do-chu);
}

/* ═══ 4. TIN TỨC — bố cục toà soạn ══════════════════════════════════════ */
.b-toa-soan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }

/* Bài dẫn: ảnh lớn, chữ đè lên đáy ảnh — khác thẻ thường để mắt bắt ngay */
.b-dan {
    position: relative; display: block; border-radius: 18px; overflow: hidden;
    text-decoration: none; color: #fff; min-height: 320px;
    background: linear-gradient(140deg, #14416e, #0b2545);
}
.b-dan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-dan-phu {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,20,38,.94) 0%, rgba(6,20,38,.55) 45%, rgba(6,20,38,.08) 100%);
}
.b-dan-chu { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 26px 24px; }
.b-dan-nhan {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
    background: var(--do); color: #fff; margin-bottom: 11px;
}
.b-dan-ten { margin: 0 0 8px; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.3; font-weight: 800; }
.b-dan-mo { margin: 0 0 9px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 640px; }
.b-dan-meta { font-size: 12.5px; color: rgba(255,255,255,.72); }
.b-dan:hover { text-decoration: none; }

.b-cot { position: sticky; top: 16px; }
.b-cot-khoi { background: var(--trang); border: 1px solid var(--vien); border-radius: 14px; padding: 16px 16px 6px; margin-bottom: 16px; }
.b-cot-dau {
    font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--do-chu); padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--do-nhat);
}
.b-cot-muc { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--vien); }
.b-cot-muc:last-child { border-bottom: 0; }
.b-cot-so { flex-shrink: 0; font-size: 19px; font-weight: 900; color: #d7dee6; line-height: 1.15; width: 24px; }
.b-cot-ten { font-size: 14px; font-weight: 700; line-height: 1.48; color: var(--muc); text-decoration: none; }
.b-cot-ten:hover { color: var(--do-chu); }
.b-cot-ngay { display: block; margin-top: 3px; font-size: 12px; color: #8b97a3; font-weight: 400; }

/* ═══ 5. LỌC THEO MỤC ═══════════════════════════════════════════════════ */
.b-loc { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.b-loc a {
    padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
    text-decoration: none; background: var(--trang); border: 1px solid var(--vien); color: var(--muc);
}
.b-loc a:hover { text-decoration: none; border-color: var(--do); color: var(--do-chu); }
.b-loc a.b-dang { background: var(--do); border-color: var(--do); color: #fff; }

/* ═══ 6. PHÂN TRANG ═════════════════════════════════════════════════════ */
.b-trang { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin: 30px 0 10px; }
.b-trang a, .b-trang span {
    min-width: 40px; padding: 9px 12px; border-radius: 10px; text-align: center;
    font-size: 14px; font-weight: 700; text-decoration: none;
    background: var(--trang); border: 1px solid var(--vien); color: var(--muc);
}
.b-trang span.b-dang { background: var(--do); border-color: var(--do); color: #fff; }
.b-trang span.b-cach { border: 0; background: none; color: var(--xam); }

/* ═══ 7. TRANG ĐỌC BÀI ══════════════════════════════════════════════════ */
/* Thanh tiến độ đọc — mẹo nhỏ nhưng giúp bài dài đỡ nản */
.b-tien-do { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--do); z-index: 60; }

.b-duong { font-size: 13px; color: var(--xam); margin: 20px 0 14px; }
.b-duong a { color: var(--xam); }
.b-duong a:hover { color: var(--do-chu); }

.b-bai-dau { max-width: 800px; }
.b-bai-dau h1 { margin: 0 0 12px; font-size: clamp(25px, 3.6vw, 35px); line-height: 1.22; letter-spacing: -.6px; }
.b-bai-sapo { margin: 0 0 16px; font-size: 17.5px; line-height: 1.72; color: #4b5563; }
.b-bai-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
    font-size: 13.5px; color: var(--xam);
    padding-bottom: 18px; border-bottom: 1px solid var(--vien);
}
.b-vien-nhan {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: var(--xanh-nhat); color: #115e59;
}
.b-bai-anh { width: 100%; border-radius: 16px; margin: 22px 0 8px; }
.b-bai-anh-chu { font-size: 12.5px; color: var(--xam); margin: 0 0 22px; text-align: center; }

/* Bố cục hai cột: mục lục dính bên trái, bài bên phải. Màn hẹp thì mục lục
   thành khối gập được nằm trên bài. */
.b-bai-khung { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 6px; }
/* Bài ngắn không có mục lục — trả cột trái lại cho bài, đừng chừa khoảng trống */
.b-bai-khung.b-mot-cot { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
.b-mucluc { position: sticky; top: 16px; font-size: 14px; }
.b-mucluc-dau { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--xam); margin-bottom: 10px; }
.b-mucluc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--vien); }
.b-mucluc li { margin: 0; }
.b-mucluc a { display: block; padding: 7px 0 7px 13px; margin-left: -2px; border-left: 2px solid transparent; color: var(--xam); line-height: 1.45; text-decoration: none; font-size: 13.5px; }
.b-mucluc a:hover { color: var(--muc); text-decoration: none; }
.b-mucluc a.b-dang { color: var(--do-chu); border-left-color: var(--do); font-weight: 700; }
.b-mucluc .b-muc-con a { padding-left: 24px; font-size: 13px; }

.b-noi-dung { font-size: 16.5px; line-height: 1.85; color: #253141; }
.b-noi-dung h2 {
    margin: 34px 0 12px; font-size: 23px; line-height: 1.32; color: var(--muc);
    padding-left: 13px; border-left: 4px solid var(--do); scroll-margin-top: 20px;
}
.b-noi-dung h3 { margin: 26px 0 9px; font-size: 18.5px; line-height: 1.4; color: var(--muc); scroll-margin-top: 20px; }
.b-noi-dung p { margin: 0 0 16px; }
.b-noi-dung ul, .b-noi-dung ol { margin: 0 0 16px; padding-left: 22px; }
.b-noi-dung li { margin-bottom: 7px; }
.b-noi-dung img { border-radius: 12px; margin: 18px 0 8px; }
.b-noi-dung blockquote {
    margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--xanh);
    background: #f0fdfa; border-radius: 0 10px 10px 0; color: #134e4a;
}
.b-noi-dung table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.b-noi-dung th, .b-noi-dung td { padding: 10px 12px; border: 1px solid var(--vien); text-align: left; vertical-align: top; }
.b-noi-dung th { background: var(--nen); font-weight: 800; }
/* Bảng nhiều cột vỡ ở khổ 375px — bọc trong khung cuộn ngang riêng */
.b-cuon-bang { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; }
.b-cuon-bang table { margin: 0; min-width: 460px; }

/* Ô lưới và ô flex mặc định có min-width:auto — nghĩa là KHÔNG được phép hẹp hơn
   nội dung dài nhất bên trong. Bài chép từ nơi khác mang theo CSS lưới của chính
   nó, nên chỉ một câu tiêu đề dài là đủ đẩy cả lưới rộng hơn màn hình và bắt cả
   trang cuộn ngang ở khổ điện thoại. Đặt lại về 0 cho mọi thứ trong thân bài;
   với khối thường thì luật này vô hại vì min-width:auto của chúng vốn đã là 0.
   Bảng vẫn giữ min-width riêng vì luật của nó chọn lọc cao hơn. */
.b-noi-dung * { min-width: 0; }

/* Bài chép còn mang theo vài khối đặt bề rộng CỨNG (ví dụ width:360px cho ô ảnh
   trong lưới thẻ) — vừa đủ tràn ra ngoài khung 343px của khổ điện thoại. Khống
   chế lại bằng max-width. Không áp cho <table>: bảng cần giữ bề rộng lớn hơn
   khung để còn cuộn ngang được bên trong .b-cuon-bang. */
.b-noi-dung div, .b-noi-dung figure, .b-noi-dung img,
.b-noi-dung iframe, .b-noi-dung video, .b-noi-dung pre { max-width: 100%; }

/* ═══ 8. CUỐI BÀI ═══════════════════════════════════════════════════════ */
.b-chia-se { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0 6px; font-size: 14px; color: var(--xam); }
.b-chia-se a, .b-chia-se button {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
    background: var(--trang); border: 1px solid var(--vien); color: var(--muc); font-family: inherit;
}
.b-chia-se a:hover, .b-chia-se button:hover { border-color: var(--do); color: var(--do-chu); text-decoration: none; }

.b-doc-them { margin: 32px 0 0; padding: 22px 22px 8px; background: var(--nen); border: 1px solid var(--vien); border-radius: 16px; }
.b-doc-them h2 { margin: 0 0 4px; font-size: 18px; color: var(--muc); }
.b-doc-them > p { margin: 0 0 16px; font-size: 14px; color: var(--xam); }

.b-cta-villa {
    margin: 30px 0 8px; padding: 26px 24px; border-radius: 16px; text-align: center; color: #fff;
    background: linear-gradient(135deg, #0f2b47 0%, #1e3a5f 55%, #7d1f1a 100%);
}
.b-cta-villa h2 { margin: 0 0 8px; font-size: clamp(18px, 2.4vw, 23px); color: #fff; }
.b-cta-villa p { margin: 0 0 16px; font-size: 14.5px; color: rgba(255,255,255,.85); }
.b-cta-nut { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.b-cta-nut a {
    display: inline-block; padding: 11px 22px; border-radius: 10px;
    font-size: 14.5px; font-weight: 800; text-decoration: none;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); color: #fff;
}
.b-cta-nut a.b-chinh { background: var(--do); border-color: var(--do); }
.b-cta-nut a:hover { text-decoration: none; }

/* ═══ 9. MÀN HẸP ════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
    /* minmax(0,1fr) chứ KHÔNG phải 1fr: 1fr có giá trị nhỏ nhất là min-content,
       nên chỉ cần trong bài có một cái bảng đặt min-width là cả cột phình ra
       rộng hơn màn hình và cả trang cuộn ngang — đúng lỗi đã gặp ở khổ 375px. */
    .b-toa-soan { grid-template-columns: minmax(0, 1fr); }
    .b-cot { position: static; }
    .b-bai-khung { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .b-mucluc { position: static; background: var(--trang); border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px; }
    .b-mucluc ol { border-left: 0; }
    .b-mucluc a { padding-left: 0; border-left: 0; }
    .b-mucluc .b-muc-con a { padding-left: 14px; }
}
@media (max-width: 620px) {
    .b-chang-dau { padding: 20px 18px; }
    .b-chang-so { font-size: 68px; right: 10px; }
    .b-chang-di { width: 100%; justify-content: center; }
    .b-the-hang { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .b-the-than { padding: 12px 12px 13px; }
    .b-the-ten { font-size: 14.5px; }
    .b-the-mo { display: none; }   /* màn hẹp: tiêu đề và meta là đủ, mô tả làm thẻ dài lê thê */
    .b-dan { min-height: 250px; }
    .b-dan-chu { padding: 18px 16px 16px; }
    .b-noi-dung { font-size: 16px; }
    .b-noi-dung h2 { font-size: 20px; }
    .b-cta-villa { padding: 22px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════
   NOVAWORLD ARTICLE CUSTOM COMPONENTS (.nw-*)
   ══════════════════════════════════════════════════════════════════════ */
.nw-hero {
    position: relative; border-radius: 16px; overflow: hidden; margin: 24px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); background: #0f172a;
}
.nw-hero img { width: 100%; height: auto; display: block; object-fit: cover; }
.nw-hero-in {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.4) 50%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 28px; color: #ffffff;
}
.nw-hero-t { font-size: clamp(20px, 3vw, 28px); font-weight: 900; line-height: 1.3; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.nw-hero-s { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 6px; }
.nw-hero-c { font-size: 12px; color: rgba(255,255,255,0.65); }

/* Quick Facts Grid (.nw-qf) */
.nw-qf {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px; margin: 24px 0; padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0; border-radius: 16px;
}
.nw-qf-i {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 14px 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: transform .2s, box-shadow .2s;
}
.nw-qf-i:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.nw-qf-l { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; margin-bottom: 6px; }
.nw-qf-v { font-size: 15.5px; font-weight: 800; color: #0e6fb8; line-height: 1.35; }

/* Callout Box (.nw-callout) */
.nw-callout {
    display: flex; gap: 16px; padding: 20px 22px; border-radius: 14px; margin: 24px 0;
    align-items: flex-start;
}
.nw-callout-ic { font-size: 26px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.nw-callout-bd { flex: 1; }
.nw-callout-tt { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.nw-callout--info { background: #f0f9ff; border: 1px solid #bae6fd; border-left: 5px solid #0284c7; color: #0369a1; }
.nw-callout--info .nw-callout-tt { color: #0369a1; }
.nw-callout--ok { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 5px solid #16a34a; color: #15803d; }
.nw-callout--ok .nw-callout-tt { color: #15803d; }
.nw-callout--warn { background: #fffbeb; border: 1px solid #fef08a; border-left: 5px solid #ca8a04; color: #a16207; }
.nw-callout--warn .nw-callout-tt { color: #a16207; }

/* Fact Cards (.nw-facts) */
.nw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.nw-fact {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04); transition: transform .2s;
}
.nw-fact:hover { transform: translateY(-3px); }
.nw-fact--gold { border-top: 4px solid #d97706; background: #fffdfa; }
.nw-fact-ic { font-size: 28px; margin-bottom: 10px; }
.nw-fact-tt { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.nw-fact-txt { font-size: 14px; color: #475569; line-height: 1.6; }

/* Comparison Grid (.nw-pc) */
.nw-pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 24px 0; }
.nw-pc-b { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.nw-pc-ok { border-top: 4px solid #16a34a; }
.nw-pc-no { border-top: 4px solid #dc2626; }
.nw-pc-h { font-size: 17px; font-weight: 800; margin-bottom: 12px; color: #0f172a; }
.nw-pc-b ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.7; color: #334155; }

/* Timeline Route (.nw-route) */
.nw-route { border-left: 3px solid #0e6fb8; padding-left: 20px; margin: 24px 0; display: flex; flex-direction: column; gap: 18px; }
.nw-route-i { position: relative; }
.nw-route-i::before {
    content: ''; position: absolute; left: -26px; top: 6px; width: 10px; height: 10px;
    border-radius: 50%; background: #0e6fb8; border: 2px solid #ffffff;
}
.nw-route-t { font-size: 15.5px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.nw-route-d { font-size: 14px; color: #475569; line-height: 1.6; }

/* FAQs (.nw-faq) */
.nw-faq { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.nw-faq-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.nw-faq-q { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.nw-faq-q::before { content: '❓'; font-size: 16px; }
.nw-faq-a { font-size: 14.5px; color: #475569; line-height: 1.65; }

/* Table (.nw-table) */
.nw-tablewrap { overflow-x: auto; margin: 24px 0; border-radius: 12px; border: 1px solid #e2e8f0; }
.nw-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #ffffff; }
.nw-table th { background: #f8fafc; color: #0f172a; font-weight: 800; text-align: left; padding: 12px 16px; border-bottom: 2px solid #e2e8f0; }
.nw-table td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.nw-table tr:hover { background: #f8fafc; }

/* Bảng nhiều cột trên điện thoại.
   .nw-tablewrap đã có overflow-x:auto, nhưng .nw-table đặt width:100% nên bảng
   CO LẠI vừa khung thay vì tràn ra để cuộn. Đo ở khổ 375px: bảng 4 cột bị nén
   còn 80–88px mỗi cột, riêng hàng tiêu đề cao 6 dòng. Thêm min-width để bảng
   giữ bề ngang tối thiểu rồi mới cuộn ngang trong khung. */
.nw-table--rong { min-width: 560px; }
.nw-table--rong td, .nw-table--rong th { white-space: normal; }

/* Khối kêu gọi .nw-cta chép từ Ái Vân sang nhưng CSS thì không chép theo, nên
   trên MH Travel nó hiện ra trần trụi: không nền, không viền, không khoảng đệm. */
.nw-cta { background: linear-gradient(155deg, #0f2b47 0%, #1e3a5f 58%, #7d1f1a 100%);
  border-radius: 16px; padding: 22px 24px; margin: 30px 0;
  box-shadow: 0 6px 22px rgba(12,32,54,.22); color: #fff; }
.nw-cta-title { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.35; margin-bottom: 8px; }
.nw-cta-sub { font-size: 14.5px; line-height: 1.68; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.nw-cta a { display: inline-block; padding: 10px 18px; border-radius: 9px;
  background: #e84038; color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; }