/* ============================================================
   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; }

/* Mục con lồng trong menu con vẫn thả nổi theo quy tắc gốc #nav li{float:left}.
   Bộ chọn dùng dấu ">" ở trên chỉ chạm tới con trực tiếp nên bỏ sót chúng,
   khiến <ul> con cao 0px và các mục đè lên nhau. */
#mainMenu #nav li li
{
    float: none;
    display: block;
    width: auto;
    height: auto;
    line-height: normal;
    border-left: none;
}
#mainMenu #nav li ul
{
    display: flow-root;
    padding-left: 0;
}


}

/* XNA-DA-TACH-KHOI
   Cac quy tac duoi day viet cho breakpoint 900px nhung tung bi chen nham
   vao khoi 480px o tren. Cach chen cu la tim dau dong ngoac cuoi tep, ma
   dau do lai dong khoi 480 chu khong phai khoi 900. Hau qua: may co khung
   nhin tu 481 den 900px khong nhan duoc chung - chu site dung o 492px nen
   khong thay gi thay doi suot may dot sua. Nay tach thanh khoi 900px rieng. */
@media (max-width: 900px) {

/* XNA-MOBILE-MUCCON */
/* Menu con trong ngăn kéo: hiện ra theo dạng thụt lề, vì trên điện thoại
   không rê chuột được. Phải nêu cả li lồng bên trong — bộ chọn ">" ở trên chỉ
   chạm con trực tiếp nên bỏ sót, khiến <ul> con cao 0px. Giữ giống hệt bản
   dùng trong khung chung của diễn đàn để hai bên không lệch nhau. */
#mainMenu.xna-mo #nav li ul
{
    /* !important la bat buoc o day: bo sinh menu ghi thang style="display:none"
       vao the <ul>, ma style noi tuyen thi khong CSS thuong nao thang duoc.
       Day la truong hop duy nhat trong tep nay dung !important. */
    display: flow-root !important;
    position: static;
    width: auto;
    padding-left: 0;
    border: 0;
    background: none;
    top: auto;
    left: auto;
}
#mainMenu.xna-mo #nav li li
{
    float: none;
    display: block;
    width: auto;
    height: auto;
    line-height: normal;
    border-left: none;
}
#mainMenu.xna-mo #nav li ul a
{
    float: none;
    width: auto;
    height: auto;
    line-height: normal;
    padding: 11px 2px 11px 20px;
    font-size: 14px;
    background: none;
    border: 0;
    color: #bdbdbd;
}


/* XNA-MOBILE-VUNGBAM */
/* Vùng bấm và độ dễ đọc.
   Chuẩn WCAG 2.5.8 khuyến nghị đích bấm tối thiểu 24x24px; liên kết trong danh
   sách của bản gốc chỉ cao 15-18px. Nới giãn dòng cho cả khối nội dung vừa làm
   đích bấm lớn hơn vừa dễ đọc trên màn hình nhỏ — an toàn hơn là đặt chiều cao
   cứng cho từng liên kết, việc đó dễ làm vỡ các bố cục dày. */
.pageContent { line-height: 1.65; }
.pageContent li { margin-bottom: 2px; }

.pageContent .pagination a,
.pageContent .paging a
{
    display: inline-block;
    min-width: 40px;
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 6px;
    margin: 2px;
}

/* Ô nhập: cỡ chữ 16px để iOS không tự phóng to khi gõ */
#mainPage input[type="text"],
#mainPage input[type="password"],
#mainPage input[type="email"],
#mainPage textarea,
#mainPage select
{
    font-size: 16px;
    min-height: 40px;
    box-sizing: border-box;
}
#mainPage input[type="submit"],
#mainPage button
{
    min-height: 42px;
    padding: 0 16px;
}


/* XNA-MOBILE-TRANGRIENG */
/* Nhóm trang đứng riêng: đăng nhập, quên mật khẩu, thông báo, xác nhận xem ảnh.
   Chúng không dùng header chung nên không có #mainPage; khung #content bị ghim
   430px với đệm trên 65px, tràn ra ngoài màn hình 375px. */
#content,
#content *
{
    max-width: 100%;
    box-sizing: border-box;
}
#content
{
    width: auto;
    padding: 24px 16px;
}
/* Các hàng biểu mẫu bị ghim 400px, hẹp hơn khung nhưng vẫn tràn sau khi cộng đệm */
#content .formrow,
#content .formfield
{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
/* Chỉ ô nhập chữ mới giãn hết bề ngang. Trước đó quy tắc phủ cả input nên
   ô đánh dấu "Ghi nhớ" bị kéo rộng ra 321px. */
#content .formrow input:not([type="checkbox"]):not([type="radio"]),
#content .formfield input:not([type="checkbox"]):not([type="radio"])
{
    width: 100%;
}
#content input[type="checkbox"],
#content input[type="radio"]
{
    width: auto;
    min-height: 0;
    min-width: 20px;
    height: 20px;
}
#content table { width: 100%; max-width: 100%; }
#content input[type="text"],
#content input[type="password"],
#content input[type="email"],
#content textarea,
#content select
{
    width: 100%;
    font-size: 16px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
}
#content textarea { min-height: 96px; padding: 8px 10px; }
#content input[type="submit"],
#content button
{
    min-height: 42px;
    padding: 0 18px;
    font-size: 15px;
}
#content img { max-width: 100%; height: auto; }


/* XNA-MOBILE-TRANGANH */
/* Trang ảnh chi tiết dùng .pageContentFull (một cột) chứ không phải cặp
   .pageLeft + .pageContent nằm trực tiếp trong #mainPage. Vì thế quy tắc đảo
   thứ tự đặt ở #mainPage không với tới: hai khối này là cháu, không phải con,
   nên thuộc tính order của chúng vô nghĩa. Đặt flex ngay tại khung cha thật
   của chúng.

   Thứ tự đúng trên điện thoại: ẢNH trước, rồi mới tới thông tin tác giả và
   EXIF — người xem mở trang ảnh là để xem ảnh. */
#mainPage .pageContentFull
{
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 100%;
}
#mainPage .pageContentFull .pageContent
{
    order: 1;
    float: none;
    width: auto;
    max-width: 100%;
    left: 0;
    padding-left: 0;
    background-image: none;
}
#mainPage .pageContentFull .pageLeft,
#mainPage .pageContentFull .pageRight
{
    order: 2;
    float: none;
    width: auto;
    max-width: 100%;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #e3e3e3;
}

/* Bảng thông số EXIF: hai cột nhãn/giá trị, cho phép xuống dòng */
#mainPage .pageContentFull table { width: 100%; table-layout: fixed; }
#mainPage .pageContentFull table td { word-wrap: break-word; }


/* XNA-MOBILE-CUMANH */
/* Cụm ngay dưới ảnh: thanh công cụ, tên ảnh, chuyên mục, nút ảnh trước/sau.
   Bản gốc đặt #act-nav thả trái và #lb-nav thả phải, hai bên một hàng ngang.
   Trên khung hẹp chúng không đủ chỗ nên đè lên .headTitle và .cate vốn chiếm
   trọn bề ngang. Xếp thành từng hàng riêng. */
#mainPage #act-nav,
#mainPage #lb-nav,
#mainPage .headTitle,
#mainPage .cate,
#mainPage #photoActionMenu
{
    float: none;
    width: auto;
    max-width: 100%;
    clear: both;
}
#mainPage #act-nav
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 6px;
}
#mainPage #photoActionMenu { clear: none; width: auto; }
#mainPage .headTitle
{
    margin: 10px 0 6px;
    line-height: 1.3;
}
#mainPage #lb-nav
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    padding-top: 10px;
    border-top: 1px solid #e3e3e3;
}
#mainPage #lb-nav > div { float: none; }
#mainPage .cate { margin-bottom: 8px; }


