/* =============================================================================
   DANH SÁCH TIN KIỂU BẢNG → THẺ, BẢN ĐIỆN THOẠI               user chốt 2026-08-13
   Bọc thân trang trong `.qi-ds-mb` là áp được. Đang dùng ở:
       /Timkiemmb        (Tìm kiếm)      · Pages/Mobile/TimKiem.cshtml
       /Thongbaomb.aspx  (Thông báo)     ┐
       /Thumoimb.aspx    (Thư mời)       ├ dùng chung Partials/_ThongBaoThuMoiBody.cshtml
       /Bacongkhaimb.aspx (Bá công khai) ┘

   🔑 CHỈ ĂN TRONG `.qi-ds-mb`. Mọi thân trang trên đều DÙNG CHUNG với bản máy tính
   (/Timkiem, /thongbao, /bacongkhai…); lớp bọc chỉ đặt ở trang mobile nên bản máy tính KHÔNG đổi
   một pixel nào — đã kiểm bằng cách so HTML: vẫn bảng STT, không nạp tệp này.

   Đo được trước khi sửa (khổ 375px):
     · nút "Tìm kiếm" nền `rgba(0,0,0,0)` — lớp `btnqi` được khai ở `qicolordefault.css`, tệp mà
       các trang này KHÔNG nạp ⇒ nút trông y như một dòng chữ đen, không ai biết là bấm được;
     · danh sách đổ vào BẢNG "STT | Danh sách bản tin" kiểu máy tính, cột STT ăn chỗ mà trên điện
       thoại chẳng để làm gì, ảnh bị đẩy hẹp lại;
     · tiêu đề tin cỡ 20px, GẠCH CHÂN (thẻ a mặc định) — rối mắt vì mỗi mục là một khối lớn;
     · ảnh 310×207 không bo góc, tỉ lệ thả nổi theo ảnh gốc nên danh sách so le.
   ========================================================================== */

/* ---------- 0. Dải tiêu đề trang ----------
   Nằm NGOÀI `.qi-ds-mb` (thuộc `@section TopMobile`) nên phải có lớp riêng `qitk-dai`. */
.scrollmenu.qitk-dai {
    padding: 10px 2px;
    border-bottom: 1px solid #e5e7eb;
}

.scrollmenu.qitk-dai a {
    color: #191919;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: default;                    /* trỏ tới "#": không phải liên kết đi đâu cả */
}

