/* ============================================================
   Giao diện điện thoại cho Xóm Nhiếp Ảnh
   ------------------------------------------------------------
   Bản gốc 2011 dựng cho màn hình rộng cố định 1200px, không có
   thẻ viewport và không có media query nào. Tệp này nạp SAU
   cùng, chỉ hoạt động dưới 900px, và dùng lại đúng selector của
   bản gốc để thắng bằng thứ tự thay vì rải !important.

   Nguyên tắc: nội dung chính lên trước, cột phụ xuống dưới; mọi
   khung 1200px trở thành co giãn; vùng bấm tối thiểu 44px.
   ============================================================ */

/* Nút mở menu: chỉ hiện trên màn hình hẹp */
#xna-nutmenu { display: none; }

@media (max-width: 900px) {

/* ---------- 0. Chặn tràn ngang, gốc rễ của mọi thứ ----------
   Bản gốc rải hàng chục chiều rộng cứng (1200, 1100, 844, 560...). Thay vì
   liệt kê và ghi đè từng cái — dễ sót và phải đấu độ đặc hiệu — ta chặn bằng
   max-width: theo quy tắc CSS, max-width LUÔN khống chế width, bất kể width
   được khai báo ở đâu hay đặc hiệu tới đâu. */
#container, #container *,
#footer, #footer *
{
    max-width: 100%;
    box-sizing: border-box;
}

/* Bảng có ô rộng cố định vẫn tràn được qua nội dung, cần ép lại cách chia cột */
#container table { table-layout: fixed; }
#header div.searchbox #sTbl { width: 100%; }
#header div.searchbox #sTbl td.first { width: auto; }

/* Ảnh trong bảng ảnh phải co theo ô */
#container table img { height: auto; }

/* ---------- 1. Bỏ mọi chiều rộng cứng của khung ---------- */
#container,
#header div.top,
#mainMenu div.navigator,
#footer .foot-content,
#footer div.content,
.pageContentFull
{
    width: auto;
    max-width: 100%;
    margin: 0;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

#homePanes > div,
#online-list .online,
#randomStaff,
.staffList,
#lastNews,
.locList
{
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ảnh không bao giờ được tràn khung */
img, video, iframe, object, embed { max-width: 100%; height: auto; }

/* ---------- 2. Dải đầu trang ---------- */
#header { height: auto; }
#header div.top
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}
#header div.logo { float: none; width: auto; flex: 0 0 auto; }
#header div.logo img { height: 34px; width: auto; }

/* Ô tìm kiếm xuống hàng riêng, chiếm trọn bề ngang */
#header div.searchbox
{
    float: none;
    order: 3;
    flex: 1 0 100%;
    width: auto;
    margin: 0;
    /* Bản gốc thụt lề trái 90px để né logo trong bố cục ngang. Trên khung hẹp
       nó ăn mất 90 trong 319px, làm ô nhập chỉ còn 125px. */
    padding-left: 0;
    padding-top: 0;
}
/* Ô tìm kiếm gốc dựng bằng <table> ba cột. Trên khung hẹp, table-layout
   chia đều làm ô nhập chỉ còn 76px. Chuyển hẳn sang flex một hàng. */
/* Không chỉ bảng, mà cả <form> bao ngoài cũng bị ghim chiều rộng cứng */
#header div.searchbox form,
#header div.searchbox #qSrch { width: 100%; margin: 0; }

#header div.searchbox #sTbl,
#header div.searchbox #sTbl tbody,
#header div.searchbox #sTbl tr
{
    display: block;
    width: 100%;
}
#header div.searchbox #sTbl tr { display: flex; gap: 8px; }
#header div.searchbox #sTbl td { display: block; padding: 0; }
/* flex-basis phải là 0 chứ không phải auto: để auto thì ô nhập vẫn bị chiều
   rộng cũ của <input> giữ lại và không giãn ra. min-width: 0 gỡ kích thước
   tối thiểu mặc định của flex item. */
#header div.searchbox #sTbl td.first { flex: 1 1 0; width: auto; min-width: 0; }
#header div.searchbox .txtquery
{
    width: 100%;
    height: 40px;
    font-size: 16px;      /* dưới 16px thì iOS tự phóng to khi gõ */
    border-radius: 3px;
    padding: 0 10px;
    box-sizing: border-box;
}
#header div.searchbox #qSbmt
{
    flex: 0 0 auto;
    height: 40px;
    width: auto;
    padding: 0 16px;
    box-sizing: border-box;
}
/* Bộ lọc kiểu tìm kiếm quá nhỏ để bấm bằng ngón tay */
#header #typeSelector { display: none; }
#header div.searchbox #sTbl td:has(#typeSelector) { display: none; }

#header div.userbox
{
    float: none;
    order: 2;
    margin-left: auto;
    white-space: nowrap;
    font-size: 14px;
}
#header div.userbox a { display: inline-block; padding: 8px 2px; }

/* ---------- 3. Menu chính thành ngăn kéo ---------- */
#mainMenu { height: auto; }
#mainMenu div.navigator
{
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}

#xna-nutmenu
{
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font: 600 15px/1 inherit;
    text-align: left;
    padding: 15px 2px;
    cursor: pointer;
}
#xna-nutmenu::before { content: "\2630"; margin-right: 10px; font-size: 17px; }
#xna-nutmenu[aria-expanded="true"]::before { content: "\2715"; }

/* Danh sách menu: xếp dọc, ẩn cho tới khi bấm nút */
#mainMenu #nav
{
    position: static;
    display: none;
    width: auto;
    height: auto;
    float: none;
    padding: 0 0 8px;
}
#mainMenu.xna-mo #nav
{
    display: block;
    background: #2e2e2e;   /* ngăn kéo phải có nền riêng, nếu không chữ trắng
                              sẽ nằm đè lên nội dung trang phía dưới */
    position: relative;
    z-index: 500;
}

#mainMenu #nav > li
{
    display: block;
    float: none;
    width: auto;
    height: auto;
    line-height: normal;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
#mainMenu #nav > li > a
{
    /* Bản gốc cho thẻ a thả nổi; không gỡ thì <li> không bao lấy nó và chỉ
       cao 1px, các mục dồn thành một hàng ngang. */
    float: none;
    display: block;
    height: auto;
    line-height: normal;
    padding: 13px 2px;
    font-size: 15px;
    color: #fff;
}
/* Dấu phân cách giữa các mục chỉ có nghĩa khi nằm ngang */
#mainMenu #nav > li > img.icons { display: none; }

/* Menu con: mở sẵn theo dạng thụt lề, vì không rê chuột được */
#mainMenu #nav li ul
{
    position: static;
    display: block;
    width: auto;
    border: 0;
    background: none;
    top: auto;
    left: auto;
}
#mainMenu #nav li ul a
{
    float: none;
    width: auto;
    height: auto;
    line-height: normal;
    padding: 10px 2px 10px 20px;
    font-size: 14px;
    background: none;
    border: 0;
    color: #bdbdbd;
}
#mainMenu #nav li:hover ul,
#mainMenu #nav li ul ul { display: block; position: static; left: auto; }

/* Hộp tin nhắn / bình luận nhanh: ẩn trên điện thoại vì cần rê chuột */
#mainMenu div.quickmenus { float: none; }
#mainMenu #toolbar .subpanel { display: none; }

/* ---------- 3b. Các khối trang chủ: bỏ thả nổi, xếp dọc ---------- */
/* Chỉ định rõ từng khối thay vì dựa vào bộ chọn con chung: quy tắc gốc đặt
   thả nổi bằng bộ chọn đặc hiệu hơn nên bộ chọn chung bị thua, khiến .photoInfo
   thoát khỏi khung cha và chồng lên khối bên dưới. */
#homePanes #RdStaffContent > div,
#homePanes #RdStaffContent .leftPhoto,
#homePanes #RdStaffContent .rightPhoto,
#homePanes #RdStaffContent .photoInfo,
#homePanes #lastNews > div,
#homePanes #lastNews .catPanes,
#homePanes #lastNews .catPanesLast,
#homePanes .locList > div,
#homePanes .staffList > div
{
    float: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Khung cha phải tự bao lấy con, kể cả khi còn sót phần tử thả nổi */
#homePanes #randomStaff,
#homePanes #RdStaffContent,
#homePanes #lastNews,
#homePanes .staffList,
#homePanes .locList,
#online-list .online
{
    display: flow-root;
    height: auto;
}
/* Các khung ảnh bị ghim chiều cao cố định (373px) theo bố cục ngang cũ;
   trên khung hẹp ảnh chỉ cao ~230px nên thừa ra một mảng trắng lớn. */
#homePanes #RdStaffContent .leftPhoto,
#homePanes #RdStaffContent .rightPhoto,
#homePanes #RdStaffContent .photoInfo,
#homePanes .staffList .tit,
#homePanes .locList .tit
{
    height: auto;
    min-height: 0;
}
#RdStaffContent .leftPhoto,
#RdStaffContent .rightPhoto,
#RdStaffContent .photoInfo { margin-bottom: 12px; }
#RdStaffContent .photoInfo { width: 100%; }
#RdStaffContent .leftPhoto img,
#RdStaffContent .rightPhoto img { display: block; width: 100%; height: auto; }

/* Chữ dọc "Xomnhiepanh.com" chỉ là trang trí, chiếm 100px bề ngang */
#randomStaff .logo { display: none; }

/* Nền bạc của hai khối này lộ ra khi nội dung co lại */
.staffList, .locList { background-color: transparent; }

/* Khối tin mới xếp chồng, có khoảng cách để phân biệt */
#lastNews .catPanes,
#lastNews .catPanesLast { margin-bottom: 20px; }

/* ---------- 3c. "Ảnh chọn lọc": dải vuốt ngang thay cho lưới ----------
   24 ảnh xếp lưới trên điện thoại thành 8 hàng, mỗi ảnh chỉ 24px — vừa chiếm
   nhiều chiều dọc vừa quá nhỏ để xem. Chuyển thành dải cuộn ngang có điểm bám,
   ảnh to gần bằng kích thước gốc nên vẫn nét. Tự chuyển ảnh bằng JS, dừng ngay
   khi người dùng chạm vào. */
#homePanes .staffList table.mtable,
#homePanes .staffList table.mtable tbody
{
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
}
#homePanes .staffList table.mtable tbody::-webkit-scrollbar { display: none; }
#homePanes .staffList table.mtable tr { display: contents; }
#homePanes .staffList table.mtable td
{
    flex: 0 0 auto;
    width: 170px;
    padding: 0;
    scroll-snap-align: start;
}
#homePanes .staffList table.mtable td img
{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}
#homePanes .staffList .tit { padding-bottom: 10px; }

/* ---------- 4. Thân trang: một cột, nội dung chính lên trước ---------- */
#mainPage
{
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
}
#mainPage .pageContent
{
    order: 1;
    float: none;
    width: auto;
    max-width: 100%;
    left: 0;
    padding-left: 0;
    background-image: none;   /* đường kẻ dọc chia cột, vô nghĩa khi một cột */
    box-sizing: border-box;
}
#mainPage .pageLeft,
#mainPage .pageRight
{
    order: 2;
    float: none;
    width: auto;
    max-width: 100%;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #e3e3e3;
    box-sizing: border-box;
}
#mainPage .clear { display: none; }

/* ---------- 5. Bảng ảnh và lưới nội dung ---------- */
/* Bảng dùng để dàn ảnh: cho phép xuống dòng thay vì kéo ngang */
.pageContent table.mtable,
.pageContent table.mtable tbody,
.pageContent table.mtable tr
{
    display: block;
    width: 100%;
}
/* Chia theo phần trăm rất mong manh: 48% + đệm ra 160px, hai ô thành 320px
   trong khung 319px nên rớt xuống một ô mỗi hàng. Dùng lưới để trình duyệt tự
   tính số cột theo bề ngang thật, thumbnail 95px thì vừa 3 cột trên điện thoại. */
/* Đặt lưới ở tbody chứ không phải từng tr: mỗi tr là một lưới riêng thì hàng
   cuối thiếu ô sẽ để lại khoảng hụt so le. display:contents cho các tr tan đi,
   để mọi ô ảnh chảy thành một lưới liên tục. */
.pageContent table.mtable tbody
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 10px 8px;
    align-items: start;
}
.pageContent table.mtable tr { display: contents; }
.pageContent table.mtable td
{
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}
.pageContent table.mtable td img { max-width: 100%; height: auto; }
.comment_content { width: auto; max-width: 100%; }

/* Bảng dữ liệu thường: cho cuộn ngang trong khung riêng, không đẩy cả trang */
.pageContent > table:not(.mtable)
{
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ---------- 6. Chân trang ---------- */
#footer .foot-content { display: block; text-align: center; }
#footer .foot-content > div { float: none; width: auto; margin-bottom: 8px; }

/* ---------- 7. Vùng bấm đủ lớn cho ngón tay ---------- */
#mainMenu #nav > li > a,
#footer a,
.pageContent .pagination a { min-height: 44px; display: block; }
.pageContent .pagination a { display: inline-block; min-width: 38px; text-align: center; padding: 11px 8px; }

}

/* ---------- Màn hình rất hẹp ---------- */
@media (max-width: 480px) {
.pageContent table.mtable tbody { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
#header div.logo img { height: 30px; }
#header div.userbox { font-size: 13px; }
}