/* XNA-MOBILE-THUTUANH */
/* Thứ tự đọc trên trang ảnh: ảnh -> tên ảnh và chuyên mục -> thanh công cụ và
   nút ảnh trước/sau -> bình luận. Bản gốc đặt thanh công cụ trước tên ảnh vì
   trên màn rộng chúng nằm cùng một hàng ngang; trên điện thoại xếp dọc thì
   người xem gặp nút Thích trước cả tên bức ảnh.

   Mọi con mặc định order 4 nên phần còn lại giữ nguyên trật tự vốn có; chỉ bốn
   khối đầu được đánh số lại. */
#mainPage .pageContentFull .pageContent { display: flex; flex-direction: column; }
#mainPage .pageContentFull .pageContent > * { order: 4; }
#mainPage .pageContentFull .pageContent > .nav-photo { order: 0; }
#mainPage .pageContentFull .pageContent > .photo    { order: 1; }
#mainPage .pageContentFull .pageContent > .hozline  { order: 2; }
#mainPage .pageContentFull .pageContent > #nav-photo{ order: 3; }


/* XNA-MOBILE-BANG-NUT */
/* --- Bảng dữ liệu ---
   Trước đây đặt table-layout:fixed cho MỌI bảng để chặn tràn. Nhưng nó chia
   đều mọi cột, nên bảng hộp thư 5 cột chỉ còn ~58px mỗi cột và chữ vỡ từng
   dòng. Nay chỉ ép với bảng dùng để dàn bố cục; bảng dữ liệu để trình duyệt
   tự chia theo nội dung, và nếu vẫn rộng thì cho cuộn ngang trong khung riêng. */