/* ---------- 1. Khung tìm kiếm ---------- */
.qi-ds-mb .qiContainer_border {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.qi-ds-mb label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.qi-ds-mb .form-control {
    height: 44px;                       /* vùng chạm tối thiểu theo hướng dẫn giao diện di động */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
}

.qi-ds-mb .form-control:focus {
    border-color: var(--mau-md, #0071a6);
    box-shadow: 0 0 0 3px rgba(0, 113, 166, .12);
}

/*  Nút bấm: tự tô nền theo màu thương hiệu của đơn vị thay vì trông chờ lớp `btnqi`.
    Viết 2 cấp để thắng `.btn` của Bootstrap (Bootstrap do TRANG tự nạp nên đứng sau tệp này). */
.qi-ds-mb .qiContainer_border button[type="submit"] {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    border: 0;
    border-radius: 8px;
    background: var(--mau-md, #0071a6);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.qi-ds-mb .qiContainer_border button[type="submit"]:active { filter: brightness(.92); }

/* ---------- 1b. Ô tìm kiếm kiểu `input-group` (Thông báo · Thư mời · Bá công khai) ----------
   Ba trang này dùng `.input-group` (ô + nút cùng một dòng) chứ không phải khung `.qiContainer_border`
   như trang Tìm kiếm. Đo tại khổ 375px: chữ "Tìm kiếm" của nút TRÀN QUA MÉP PHẢI màn hình, còn ô nhập
   bị cắt cụt vì `.form-control` của Bootstrap để `width:1%` + `flex:1 1 auto` mà nút thì không cho co.

   🔴🔑 NÚT VẪN RỚT XUỐNG DÒNG DÙ ĐÃ CÓ `flex-wrap: nowrap` (user báo 2026-08-14 trên hanoi.edu.vn:
   *"ô tìm kiếm chưa trên 1 hàng"*). Đo `getComputedStyle(.input-group)` ở khổ 402px:
   **`display: table`** — vỏ mobile CHUNG nạp bộ CSS đời Bootstrap **3** (`.input-group{display:table;
   border-collapse:separate}`), mà `flex-wrap` thì chỉ có nghĩa với khung FLEX ⇒ luật cũ vô hiệu, ô và
   nút xếp thành hai hàng bảng. Cùng họ bẫy với `.media-body{display:table-cell}` đã gặp ở mục 9d của
   `qi-noidung-mb2.css`. Phải ép lại `display:flex` thì `nowrap` mới có tác dụng. */
.qi-ds-mb .input-group {
    display: flex !important;
    flex-wrap: nowrap;
}

.qi-ds-mb .input-group > .form-control {
    min-width: 0;                       /* cho phép ô co lại — mặc định flex item không co dưới nội dung */
    height: 44px;
    border: 1px solid #d1d5db;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    font-size: 15px;
}

.qi-ds-mb .input-group-append > .btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px !important;         /* đè `px-2 py-2` + `btn-lg` khai thẳng trên thẻ */
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--mau-md, #0071a6);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.qi-ds-mb .input-group-append > .btn:active { filter: brightness(.92); }

/* ---------- 2. Dòng đếm kết quả ---------- */
.qi-ds-mb .qi-tk-dem {
    margin: 12px 2px 8px;
    font-size: 14px;
    color: #6b7280;
}

.qi-ds-mb .qi-tk-dem b { color: var(--mau-md, #0071a6); }

/* ---------- 3. BẢNG → ĐÚNG DANH SÁCH CỦA TRANG CHUYÊN MỤC ----------
   Giữ nguyên markup `<table><tr><td>` do máy chủ sinh (dùng chung với bản máy tính) và chỉ đổi
   cách hiển thị, nhờ vậy không phải sửa `TimKiemModel.WriteItem` và bản máy tính an toàn tuyệt đối.

   🔄 ĐỔI HƯỚNG 2026-08-14 (user chốt: *"Style cho nội dung còn xấu, nhiều border thừa"*,
   *"yêu cầu style lại giống trang chuyên mục bình thường"*): bản trước vẽ mỗi kết quả thành một THẺ
   có viền 1px + bo góc 10px + dòng "#1" — trông khác hẳn trang chuyên mục ngay bên cạnh, mà trang
   chuyên mục mới là chuẩn chung của cả hệ thống.
   🔑 ĐÒN BẨY: `WriteItem` của trang này sinh RA ĐÚNG khối `div.row.qibootomSpace.pt-2.mx-0` >
   `.media-body` > `h5.qititle` + `p.time` — **y hệt** khối một tin của trang chuyên mục. Nên chỉ cần
   gỡ lớp trang trí "thẻ" ở `tr/td` là bộ luật chuẩn (mục 9f `qi-noidung-mb2.css`: đệm 12px trên/dưới,
   vạch ngăn kẻ cạnh TRÊN từ tin thứ hai) tự lo phần còn lại. Đo trên trang chuyên mục thật của
   hanoi.edu.vn @402px để lấy số: hàng tin x=10 rộng 382, đệm 12px 0, tiêu đề 17px/600 dòng 26px. */
/*  🔴 "NHIỀU BORDER THỪA": Bootstrap 3 kẻ nguyên một khung `1px solid #ddd` quanh `.table-responsive`
    ở khổ nhỏ ⇒ cả danh sách nằm trong một cái hộp mà trang chuyên mục không có. Đo được: khung ở
    x=10 có viền đủ bốn cạnh, và chính 1px viền trái đẩy mọi hàng tin lệch sang x=11. */
.qi-ds-mb .table-responsive {
    overflow: visible;
    border: 0;
    margin: 0;
}

.qi-ds-mb .table-responsive table {
    display: block;
    margin: 0;
    border: 0;
}

.qi-ds-mb .table-responsive thead { display: none; }   /* bỏ hàng tiêu đề "STT | Danh sách bản tin" */
/*  `border: 0` — Bootstrap kẻ `border-top: 2px solid #212529` cho `tbody` (vạch ngăn dưới hàng tiêu
    đề của bảng). Bỏ `thead` rồi thì vạch ĐEN DÀY đó nằm chình ình trên tin đầu tiên. */
.qi-ds-mb .table-responsive tbody {
    display: block;
    border: 0;
}

/*  Hàng = một tin. Không viền, không nền, không bo góc — vạch ngăn do luật chuẩn kẻ. */
.qi-ds-mb .table-responsive tr {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/*  Vạch ngăn giữa hai tin: kẻ cạnh TRÊN từ hàng thứ hai ⇒ không có vạch trước tin đầu và sau tin
    cuối. Luật chuẩn `.row.qibootomSpace + .row.qibootomSpace` KHÔNG khớp được ở đây vì mỗi hàng tin
    nằm trong một `<tr>` riêng (không phải hai thẻ liền kề cùng cha), nên phải kẻ ở `tr + tr`. */
.qi-ds-mb .table-responsive tr + tr { border-top: 1px solid #e3e7ee; }

.qi-ds-mb .table-responsive td {
    display: block;
    padding: 0;
    border: 0 !important;               /* .table của Bootstrap kẻ viền ngang từng ô */
}

/*  Cột SỐ THỨ TỰ: trang chuyên mục không có, bỏ hẳn (trước đây đổi thành dòng "#1" màu nhạt). */
.qi-ds-mb .table-responsive td:first-child { display: none; }

/* ---------- 4. Nội dung một kết quả ---------- */
/*  Giữ đúng đệm 12px trên/dưới của hàng tin chuẩn (mục 9f) — chỉ khử lề ngang thừa.
    Bỏ luôn viền dưới sẵn có của `.qibootomSpace`: đã có vạch ngăn kẻ ở `tr + tr` phía trên, để cả hai
    thì giữa hai tin hiện HAI vạch sát nhau và sau tin cuối còn thừa một vạch. */
.qi-ds-mb .row.qibootomSpace {
    margin: 0;
    border-bottom: 0;
}

/*  Cột trong hàng tin còn đệm 15px của lưới Bootstrap ⇒ chữ ra x=26 thay vì 10 như trang chuyên mục
    (bên đó cột mang lớp riêng `.qimobileitemcat` không có đệm). Khử để thẳng mép 10px. */
.qi-ds-mb .row.qibootomSpace > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.qi-ds-mb .table-responsive img {
    border-radius: 8px;
    /* Ép CÙNG một tỉ lệ cho mọi ảnh ⇒ danh sách thẳng hàng, không so le theo ảnh gốc. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    height: auto;
}

/*  Bỏ gạch chân: mỗi kết quả là một khối lớn đã rõ là bấm được, gạch chân chỉ làm rối. */
.qi-ds-mb .table-responsive a { text-decoration: none !important; }

/*  Cỡ chữ lấy ĐÚNG số đo của trang chuyên mục (hanoi.edu.vn @402px): 17px/600, dòng 26px, #191919;
    dòng ngày 13px xám, cách tiêu đề 2px. */
.qi-ds-mb .table-responsive .qititle {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: #191919;
}

.qi-ds-mb .table-responsive .time {
    margin: 2px 0 0 !important;
    font-size: 13px;
    color: #6b7280;
}

/*  Từ khoá khớp — giữ nền vàng của `CreateQiHilightTimkiem` nhưng bo nhẹ cho đỡ thô. */
.qi-ds-mb .table-responsive .qihilight,
.qi-ds-mb .table-responsive mark {
    padding: 0 2px;
    border-radius: 3px;
}

/* ---------- 5. Không có kết quả ---------- */
.qi-ds-mb .qi-tk-trong {
    margin: 16px 2px;
    padding: 24px 12px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    color: #6b7280;
}