thành một hộp Card độc lập, có khoảng cách */
.list-horizontal-table tbody,
.list-horizontal-table tr.horizontal-row-item {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.list-horizontal-table tr.horizontal-row-item {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 12px !important;
margin-bottom: 12px !important;
gap: 8px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
/* Ép tất cả các ô | biến thành các khối inline tự do */
.list-horizontal-table tr.horizontal-row-item td {
display: block !important;
padding: 0 !important;
border: none !important;
width: 100% !important;
background: transparent !important;
}
/* TẦNG 1: Dòng đầu tiên chứa Mã căn, Hướng và Badge Trạng thái */
.list-horizontal-table tr.horizontal-row-item td:nth-child(1) {
display: flex !important;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
/* Đẩy badge trạng thái và hướng lên chung dòng với mã căn */
.list-horizontal-table tr.horizontal-row-item td:nth-child(3) {
display: inline-block !important;
width: auto !important;
}
/* TẦNG 2: Khu vực cấu hình diện tích */
.list-horizontal-table tr.horizontal-row-item td:nth-child(2) {
margin-bottom: 8px;
}
.list-horizontal-table .cell-double-row .row-sub-txt {
font-size: 12px !important;
color: #64748b !important;
}
/* TẦNG 3: KHỐI GIÁ BAO PHỦ (Biến 3 cột giá thành 3 cột nhỏ song song gọn gàng) */
.list-horizontal-table tr.horizontal-row-item td:nth-child(4),
.list-horizontal-table tr.horizontal-row-item td:nth-child(5),
.list-horizontal-table tr.horizontal-row-item td:nth-child(6) {
background: #f8fafc !important;
padding: 8px !important;
border-radius: 4px !important;
margin-bottom: 4px;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Tạo nhãn giả bằng CSS để Sale đọc vẫn hiểu đây là giá gì */
.list-horizontal-table tr.horizontal-row-item td:nth-child(4)::before { content: "Giá Tiến độ:"; font-size: 11px; color: #64748b; font-weight: 600; }
.list-horizontal-table tr.horizontal-row-item td:nth-child(5)::before { content: "Sớm (Chưa KPBT):"; font-size: 11px; color: #64748b; font-weight: 600; }
.list-horizontal-table tr.horizontal-row-item td:nth-child(6)::before { content: "Sớm (Có KPBT):"; font-size: 11px; color: #64748b; font-weight: 600; }
/* Ép nút bấm thao tác chiếm trọn chiều rộng để ngón tay dễ chạm gõ */
.list-horizontal-table tr.horizontal-row-item td:nth-child(8) {
margin-top: 8px !important;
}
.list-horizontal-table .bh-btn-action-view {
width: 100% !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
}
}
/* =========================================================================
📋 ĐÈ MẠNH LAYOUT TỐI CAO: PHẲNG HÀNG NGANG MÁY TÍNH (CẤU TRÚC 7 CỘT MỚI)
========================================================================= */
/* A. ĐỒNG BỘ TRÊN CẢ PC VÀ MOBILE: KHÔNG CHO PHÉP XUỐNG DÒNG */
div#view-hang-ngang table.list-horizontal-table th,
div#view-hang-ngang table.list-horizontal-table td {
white-space: nowrap !important; /* Cấm tuyệt đối gãy dòng dữ liệu trên mọi thiết bị */
}
/* =========================================================================
💎 TỐI ƯU BORDER & HIỆU ỨNG HOVER NỔI MÀU HIỆN ĐẠI CHO BẢNG CHI TIẾT
========================================================================= */
/* 1. Thiết lập lại Border tinh tế và màu nền mặc định cho bảng */
div#view-hang-ngang table.list-horizontal-table {
border-collapse: collapse !important; /* Bắt buộc để border giữa các hàng không bị tách đôi */
background: #ffffff;
}
/* Định cấu hình border nhẹ nhàng cho tất cả các ô dữ liệu */
div#view-hang-ngang table.list-horizontal-table th,
div#view-hang-ngang table.list-horizontal-table td {
border-bottom: 1px solid #e2e8f0 !important; /* Border ngang siêu mảnh, hiện đại */
border-top: 1px solid #e2e8f0 !important;
}
/* 3. HIỆU ỨNG HOVER NỔI MÀU ĐỒNG BỘ TOÀN HÀNG (TR) */
/* Đổi màu nền của dòng tr sang màu xám mờ xanh nhẹ nhàng khi chuột rê vào */
div#view-hang-ngang table.list-horizontal-table tbody tr.horizontal-row-item:hover {
background-color: #f1f5f9 !important; /* Màu hover phong cách tối giản hiện đại */
}
/* 🔥 LÕI ÉP CÁC CỘT CÓ MÀU CỐ ĐỊNH PHẢI ĐỔI MÀU THEO HÀNG KHI HOVER */
div#view-hang-ngang table.list-horizontal-table tbody tr.horizontal-row-item:hover td {
background-color: inherit !important; /* Buộc tất cả td thừa hưởng màu nền từ tr:hover */
}
/* Loại trừ các căn đã bán (background: #fff5f5) không cho đổi màu hover để giữ tính cảnh báo */
div#view-hang-ngang table.list-horizontal-table tbody tr.horizontal-row-item[style*="background: #fff5f5"]:hover td {
background-color: #fff5f5 !important;
opacity: 0.85;
}
/* =========================================================================
⚡ ĐỘC QUYỀN XỬ LÝ TOÀN DIỆN CHO DI ĐỘNG (MOBILE ĐÃ GOM GỌN BLOCK CHUẨN)
========================================================================= */
@media (max-width: 767px) {
/* 1. Ép phân khu bọc ngoài cùng biến thành "Máng trượt" duy nhất */
div#view-hang-ngang {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
overflow-x: auto !important; /* Kích hoạt sinh làn cuộn ngang khi vuốt */
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important; /* Vuốt mượt trên iPhone */
}
/* 2. Ép các lớp bọc phụ trung gian nhả biên, không được chặn hành trình cuộn */
div#view-hang-ngang .table-responsive-wrapper,
div#view-hang-ngang .cms-bang-hang-wrapper {
display: block !important;
width: max-content !important; /* Nới rộng vô cực theo ruột bảng */
max-width: none !important;
overflow: visible !important;
border: none !important;
}
/* 3. RUỘT BẢNG: Do bớt 1 cột giá nên thu gọn tổng chiều rộng xuống 1100px là tỷ lệ vàng, cực thoáng */
div#view-hang-ngang table.list-horizontal-table {
display: table !important;
table-layout: fixed !important; /* Khóa chết tỷ lệ cột cố định, phá vỡ mọi flex/block đè dọc cũ */
width: 1100px !important;
min-width: 1100px !important;
max-width: none !important;
}
/* Khóa chết cơ chế nhóm dòng (Row Group) truyền thống */
div#view-hang-ngang table.list-horizontal-table thead { display: table-header-group !important; }
div#view-hang-ngang table.list-horizontal-table tbody { display: table-row-group !important; }
/* 4. Ép mọi hàng tr và ô td biến thành các ô cờ độc lập, KHÔNG ĐÈ NHAU */
div#view-hang-ngang table.list-horizontal-table tr.horizontal-row-item {
display: table-row !important;
float: none !important;
}
div#view-hang-ngang table.list-horizontal-table tr.horizontal-row-item td,
div#view-hang-ngang table.list-horizontal-table thead tr th {
display: table-cell !important;
float: none !important;
padding: 12px 14px !important; /* Nới rộng padding đệm lót giữa các ô số */
vertical-align: middle !important;
position: relative !important;
}
/* 5. PHÂN BỔ LẠI DIỆN TÍCH ĐẤT CHO ĐỦ 7 CỘT MỚI - CHẤM DỨT TÌNH TRẠNG LỆCH CỘT */
div#view-hang-ngang table.list-horizontal-table th:nth-child(1),
div#view-hang-ngang table.list-horizontal-table td:nth-child(1) { width: 140px !important; } /* Cột 1: Mã căn (1PN+1) */
div#view-hang-ngang table.list-horizontal-table th:nth-child(2),
div#view-hang-ngang table.list-horizontal-table td:nth-child(2) { width: 240px !important; } /* Cột 2: Cấu hình căn hộ / DT */
div#view-hang-ngang table.list-horizontal-table th:nth-child(3),
div#view-hang-ngang table.list-horizontal-table td:nth-child(3) { width: 90px !important; } /* Cột 3: Hướng */
div#view-hang-ngang table.list-horizontal-table th:nth-child(4),
div#view-hang-ngang table.list-horizontal-table td:nth-child(4) { width: 165px !important; } /* Cột 4: Giá tiến độ đ */
div#view-hang-ngang table.list-horizontal-table th:nth-child(5),
div#view-hang-ngang table.list-horizontal-table td:nth-child(5) { width: 165px !important; } /* Cột 5: Sớm chưa KPBT */
div#view-hang-ngang table.list-horizontal-table th:nth-child(6),
div#view-hang-ngang table.list-horizontal-table td:nth-child(6) { width: 115px !important; } /* Cột 6: Trạng thái (Đã đôn lên thay thế) */
div#view-hang-ngang table.list-horizontal-table th:nth-child(7),
div#view-hang-ngang table.list-horizontal-table td:nth-child(7) { width: 105px !important; } /* Cột 7: Nút chi tiết */
/* 🛑 TRIỆT TIÊU HOÀN TOÀN CÁC NHÃN GIẢ (:BEFORE) CỦA CODE CŨ GÂY CHỒNG CHỮ TRẠNG THÁI */
div#view-hang-ngang table.list-horizontal-table tr.horizontal-row-item td::before {
display: none !important;
content: "" !important;
}
/* ⚡ KHỬ TIỀN TỐ DÀI DÒNG CỦA RIÊNG CỘT GIÁ ĐÓNG SỚM (CỘT 5) ĐỂ SỐ TIỀN KHÔNG BỊ XUỐNG DÒNG */
div#view-hang-ngang table.list-horizontal-table td.bg-light-green {
font-size: 0 !important; /* Ẩn chữ thô "Sớm (Chưa KPBT):" */
color: transparent !important;
}
div#view-hang-ngang table.list-horizontal-table td.bg-light-green .price-tts-medium {
font-size: 13px !important; /* Trả lại cỡ chữ chuẩn riêng cho con số tiền tỷ */
color: #166534 !important;
font-weight: 700 !important;
display: inline-block !important;
white-space: nowrap !important; /* Khóa chết chống nhảy dòng số tiền */
}
/* Khử triệt để lỗi dòng chữ kép (Tên căn hộ / Diện tích) bị bẻ chồng lên cột giá */
div#view-hang-ngang .cell-double-row {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
width: 100% !important;
}
/* Thu nhẹ cỡ chữ hệ thống trên Mobile giúp dải số thanh thoát */
div#view-hang-ngang table.list-horizontal-table td { font-size: 12px !important; }
div#view-hang-ngang .price-tiendo-bold,
div#view-hang-ngang .price-tts-bold { font-size: 13px !important; }
/* Định hình lại nút Chi tiết */
div#view-hang-ngang .bh-btn-action-view {
width: auto !important;
padding: 5px 14px !important;
font-size: 11px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
} |