#container table { table-layout: auto; }
#header div.searchbox #sTbl { table-layout: fixed; }

/* --- Nút tìm kiếm thành biểu tượng kính lúp ---
   Chữ "Tìm kiếm" chiếm gần 100px, làm ô nhập bị lẹm. Đổi sang biểu tượng cho
   gọn. Giữ nguyên thuộc tính value nên trình đọc màn hình vẫn đọc được nhãn. */
#header div.searchbox #qSbmt
{
    width: 44px;
    min-width: 44px;
    padding: 0;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #4a4a4a;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    border: 0;
    border-radius: 3px;
}


/* XNA-MOBILE-HOPTHU */
/* --- Hộp thư và các trang trong khu vực thành viên ---
   Cột phụ .pageLeft phải xuống dưới dù nằm trong khung nào: có trang đặt nó
   trực tiếp trong #mainPage, có trang lồng thêm một lớp .pageContentFull.
   Nêu cả hai để không sót, vì đây là khu vực chỉ thấy khi đã đăng nhập. */
#mainPage .pageLeft,
#mainPage .pageRight,
#container .pageLeft,
#container .pageRight
{
    float: none;
    width: auto;
    max-width: 100%;
}

/* Bảng thư: 5 cột trong 375px vẫn chật. Thu hai cột biểu tượng và ô chọn về
   bề rộng tối thiểu, nhường chỗ cho tiêu đề thư. */
#private-mess { width: 100%; }
#private-mess td,
#private-mess th { padding: 8px 4px; vertical-align: middle; }
#private-mess td.mail-icon,
#private-mess th.mail-icon { width: 26px; padding: 8px 0; }
#private-mess td.delete,
#private-mess th.delete { width: 34px; padding: 8px 0; text-align: center; }
#private-mess td.from,
#private-mess th.from { width: 22%; word-break: break-word; }
#private-mess td.date,
#private-mess th.date
{
    width: 74px;
    font-size: 12px;
    line-height: 1.35;
    color: #666;
}
#private-mess td.subject a { word-break: break-word; }

/* Bảng dữ liệu quá rộng thì cho cuộn ngang trong khung riêng, không đẩy cả trang */
#mainPage .pageContent > table:not(.mtable):not(#private-mess)
{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* XNA-MOBILE-NHOMNHANH */
/* --- Nút menu và nhóm biểu tượng nhanh cùng một hàng ---
   Trước đây nút menu đặt width:100% nên chiếm trọn hàng, đẩy nhóm Tin nhắn /
   Ảnh / Bình luận xuống hàng dưới. Nay .navigator thành hàng ngang: nút bên
   trái, nhóm biểu tượng dồn sang phải, còn ngăn kéo menu chiếm cả hàng kế tiếp.

   Biểu tượng bị bóp thành sợi vì quy tắc chặn tràn max-width:100% cắt cả ảnh
   sprite khi ô chứa co lại — phải gỡ riêng cho chúng bằng max-width:none. */
#mainMenu div.navigator
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#xna-nutmenu
{
    width: auto;
    flex: 0 0 auto;
    border-bottom: 0;
    padding-right: 16px;
}
#mainMenu div.quickmenus
{
    float: none;
    flex: 0 0 auto;
    margin-left: auto;
    width: auto;
}
/* Ngăn kéo menu xuống hàng riêng, chiếm hết bề ngang */
#mainMenu #nav { flex: 1 0 100%; }

#mainMenu #toolbar { float: none; width: auto; }
#mainMenu #toolbar > ul
{
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#mainMenu #toolbar > ul > li
{
    float: none;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
}
#mainMenu #toolbar > ul > li > a
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
}
/* Ảnh sprite phải giữ đúng kích thước gốc, không bị chặn tràn cắt mất */
#mainMenu #toolbar > ul img,
#mainMenu #toolbar > ul img.icons
{
    max-width: none;
    flex: 0 0 auto;
}
/* Con số đếm bên cạnh biểu tượng */
#mainMenu #toolbar > ul > li > a span,
#mainMenu #toolbar > ul > li .count
{
    font-size: 12px;
    line-height: 1;
    margin-left: 3px;
}


/* XNA-MOBILE-THUTUHANG */
/* Trong DOM, #nav nam TRUOC .quickmenus. Voi flex-wrap, #nav chiem 100% nen
   xuong hang moi, keo .quickmenus xuong theo - khi mo ngan keo thi nhom bieu
   tuong bi day xuong duoi toan bo menu. Danh so thu tu tuong minh de nut va
   nhom bieu tuong luon o hang dau, ngan keo luon o hang duoi. */
#xna-nutmenu           { order: 1; }
#mainMenu div.quickmenus { order: 2; }
#mainMenu #nav          { order: 3; flex: 1 0 100%; }

/* Ben dien dan nhom nay rong (khung dung chung khong mang toolbar), an di de
   khong chiem cho trong hang. */
#mainMenu div.quickmenus:empty { display: none; }

}

