@media (max-width: 768px) {
    .news-line {
        top: 0;
        left: 0;
        bottom: auto;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        border-left: none;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,0.85);
        color: #fff;
    }
    .news-line .news {
        background: #fff;
        color: #333;
        padding: 30px;
        border-radius: 8px;
        width: 85%;
        max-width: 400px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    }
    .news-line .news-close {
        top: 20px;
        right: 20px;
        color: #fff;
        font-size: 1.5em;
    }
}
/* ==============================================
   9. RESPONSIVE / MEDIA QUERIES
   ============================================== */
@media screen and (max-width: 800px) {
    /* UI ขาจรสำหรับมือถือ ไม่ให้บังหน้าจอ */
    .user-panel { flex-wrap: wrap; padding: 15px 10px; flex-direction: column; gap: 10px; }
    .user-panel-left { width: 100%; justify-content: center; flex-direction: column; align-items: center; gap: 10px; }
    .user-menu { margin-left: 0; }
    .user-menu ul { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .user-menu li a { display: block; padding: 6px 12px; background: #eee; border-radius: 4px; font-weight: bold; }
    .welcome-guest { display: none; } /* ซ่อนข้อความเพื่อให้ไม่เกะกะ */
    .loginform { width: 100%; padding: 0; display: flex; justify-content: center; }
    .loginform form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 8px; }
    .loginform input[type="text"], .loginform input[type="password"] { flex: 1; min-width: unset; padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }
    .loginform input[type="submit"] { flex: 0 0 auto; padding: 10px; border-radius: 5px; width: 100%; box-sizing: border-box; }

    .google-search { width: 100%; margin-left: 0; display: flex; justify-content: center; }
    .search-wrapper { width: 100%; max-width: 400px; }
    .search-wrapper input[type="text"] { width: 100%; min-width: unset; padding: 10px 15px; border-radius: 20px; box-sizing: border-box; }
    .post, .personalmessage { min-height:75px; }
    td.topic-icon, td.topic-read, td.topic-reply { display:none; }

    /* Board Index Mobile */
    .board-row { flex-wrap: wrap; }
    .board-icon { flex: 0 0 50px; }
    .board-info { flex: 1 1 60%; }
    .board-stats { display: none; }
    .board-lastpost {
        flex: 1 1 100%;
        margin-top: 10px;
        padding-left: 65px;
        padding-top: 10px;
        border-top: 1px dashed #eee;
        border-right: none;
    }
}

@media screen and (max-width: 768px) {
    /* Message Index Mobile */
    .mt-header-row { display: none; }
    .mt-row { flex-wrap: wrap; position: relative; padding: 15px; }
    .mt-col-icon { position: absolute; top: 15px; left: 10px; }
    .mt-col-subject { flex: 0 0 100%; padding-left: 35px; margin-bottom: 10px; }
    .mt-col-starter { flex: 0 0 auto; font-size: 0.85em; margin-right: 15px; padding-left: 35px; }
    .mt-col-lastpost {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px dashed #eee;
        margin-top: 8px;
        padding-top: 8px;
        padding-left: 35px;
    }
    .mt-col-check { position: absolute; top: 15px; right: 10px; }

    /* Post Display Mobile */
    .post_wrapper { display: flex; flex-direction: column; }
    .poster {
        flex: auto;
        width: 100%;
        float: none;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 10px;
        background: #fbfbfb;
        box-sizing: border-box;
    }
    .poster h4 { margin: 0 10px 0 0; font-size: 1.1em; }
    .poster .avatar { display: inline-block; margin: 0 10px 0 0; list-style: none; }
    .poster img.avatar { width: 40px; height: 40px; }
    .poster .user_info { display: none; }
    .poster li.poster_online { margin: 0 0 0 auto; font-size: 0.8em; list-style: none; padding: 0; }
    .postarea, .moderatorbar { margin: 0; width: 100%; box-sizing: border-box; }
}

@media screen and (max-width: 640px) {
    .pages { float:none; text-align:center; width:100%; padding: 10px 0; }
    .topic-button { float:none; width:100%; text-align:center; padding:20px 0 0 0; }
    .daomod { font:bold 15em sans-serif; line-height:.6em; }
    .boardtopic-lastpost { display: none; }

    /* Form Mobile */
    .form-label { width: 100%; text-align: left; margin-bottom: 5px; }
    .form-group { display: block; }
    .bbc_button { width: 30px; height: 30px; font-size: 14px; }

    /* Post Modify Mobile Fixes */
    #postmodify table, #postmodify tbody, #postmodify tr, #postmodify td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    #postmodify td[align="right"] { text-align: left !important; padding: 5px 0 0 0; font-weight: bold; }
    #postmodify input[type="text"], #postmodify textarea { width: 100% !important; margin-bottom: 10px; }
    .submit input { width: 100% !important; margin-bottom: 10px; display: block; }
}
@media (max-width: 768px) {
    #head { flex-wrap: wrap; justify-content: flex-start; }
    .hamburger-btn { display: block; margin: 0 20px 0 0; }
    #main-menu-wrapper { display: none; width: 100%; margin-top: 10px; }
    #main-menu-wrapper.menu-open { display: block; }
    
    .forum-menu { text-align: center; width: 100%; }
    .forum-menu .dropmenu { display: flex !important; flex-direction: column; gap: 6px; }
    .forum-menu .dropmenu > li { width: 100%; margin: 0; }
    .forum-menu .dropmenu a { padding: 10px; background: #333; color: #fff; border-radius: 6px; font-size: 1.1em; border: 1px solid #444; display: block; text-align: center; }
    .forum-menu .dropmenu a:hover, .forum-menu .dropmenu a.active { background: #f05061; border-color: #f05061; color: #fff; }
    .forum-menu .textmenu { display: inline !important; }
}