/* noi-that-mht.css — phần RIÊNG của MH Travel cho trang nội thất.
   Nạp SAU css/noi-that.css (bản trích nguyên văn, sinh lại mỗi lần chạy bộ
   trích — sửa tay vào đó là mất). Mọi chỉnh sửa để ở file này. */

/* Bản gốc là trang độc lập, khối .nt tự trải hết bề ngang trình duyệt. Bên
   này nó nằm giữa thanh đầu trang và chân trang của MH Travel, nên cần một
   khối bọc để phần nền không tràn ra ngoài. */
.nt-trang { position: relative; }

/* Ảnh banner đặt trong Admin → Banner → Nội thất được dùng làm nền bìa. Biến
   --nt-anh-bia do PHP gắn vào .nt-trang; không đặt ảnh thì luật này không có
   tác dụng và bìa giữ nguyên nền gốc. */
.nt-trang[style*="--nt-anh-bia"] > .nt-hero {
    background-image: linear-gradient(96deg, rgba(8,28,54,.78), rgba(8,28,54,.42)),
                      var(--nt-anh-bia);
    background-size: cover;
    background-position: center;
}

/* Nút của khối báo giá — thay cho form gốc, dàn ngang, xuống dòng ở màn hẹp */
.nt-baogia-nut {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px;
}
.nt-baogia-nut .nt-nut { flex: 0 1 auto; }

/* Trang gốc dùng bảng màu nâu ấm của Ái Vân. Giữ nguyên phần lớn để không
   phải vẽ lại 271 luật, chỉ kéo mấy điểm nhấn về màu MH Travel: nút chính và
   các vệt nhấn dùng đỏ thương hiệu thay vì vàng đồng. */
.nt-trang .nt-nut.chinh {
    background: var(--do, #e84038);
    border-color: var(--do, #e84038);
    color: #fff;
}
.nt-trang .nt-nut.chinh:hover { background: var(--do-dam, #c9302c); }

/* Bảng: hiện đo được 319px nên vừa khổ 375px, nhưng thêm một dòng vào ô là
   tràn cả trang ngang — chuyện đã gặp ở trang bài viết. Cho nó tự cuộn trong
   lòng mình thay vì đẩy cả trang. */
.nt-trang .nt-bang { display: block; overflow-x: auto; max-width: 100%; }
.nt-trang .nt-bang > tbody,
.nt-trang .nt-bang > thead { display: table; width: 100%; }

@media (max-width: 700px) {
    /* Ngón tay bấm cần vùng cao hơn con trỏ chuột */
    .nt-baogia-nut .nt-nut { min-height: 44px; display: inline-flex;
                             align-items: center; justify-content: center; }
}