/* XNA-MOBILE-SLIDE-VA-BANG
   Them bang cach mo mot khoi @media MOI o cuoi tep, khong chen vao khoi co san:
   cach chen cu tim dau dong ngoac cuoi tep va da tung lam roi nham vao khoi
   480px. Mo khoi moi thi khong bao gio nham. */
@media (max-width: 900px) {

/* ---- Bang tha xuong cua Tin nhan / Anh moi / Binh luan moi ----
   Quy tac chan tran max-width:100% cua ta bo no vao be ngang cua the <li>
   chua no - ma the do chi rong 44px, nen bang mo ra chi bang mot ngon tay.
   Phai go bang max-width:none roi dat be ngang theo man hinh. */
#toolbar .subpanel
{
    max-width: none;
    width: 92vw;
    right: 0;
    left: auto;
    top: 46px;
    box-sizing: border-box;
}
#toolbar .subpanel ul
{
    max-height: 60vh;
    height: auto;
    width: 100%;
}
#toolbar .subpanel li
{
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
}
#toolbar .subpanel div.info
{
    width: auto;
    max-width: none;
    float: none;
    overflow: hidden;
}
#toolbar .subpanel li img { max-width: 48px; height: auto; }
#toolbar .subpanel h3 { font-size: 14px; line-height: 1.4; }

/* ---- "Anh chon loc": moi lan mot anh, tron khung ----
   Anh trong khoi nay co ca kho dung lan kho ngang; xep nhieu tam mot luot thi
   chieu cao so le trong roi mat. Nay moi tam chiem tron be ngang, khung cao co
   dinh, anh dat contain de KHONG bi cat mat phan nao cua bo cuc. */
#homePanes .staffList table.mtable,
#homePanes .staffList table.mtable tbody
{
    gap: 0;
}
#homePanes .staffList table.mtable td
{
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: center;
}
#homePanes .staffList table.mtable td a
{
    display: block;
    width: 100%;
    height: 62vw;
    max-height: 420px;
    background: #141414;
    border-radius: 2px;
    overflow: hidden;
}
#homePanes .staffList table.mtable td img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

}

/* XNA-MOBILE-SUA-BANG-VA-CHAN
   Them bang khoi @media moi o cuoi tep - cach an toan da rut ra. */
@media (max-width: 900px) {

/* ---- Bang tha xuong bi dan ngang ----
   Quy tac lam hang bieu tuong truoc day viet la "#toolbar ul" nen bat LUON ca
   <ul> ben trong bang tha xuong, bien danh sach thong bao thanh mot hang ngang,
   moi muc bop lai con mot cot chu. Chi ap cho con TRUC TIEP cua #toolbar. */
#mainMenu #toolbar > ul
{
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Tra danh sach ben trong bang ve dang xep doc binh thuong */
#toolbar .subpanel ul
{
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#toolbar .subpanel ul li
{
    display: block;
    float: none;
    clear: both;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 9px 10px;
    border-bottom: 1px solid #eee;
}
#toolbar .subpanel ul li a
{
    display: inline;
    min-width: 0;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
}
#toolbar .subpanel ul li img
{
    float: left;
    max-width: 44px;
    height: auto;
    margin-right: 8px;
}
#toolbar .subpanel ul li div.info
{
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
}

/* ---- Chan trang ----
   Hai cot deu mang style noi tuyen (float, width, text-align) ghi thang trong
   HTML, ma style noi tuyen thi khong quy tac thuong nao thang duoc - day la ly
   do phai dung !important o vai dong duoi. */
#footer .foot-content > div
{
    float: none !important;
    width: auto !important;
    text-align: center !important;
    margin: 0 0 10px;
}
#footer .foot-content
{
    text-align: center;
    padding-top: 18px;
    padding-bottom: 18px;
    line-height: 1.6;
}
/* Lien ket trong chan trang phai nam CUNG DONG voi dau phan cach giua chung;
   dat display:block nhu truoc lam moi lien ket chiem mot dong va dau cham roi
   ra dung mot minh. */
#footer a
{
    display: inline-block;
    min-height: 0;
    padding: 6px 2px;
}
#footer .foot-content br { line-height: 2.2; }
#footer .foot-content > div:last-of-type
{
    font-size: 13px;
    color: #666;
    margin-bottom: 0;
}

}

/* ============================================================
   DAI TABLET: 901px - 1199px  (iPad Pro doc 1024, iPad Pro 11" ngang 1194)
   ------------------------------------------------------------
   Bo cuc goc ghim cung 1200px. Duoi 1200px ma tren nguong dien
   thoai 900px thi khong co luat nao ap dung, nen:
     - Trang chu tran ngang 176px o 1024px (randomStaff 1200,
       staffList/locList 1146, RdStaffContent 1100).
     - Cac trang trong KHONG tran ngang, nhung cot phu .pageLeft
       (305px) cong cot chinh .pageContent (870px) la 1175px,
       vuot be ngang nen cot chinh BI DAY XUONG DUOI cot phu.
       Do o 1024px: cot chinh nam tai y=1335 thay vi y=118, trang
       dai 2870px thay vi 1544px.
   Khoi nay giu nguyen bo cuc hai cot cua desktop, chi doi cac
   be ngang cung thanh ty le. Tren 1199px khong co hieu luc, nen
   giao dien desktop khong he bi dung toi.
   ============================================================ */

@media (min-width: 901px) and (max-width: 1199px) {

/* Chan tran ngang tan goc: max-width LUON khong che width, bat ke
   width duoc khai bao o dau hay dac hieu toi dau. */
#container, #container *,
#footer, #footer *
{
    max-width: 100%;
    box-sizing: border-box;
}
#container table { table-layout: fixed; }
#container table img { height: auto; }

/* Bo be ngang cung cua cac khung ngoai */
#container,
#header div.top,
#mainMenu div.navigator,
#mainPage,
.pageContentFull,
.banner,
#online-list .online,
#footer .foot-content,
#footer div.content,
#randomStaff,
#randomStaff #RdStaffContent,
#lastNews,
.staffList,
.locList
{
    width: auto;
}

/* Hai cot theo ty le thay vi 280px + 870px co dinh */
.pageLeft    { width: 26%; padding-right: 18px; }
.pageContent { width: 74%; padding-left: 18px; }

/* Khoi anh lon dau trang chu: chuyen sang flex de ba manh tu co lai */
#randomStaff
{
    height: auto;
    display: flex;
    align-items: stretch;
}
#randomStaff .logo { flex: 0 0 68px; height: auto; }
#randomStaff #RdStaffContent
{
    flex: 1 1 auto;
    height: auto;
    display: flex;
}
#RdStaffContent .leftPhoto  { flex: 1 1 auto;   width: auto; }
#RdStaffContent .photoInfo  { flex: 0 0 246px;  width: auto; height: auto; }
#RdStaffContent .rightPhoto { flex: 0 0 200px;  width: auto; }
.photoInfo .leftInfo, .photoInfo .rightInfo { width: auto; }

/* Ba cot tin moi va danh sach dia diem chia theo phan tram */
#lastNews .catPanes,
#lastNews .catPanesLast { width: 32%; margin-right: 2%; }
#lastNews .catPanesLast { margin-right: 0; }
.locList .item { width: auto; }

}

/* ============================================================
   Vung bam va co chu — bo sung sau dot ra soat toan bo man hinh
   ============================================================ */

@media (max-width: 900px) {

/* Menu chuyen muc o cot trai cao 18px, duoi nguong cham 44px cua
   ca Apple lan Google. Luat 44px cu chi phu menu chinh, chan trang
   va phan trang nen bo sot cho nay. Dung flex de chu can giua ma
   khong pha anh nen mui ten cua muc dang mo. */
.pageLeft #accordion a
{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: 2px;
    padding-bottom: 2px;
    box-sizing: border-box;
}

/* Vai doan van trong noi dung bi dat cung font-size 9-11px ngay
   trong the style, doc rat met tren dien thoai. Chi nang dung ba
   co nho nay, khong dung toi cac co chu khac. */
#mainPage span[style*="font-size:9px"],
#mainPage span[style*="font-size: 9px"],
#mainPage span[style*="font-size:10px"],
#mainPage span[style*="font-size: 10px"],
#mainPage span[style*="font-size:11px"],
#mainPage span[style*="font-size: 11px"]
{
    font-size: 15px !important;
}

}