::-webkit-scrollbar { width: 17px; }
::-webkit-scrollbar-thumb { background:#e1e1e1; border: 3px solid transparent; border-radius: 8px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { opacity: 1; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }
iframe { border: 0; height: inherit; }
tbody, td, tfoot, th, thead, tr{ padding: 5px 10px; border-width: 1px; box-sizing: border-box; border-color: #333333; }
.header{ width:100%; position:fixed; top: 0; left: 0; padding: 0 10%; z-index:1040;  
/*background-color: #00446a; */
    
}
.headerbt{ box-sizing: border-box; height:60px; display:flex; justify-content: space-between; align-items:center; column-gap: 100px; 
/*background-color:#00446a; */
max-width: 1500px;
margin: 0 auto;}
.heaverTop{ padding:10px 0; display:flex; justify-content: space-between; align-items:center; box-sizing: border-box; 
/*background-color:#00446a; */
max-width: 1500px;
    margin: 0 auto;}
.heaverTop_logo img{ width: 155px; height: 62px; }
.headerbtnav{ flex: 1; }
.headerbtnav ul{ 
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}
.headerbtnav span{ font-size:18px; font-weight:600; color: #000; }
.heaverTop_right{ width: 480px; display:flex; justify-content:space-between; align-items:center; }
.heaverTop_right figure{ text-align:center; font-size: 15px; color:#000; cursor:pointer; }
.heaverTop_right figure .iconfont{ font-size: 24px; }
.heaverTop_so{ width:754px; height:50px; padding:2px; box-sizing: border-box; display:flex; background: #F7F8FA; border-radius: 6px 6px 6px 6px; opacity: 1; transform: scale(1.0); transition: all 0.5s; }
.select_module_con{ position:relative; width: 100px; }
.select_module_con select{ outline: none; border: 0; }
.select_module_con .dropdown-menu{ padding:10px 0; border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); border: #e5e5e5; min-width: 180px; position: absolute; left: -55px; }
.select_module_con .dropdown-menu li{ padding:5px 0; }
.select_module_con .dropdown-submenu .dropdown-menu{ top: -47px; left: auto; right: -180px; margin-left: -1px; border-radius: inherit; border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); border: #e5e5e5; display: block; min-width: 180px; }
.navbar .dropdown-menu{ min-width: 300px; }
.navbar .dropdown-menu .dropdown-menu{ left: 100%; top: 0; }
.navbar .nav-item:hover > a::after { transform: rotate(180deg); }
.navbar .dropdown-menu .nav-link{ color: #ffffff; }
.navbar .dropdown-menu li .dropdown-menu li{ padding:0; }
.dropdown-submenu { position: relative; cursor: pointer; }
.select_module_con .dropdown-submenu .dropdown-toggle::after { transform: rotate(270deg); top: 19px; position: absolute; }
.nav-item:hover, .nav-link:hover{ background-color: #303133; }
.nav-link, .nav-link:focus{ color:#fff; }
.dropdown-menu{border-radius: inherit;}
.dropdown-submenu .dropdown-menu { top: 40px; left: 0%; margin-top: -6px; margin-left: -1px; border-radius: inherit; }
.select_img{ position:absolute; width:24px; height:18px; z-index:1; top: 10px; left:-5px; }
.lr_allrig p{ margin:10px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.heaverTop_so>form{ width:100%; display: flex; justify-content:space-between; align-items:center; position:relative; }
.heaverTop_so select{ position: relative; width:100px; height:46px; text-align:center; outline:none; border: 1px solid #30b55b; border-right: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.heaverTop_so>form:after{ content:''; position: absolute; top: 1px; left: 105px; height: calc(100% - 2px); width: 1px; background-color: #e5e5e5; }
.heaverTop_so>form>img{ position: absolute; left: 74px; width: 16px; }
.heaverTop_input{ flex: 1; height:46px; border: none; outline:none; padding-left:20px; box-sizing: border-box; border-top: 1px solid #30b55b; border-bottom: 1px solid #30b55b; }
.heaverTop_so .submit{ width:100px; height:46px; text-align:center; line-height:40px; background: #30b55b; border-radius: 0 4px 4px 0; color:#fff; font-size: 15px; cursor: pointer; column-gap: 10px; }
.avatar{ background-color: #fff; display: block; padding: 3px; border-radius: 50%; }
#main{ min-height: 100vh; margin: 0 auto; padding-top: 160px;background:#fdfdfd; }
.footer{ width:100%; height:475px !important; margin-top:50px; vertical-align:bottom; }
.footer::-webkit-scrollbar { width: 0; display: none; }
.heaverTop_right figure:hover{ color: #00B42A; }
.bianti img{ width:16px; height:16px; }
.wer{ border:1px solid red !important; }
.messagebox{ width:100%; height: 100%; position:fixed; bottom: 0; top: 0; left:0; right: 0; background:rgba(0, 0, 0, 0.5); z-index:999; display:flex; justify-content:center; align-items:center; }
.messagecont{ width:40%; background-color:#fff; padding:15px; border-radius:18px; position: relative; }
.remove{ width:20px; height:20px; position: absolute; right:10px; top: 10px; }
.loimgtop{ width:100%; text-align:center; }
.loimgcent{ width:100%; display: flex; justify-content:center; align-items: center; margin-top:20px; }
.loimgcent span{ display: block; width:30%; height: 1px; background-color: #30B55B; }
.loimgcent p{ margin: 0px 20px; font-size: 18px; font-weight: bold; color: #35B257; }
.login{ width:70%; margin: 0 auto; }
.login>div{ width:100%; height:50px; background-color: #F7F8FA; margin-top:14px; display:flex; justify-content:space-between; align-items: center; padding:0px 24px; border-radius: 8px; font-size: 16px; font-weight: 400; color: #1D2129; overflow: hidden; box-sizing: border-box; }
.loginimg{ display: inline-block; width:100px; height:100%; margin-right:-24px; border-radius:8px; display:flex; justify-content: center; align-items:center; color:#fff; background-color: #86909C; cursor:pointer; }
.login>div>input{ border: none; outline:none; background-color:#F7F8FA; font-size:16px; min-width: 360px; width:80%; }
.bianti{ display:flex; align-items: center; font-size:12px; line-height:30px; margin-top:10px; }
.bianti img{ margin-right:6px; }
.bianti a{ color: #30B55B; }
.edit{ width:100%; display:flex; padding:50px 0px; justify-content:center; align-items: center; flex-direction: column; }
.edit div{ width: 364px; height: 52px; background: #00B42A; border-radius: 2px 2px 2px 2px; text-align:center; line-height:52px; color: #fff; cursor:pointer; }
.edit p{ font-size: 12px; font-weight: 400; color: #86909C; margin-top:20px; }
.headerbtnav a{ position: relative; text-decoration: auto; }
.hamburger{ display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1060; }
.hamburger span{ display: block; width: 24px; height: 2px; background: #333; border-radius: 2px; transition: all 0.3s ease; }
.hamburger.active span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2){ opacity: 0; }
.hamburger.active span:nth-child(3){ transform: rotate(-45deg) translate(5px, -5px); }
.movableLine{ width: 25px; height: 2px; position: absolute; background: #35B257; left: 50%; margin-left: -12px; bottom: -14px; }
.edit p>a{ color: #35B257; }
.el-radio__input.is-checked+.el-radio__label{ color: #00B42A !important; }
.el-radio__input.is-checked .el-radio__inner { border-color: #00B42A !important; background: #00B42A !important; }
.el-button--primary{ background-color: #00B42A !important; border-color: #00B42A !important; }
.lr_allrig>div>div>span:hover{ background: rgba(53,178,87,0.12); color: #35B257; border-radius: 6px; }
.login>div>select{ width:120px; height:40px; text-align:center; border: none; outline:none; background-color: #F7F8FA; font-size:16px; color: #86909C; }
.tezi{ width:100%; height: auto !important; display:flex; flex-direction: column; align-items: initial !important; padding-bottom:10px !important; }
.tezi span{ display:inline-block; width:100%; height:50px; line-height:50px; }
.tezi textarea{ width:100%; height:100px; resize: none; border:none; font-size:14px; outline: none; background-color:#F7F8FA; }
.intop, .backTop{ position:fixed; width:60px; height:100px; border-radius:12px; right:10px; font-size:12px; bottom:40%; z-index: 9; box-shadow:0px 0px 10px #ccc; -webkit-animation: bounce-down 8s linear infinite; animation: bounce-down 8s linear infinite; }
.intop{ display:none; }
.intop figure, .backTop figure{ width:100%; height:100%; display:flex; justify-content:center; align-items: center; flex-direction: column; cursor:pointer; color: #4E5969; border-radius:12px; background-color:#fff; }
.intop img, .backTop img{ width:30px; }
.lr_yanzhang{ position:relative; display:flex; align-items: center; }
.lr_yanzhang span{ display:inline-block; width:auto; font-size:14px; background: #00B42A; padding:0px 10px; color:#fff; text-align: center; line-height:30px; border-radius:4px; position: absolute; right:0; cursor: pointer; }
.lr_yanzhang input{ border: none; outline: none; background-color: #F7F8FA; font-size: 16px; margin-right:84px; }
@-webkit-keyframes bounce-down { 25% { -webkit-transform: translateY(-20px); } 50%, 100% { -webkit-transform: translateY(0); } 75% { -webkit-transform: translateY(20px); } }  
@keyframes bounce-down { 25% { transform: translateY(-20px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(20px); } }
.el-image{ position: relative; margin:0 auto; overflow: hidden; }
.el-image img{ width: 100%; height: 100%; }
.el-pager li { padding: 0 4px !important; font-size: 13px !important; min-width: 40px !important; height: 40px !important; line-height: 40px !important; box-sizing: border-box !important; text-align: center !important; border-radius: 50% !important; }
.el-pagination button, .el-pagination span:not([class*=suffix]) { height: 40px !important; line-height: 40px !important; }
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev { min-width: 40px !important; border-radius: 50% !important; }
.el-select{ width:100px; background-color:#fff !important; }
.el-input__inner{ border:none !important; text-align:center; }
.el-select-dropdown__item.selected{ color: #35B257 !important; font-weight: 700; }
.headerbtnav span:hover{ color: #35B257; }
.el-upload--picture-card{ width:40px !important; height:40px !important; line-height:43px !important; }
.el-upload-list--picture-card .el-upload-list__item{ width:40px !important; height:40px !important; margin: 0px 5px !important; }
.lr_usersdd, .lr_urt{ display:flex !important; justify-content:space-between !important; align-items:center !important; background-color: #FFF !important; }
.lr_usersdd{ height:300px !important; }
.lr_urt{ height:100px !important; padding: 0 !important; }
.lr_usersdd div, .lr_urt div{ height:40px; background-color: #00B42A; color: #FFF; text-align: center; line-height:40px; border-radius:6px; cursor: pointer; transition: all 0.5s; }
.lr_usersdd div{ width:140px; }
.lr_urt div{ width:130px; }
.lr_ts{ line-height:40px; margin-top:60px; }
.lr_usersdd div:hover{ transition: all 0.5s; box-shadow:0px 2px 10px #333; transform: scale(1.02); }
#adPopup { position: fixed; bottom: 10px; right: 110px; width: 290px; background-color: #fcf1ec; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 1; transition: opacity 0.5s, transform 0.5s; border-radius: 10px; min-height: 310px; } 
#adPopup h3{ margin:0; font-size:22px; color: #fff; font-weight: 600; }
#adPopup p{ margin:3px 0; line-height: 24px; }
.adtitle{ background-image: url('//img.eriksen.co.th/ad-bg.png?x-oss-process=image/format,webp'); padding: 25px 30px 25px 20px; background-size: 100%; box-sizing: border-box; background-position: 0 0; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#closeBtn { position: absolute; top: 5px; right: 10px; cursor: pointer; }  
#adPopup.hidden { transform: translate(calc(100% - 40px), calc(100% - 40px)); opacity: 0; }  
#showAdIcon { position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none; }  
.popup-btn { display: block; margin-top: 10px; cursor: pointer; width: 140px; height: 36px; border-radius: 20px ; font-size: 14px; border: none; margin: 0 auto; background: linear-gradient(299deg,#ff500e, #ffce8d); color: #fff; }  
.da{ padding: 0; overflow-y: auto; border-radius:8px; margin-bottom: 0px; background-image: url('//img.eriksen.co.th/fw-2.png?x-oss-process=image/format,webp'); background-size: 100% 100%; padding-bottom: 20px; position: absolute; top: 70px; width: 100%; min-height: 230px; }
.adtext{ padding: 20px; position: relative; display: flex; flex-direction: column; row-gap: 10px; color: #666; }
.wuyou-waiter { position: fixed; right: 0px; top: 34%; width: 80px; background-color: #ffffff; box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); z-index: 1000; }
.waiter-ul{ margin:0; padding:0; }
.waiter-ul li { cursor: pointer; text-align: center; border-bottom: 1px solid #f8f8f8; }
.waiter-ul li .iconfont{ font-size: 28px; color: #ff6d05; }
.waiter-ul li a{ display: block; padding:8.5px 0; }
.waiter-title { left: 0px; bottom: 3px; font-size: 14px; max-width: 300px; text-align: center; z-index: 10; }
.waiter-title:before { content: ''; display: block; width: 10px; height: 10px; position: absolute; right: -6px; top: 15px; transform: rotate(45deg); background-color: #fff; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; }
.waiter-ul li:hover .waiter-title { left: -120px; display: block; }
.card-header{ border-color: #f2f2f2; background-color: #ffffff; }
.category-item .iconfont{ cursor: pointer; }
.pagination{ justify-content: center; }
.pagination li a, .pagination li span{ position: relative; padding: 0.5rem 0.75rem; margin-left: -1px; color: #374254; line-height: 1.25; background-color: #fff; border: 1px solid rgba(167, 180, 201, .3); }
.pagination li.disabled{ opacity: 0.4; cursor: not-allowed; }
.pagination li.active span{ color: #fff; background-color: #00b42a; }
.page-item:not(:first-child) .page-link{ margin:0; }
.header-category { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 10px 15px; margin: 35px 0; display: flex; justify-content: space-between; align-items: center; }
.category-tabs { display: flex; gap: 20px; }
.category-tab { padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; font-weight: 500; color: var(--text-color); }
.category-tab:hover { background-color: var(--hover-bg); }
.category-tab.active { border: 1px solid var(--primary-color); }
.category-tab:nth-child(n+2):nth-child(-n+6) { color: var(--text-muted); }
.add-post-btn { display: flex; align-items: center; padding: 10px 15px; border-radius: 6px; background-color: var(--primary-color); color: white; border: none; cursor: pointer; font-weight: 500; }
.add-post-btn:hover { background-color: #218838; }
.filter-area { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.filter-group { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-label { font-size: 0.9rem; font-weight: 600; color: #475569; }
.filter-dropdown { padding: 0.5rem 1rem; border: 1px solid #e2e8f0; border-radius: 6px; background-color: white; color: #334155; font-size: 0.9rem; cursor: pointer; min-width: 150px; transition: border-color 0.2s; }
.filter-dropdown:hover { border-color: #3b82f6; }
.search-box { display: flex; align-items: center; background: white; border: 1px solid #e2e8f0; border-radius: 5px 0 0 5px; padding: 0 0.5rem; flex: 1; max-width: 300px; }
.search-input { border: none; outline: none; flex: 1; font-size: 0.9rem; }
.search-btn { background: #00b42a; color: #fff; padding: 3px 20px; cursor: pointer; border-radius: 0 5px 5px 0; }
.filter-actions { display: flex; gap: 0.5rem; }
.apply-btn { background-color: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.apply-btn:hover { background-color: #2563eb; }
.reset-btn { background-color: #f1f5f9; color: #64748b; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.reset-btn:hover { background-color: #e2e8f0; }
.section-title { font-size: 22px; }
.horizontal-sections { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.forum-section { flex-basis: calc(25% - 15px); background: #f8f9fa; border-radius: 5px; padding: 20px; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.forum-section:hover { transform: translateY(-3px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.section-icon { font-size: 30px; margin-bottom: 10px; }
.section-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; font-size: 14px; }
.stat-item { background: #e9ecef; padding: 5px 10px; border-radius: 4px; }
.stat-value { font-weight: bold; color: #3498db; }
.section-description { font-size: 14px; color: #6c757d; margin-top: 10px; }
.post-list { margin-top: 10px; }
.post-item { display: flex; padding: 12px; border-bottom: 1px solid #eee; transition: background-color 0.2s; cursor: pointer; }
.post-item:hover { background-color: #f8f9fa; }
.post-content { flex: 1; position: relative; display:block; }
.post-content .play-btn { position: absolute; z-index: 2; left: calc(50% - 28px); top: calc(50% - 28px); color: #fff; font-size: 56px; }
.post-content .fa-play { position: absolute; left: calc(50% - 15px); top: calc(50% - 13px); padding: 7px 9.2px; border-radius: 50%; background-color: #fff; }
.post-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; }
.post-meta { display: flex; color: #7f8c8d; font-size: 14px; column-gap: 15px; }
.post-meta span.cate { padding: 0px 10px; background-color: #3B9592; border-radius: 3px; color: #fff; }
.post-meta span.tag { padding: 0px 10px; background-color: #e9ecef; border-radius: 3px; line-height: 20px; }
.post-stats { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 80px; text-align: center; }
.post-stats .count { font-size: 16px; font-weight: bold; }
.post-stats .label { font-size: 11px; color: #7f8c8d; }
.post-container { background: white; border-radius: 8px; overflow: hidden; margin-bottom: 30px; }
.post-footer { padding: 15px 25px; background: #f8f9fa; display: flex; justify-content: space-between; border-top: 1px solid #eee; }
.post-actions button { background: #4a6ee0; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-right: 10px; transition: background 0.3s; }
.post-actions button:hover { background: #3a5ec0; }
.post-detail { margin-bottom: 30px; }
.post-header { padding: 20px 30px; border-bottom: 1px solid #eee; }
.post-body { padding:30px; }
.post-lists{ width: calc(100% - 1070px); padding:20px; background-color: var(--bs-white); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.replies-section { background: white; border-radius: 8px; overflow: hidden; margin-bottom: 30px; }
.replies-header { padding: 20px 25px; border-bottom: 1px solid #eee; font-size: 20px; color: #2c3e50; }
.reply { padding: 25px; border-bottom: 1px solid #eee; transition: background-color 0.3s; }
.reply:hover { background-color: #fafbfc; }
.reply:last-child { border-bottom: none; }
.reply-header { display: flex; align-items: center; margin-bottom: 15px; cursor: pointer; }
.user-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px; flex-shrink: 0; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15); }
.user-info { flex: 1; color: #666; }
.username { font-weight: bold; }
.reply-time { color: #7f8c8d; font-size: 13px; }
.reply-content { line-height: 1.7; margin-bottom: 10px; margin-left: 70px; }
.reply-actions { margin-top: 15px; display: flex; gap: 15px; justify-content: end; }
.reply-actions a { color: #7f8c8d; text-decoration: none; font-size: 14px; transition: color 0.3s; cursor: pointer; }
.reply-actions a.reply-child{ margin-left: 70px; }
.reply-actions a:hover { color: #4a6ee0; }
.nested-replies { margin-top: 20px; margin-left: 55px; }
.nested-reply { padding: 15px; border-bottom: 1px solid #f0f0f0; }
.nested-reply:last-child { border-bottom: none; }
.nested-reply-header { display: flex; align-items: center; margin-bottom: 10px; }
.nested-reply-content { font-size: 14px; line-height: 1.6; margin-left: 70px; }
.reply-form { background: white; border-radius: 8px; padding: 25px; margin-bottom: 30px; }
.nested-reply-form { margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; display: none; }
.form-title { font-size: 20px; margin-bottom: 20px; color: #2c3e50; }
textarea { width: 100%; height: 150px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; font-size: 16px; margin-bottom: 15px; transition: border 0.3s; }
textarea:focus { border-color: #4a6ee0; outline: none; }
.submit-btn { background: #30B55B; color: white; border: none; padding: 7px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background 0.3s; }
.submit-btn:hover { background: #30B55B; }
.expand-btn i { margin-right: 5px; transition: transform 0.3s; }
.nested-replies.collapsed { display: none; }
footer { background: #2c3e50; color: #ecf0f1; padding: 30px 0; text-align: center; }
.footer-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.comments-section { margin-top: 30px; }
.comment { padding: 15px; border-bottom: 1px solid #eee; }
.comment-header { display: flex; justify-content: space-between; }
.comment-author { font-weight: bold; }
.comment-time { color: #7f8c8d; }
.reply-form { margin-top: 20px; padding: 15px; background: #fff; border-radius: 5px; }
.reply-form textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; resize: vertical; }
a.like{ color: #30B55B !important; }
.course-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.course-item { background: #f8f9fa; border-radius: 5px; overflow: hidden; transition: transform 0.3s; cursor: pointer; }
.course-item:hover { transform: translateY(-5px); }
.course-image { height: 150px; background-color: #3498db; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
.course-info { padding: 15px; }
.course-title { font-weight: bold; margin-bottom: 10px; }
.course-meta { display: flex; justify-content: space-between; color: #7f8c8d; font-size: 14px; }
.forum-content { width: 1050px; background-color: var(--bs-white); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 20px; }
.forum-item { column-gap: 25px; padding: 15px 0; border-bottom: 1px solid var(--bs-gray-300); cursor: pointer; transition: all 0.2s; }
.forum-item .item{ display: block; width: calc(100% - 80px); }
.forum-item:last-child { border-bottom: none; }
.forum-item:hover { background-color: var(--bs-secondary-bg-subtle); }
.forum-header { display: flex; align-items: center; flex-direction: column; font-size: 14px; background-color: #00b42a; border-radius: 3px; width: 60px; padding: 5px; }
.participants { padding: 5px 0; font-weight: 600; color: white; }
.participants span { margin-left: 5px; font-size: 12px; }
.forum-title { font-weight: 500; margin: 0; color: var(--text-color); display: inline-block; }
.category-tag { font-size: 12px; color: var(--primary-color); background-color: rgba(40, 167, 69, 0.1); padding: 4px 8px; border-radius: 4px; margin-top: 10px; display: inline; }
.forum-sidebar { width: 300px; }
.sidebar-section { background-color: var(--bs-white); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 20px; }
.sidebar-title { font-size: 16px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bs-primary-bg-subtle); color: var(--text-color); display: flex; align-items: center; }
.sidebar-item { padding: 12px 0; border-bottom: 1px solid var(--bs-gray-200); cursor: pointer; transition: all 0.2s; }
.sidebar-item:last-child { border-bottom: none; }
.sidebar-item:hover { background-color: var(--hover-bg); }
.sidebar-item-title { font-weight: 500; margin-bottom: 5px; color: var(--text-color); }
.sidebar-item-content { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.sidebar-item-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); }
img.avatar{ width: 56px; height: 56px; }
.notification-item { transition: all 0.3s; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15); border:0; }
.notification-item:hover { background-color: #f8f9fa; }
.notification-title { font-weight: 500; font-size: 16px; }
.notification-time { font-size: 0.85rem; color: #6c757d; }
.badge-unread { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background-color: #007bff; }
.notice-header { text-align: center; margin-bottom: 30px; position: relative; }
.notice-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; letter-spacing: 2px; }
.notice-organization { font-size: 18px; font-weight: bold; margin-bottom: 30px; }
.notice-content { line-height: 2; font-size: 16px; text-align: justify; }
.notice-signature { margin-top: 50px; text-align: right; }
.notice-seal { position: absolute; right: 60px; bottom: 40px; font-size: 14px; text-align: center; }
.seal-circle { width: 100px; height: 100px; border: 2px solid #d9534f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; font-weight: bold; }
.notice-footer { margin-top: 30px; font-size: 14px; color: #999; text-align: center; border-top: 1px dashed #ddd; padding-top: 15px; }
.important-text { font-weight: bold; color: #d9534f; }
.indent { text-indent: 2em; }
.purchase-item { margin-bottom: 30px; border: 1px solid #eee; border-radius: 5px; overflow: hidden; transition: all 0.3s ease; }
.purchase-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.purchase-content { padding: 20px; }
.purchase-title { font-size: 1.5rem; margin-bottom: 10px; color: #333; }
.purchase-description { color: #666; margin-bottom: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.purchase-meta { color: #888; font-size: 0.9rem; }
.purchase-img { padding: 20px 10px; }
.tag { display: inline-block; padding: 3px 8px; background: #f8f9fa; border-radius: 3px; font-size: 0.8rem; margin-right: 5px; color: #666; }
.action{ right: -5px; top: -5px; }
.order-status { font-weight: 600; }
.status-pending { color: #fd7e14; }
.status-processing { color: #0d6efd; }
.status-shipped { color: #198754; }
.status-cancelled { color: #dc3545; }
.product-img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
.product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.dropdown-toggle::after { display: none; }
#loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); z-index: 9999; display: none; justify-content: center; align-items: center; }
.loading-content { padding: 30px; border-radius: 10px; text-align: center; }
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; }
.error-toast .toast-header { background-color: #dc3545; color: white; }
.success-toast .toast-header { background-color: #198754 !important; color: white !important; }
.preview-container { margin-top: 15px; }
.image-preview-wrapper { position: relative; display: inline-block; max-width: 200px; max-height: 200px; margin-right: 0.5rem; margin-bottom: 0.5rem; overflow: hidden; }
.remove-image-btn { position: absolute; top: 10px; right: 10px; transform: translate(50%, -50%); width: 1rem; height: 1rem; border-radius: 50%; color: #fff; background-color:#dc3545; border: none; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer; }
.preview-image { max-width: 100%; max-height: 200px; margin-bottom: 10px; border-radius: 5px; }
.file-upload-label { display: block; padding: 10px; border: 2px dashed #dee2e6; border-radius: 5px; text-align: center; cursor: pointer; transition: all 0.3s; }
.file-upload-label:hover { border-color: #0d6efd; background-color: #f8f9fa; }
.file-upload-input { display: none; }
#closeJob{ cursor: pointer; position: relative; z-index: 2; padding: 3px; left: calc(100% - 30px); top: 35px; font-size: 24px; color: #999999; transform: rotate(45deg); display: inline-block; }
.newslist1 div.jobtitle{ display: flex; justify-content: space-between; height: auto; align-items: center; }
.newslist1 div.jobinfo{ display: flex; align-items: flex-end; justify-content: space-between; height: auto; }
.jobfield li{ display: flex; gap: 10px; font-weight: bold; }
.jobfield li span{ display: inline-block; min-width: 150px; }
.auto-pulse-icon { position: fixed; top: 330px; left: 15px; z-index: 9999; animation: auto-bounce 5s infinite; }
.auto-pulse-icon img { width: 200px; }
.table-custom { margin:0; font-size: 14px; table-layout: fixed; border-collapse: collapse; }
.table-custom thead th { border-bottom: 1px solid #EBEEF5; border-top: none; }
.table-custom tbody tr { vertical-align: middle; border-bottom: 1px solid #EBEEF5; }
.table-custom tbody tr:last-child, .table-custom tbody tr:last-child td { border-bottom: none; }
.btn-link { text-decoration: none; padding: 0.25rem 0.5rem; margin-right: 0.5rem; }
.btn-link-primary { color: #0d6efd; }
.btn-link-primary:hover { color: #0a58ca; }
.btn-link-secondary { color: #6c757d; }
.btn-link-secondary:hover { color: #565e64; }
.btn-link-danger { color: #dc3545; }
.btn-link-danger:hover { color: #b02a37; }
.swiper-container{ padding:40px 0; }
.swiper-1{ padding:0; }
.layout_1 { flex: 1; gap: 10px; }
.layout_2 { gap: 5px; }
.layout_3 { gap: 7.5px; }
.layout_4 { align-items: center; gap: 20.84px; }
.layout_1 .item { width: 100%; }
.layout_2 .item { width: 545px; }
.layout_3 .item { width: 350px; }
.layout_4 .item { width: 220px; }
.imgText .item { display: flex; flex-direction: column; }
.imgText .item.left { flex-direction: row; column-gap: 10px; }
.imgText .item.right { flex-direction: row-reverse; column-gap: 10px; }
.model_0 {display:flex; flex-direction: column}
.model_1 {display:flex; flex-direction: column-reverse;}
.model_2, .model_3, .model_4 { position: relative; display: flex; justify-content: center; }
.model_0 .imgcontent { position: static; padding:10px; }
.model_1 .imgcontent { position: static; padding:10px;}
.model_2 .imgcontent { position: absolute; padding:10px; width:100%; top: 0; left: 0; }
.model_3 .imgcontent { position: absolute; padding:10px; width:100%; top: 0; left: 0; min-height: 100%; }
.model_3.left .imgcontent { position: absolute; padding:10px; width:100%; top: 0; left: 0; height: 100%; }
.model_3.right .imgcontent { position: absolute; padding:10px; width:100%; top: 0; left: auto; right:0; height: 100%; }
.model_4 .imgcontent { position: absolute; padding:10px; width:100%; bottom: 0; left: 0; }
.adtext { display: flex; flex-direction: column; gap: 10px;}
.adtext a { display: flex; align-items: center; justify-content: space-between; padding: 5px 20px; background-color: #FF9800; color: #FFFFFF; border-radius: 20px; text-decoration: none; transition: background-color 0.3s; }
.adtext a:hover { background-color: #FF7B00; transform: scale(1.05); }
.adtext p { font-size: 16px; font-weight: bold; margin: 0; }
.adtext a::after { content: "\2192"; font-size: 16px; font-weight: bold; margin-left: 10px; }
@keyframes auto-bounce { 0%, 10%, 20%, 50%, 80%, 100% { transform: translateY(0); } 5%, 15%, 40% { transform: translateY(-8px); } }
.success-toast .btn-close { filter: invert(1) brightness(100%) !important; }

/* --- 语言切换组件全局基础设置 --- */
.mobile-lang { display: none; }
.pc-lang { display: block; }


@media (max-width: 1800px) and (min-width: 1025px) {
	.header { padding: 0 5%; }
	.heaverTop_so { flex: 1; min-width: 0; width: auto; max-width: 550px; }
	.heaverTop_so input { width: auto; }
	.heaverTop_right { width: auto; flex-shrink: 0; gap: 15px; }
	.Merlist1 { min-height: 260px; }
	.el-input__inner{ width:90px !important; }
	.heaverTop_so>div>img { position: absolute; left: 68px; width: 16px; }
	.heaverTop_so select { padding-left: 10px; }
	.headerbt { column-gap: 40px; }
	.headerbtnav span { font-size: 16px; }
}


@media (max-width: 1024px) {
    .header { padding: 0 3%; }
    .heaverTop { flex-wrap: wrap; gap: 10px; padding: 15px 0; }
    .heaverTop_logo { flex-shrink: 0; }
    .heaverTop_logo img { width: 120px; height: 48px; }
    .heaverTop_so { flex: 1; min-width: 200px; width: auto; max-width: 100%; order: 3; }
    .heaverTop_so input { width: auto; }
    .heaverTop_right { width: auto; flex-shrink: 0; gap: 12px; }
    .heaverTop_right figure figcaption { display: none; }
    .heaverTop_right figure .iconfont { font-size: 20px; }
    .headerbt { column-gap: 20px; height: auto; min-height: 50px; }
    .headerbtnav span { font-size: 14px; }
    .main-content { flex-direction: column; }
    .forum-sidebar { width: 100%; }
    .forum-content { width: 100%; }
}


/* --- 移动端 / 平板端适配 --- */
@media (max-width: 991px) {

    .header { position: sticky; top: 0; padding: 0; background: #fff; z-index: 1040; }
    .pc-lang { display: none !important; }
    .hamburger { 
        display: flex !important; 
        position: absolute !important; 
        right: 0px !important; 
        top: 28% !important; 
        transform: translateY(-50%) !important; 
        z-index: 1060; 
        margin: 0 !important;
    }
    .hamburger span{background:#000}
    .hamburger.active span:nth-child(1) { background-color: #333; }
    .hamburger.active span:nth-child(3) { background-color: #333; }
    #main{padding-top: 110px;}
    .heaverTop { 
        display: flex !important;
        flex-wrap: wrap !important; 
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 15px !important; 
        width: 100%;
        box-sizing: border-box;
        border: none;
        gap: 0 !important;
    }
    
    .heaverTop_logo { flex: 0 0 auto; }
    .heaverTop_logo img { width: 100px; height: auto; object-fit: contain; }

    /* 搜索栏 */
    .heaverTop_so {
        display: flex !important;
        flex: 1 1 100% !important;
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        margin-top: 8px !important;
        padding: 2px !important;
        background: #F7F8FA;
        border-radius: 6px !important;
        box-sizing: border-box;
    }
    .heaverTop_so > form { width: 100%; display: flex; align-items: center; }
    .heaverTop_so select {
        width: 78px !important;
        height: 38px !important;
        min-width: 78px;
        font-size: 12px;
        padding: 0 4px !important;
        padding-right: 14px !important;
        border: 1px solid #00446a !important;
        border-right: 0 !important;
        border-top-left-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
        background: #fff;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 2l3 3 3-3' stroke='%2300446a' fill='none' stroke-width='1.2'/></svg>");
        background-repeat: no-repeat;
        background-position: right 6px center;
        background-size: 8px;
    }
    .heaverTop_so > form:after { left: 82px !important; }
    .heaverTop_input {
        flex: 1;
        height: 38px !important;
        font-size: 12px;
        padding-left: 12px !important;
        border-top: 1px solid #00446a !important;
        border-bottom: 1px solid #00446a !important;
        min-width: 0;
    }
    .heaverTop_so .submit {
        width: 56px !important;
        height: 38px !important;
        line-height: 38px;
        font-size: 14px;
        flex: 0 0 56px;
    }

    /* 图标和移动端语言切换移到抽屉内 */
    .heaverTop_right { 
        display: none !important; 
    }
    .heaverTop_right figure { margin: 0; }
    .heaverTop_right figure .iconfont { font-size: 18px; color: #333; }
    .heaverTop_right figure figcaption { display: none !important; }

    .mobile-lang { 
        display: block !important; 
        flex: 0 0 auto !important; 
        white-space: nowrap !important;
    }
    
    /* --------- 侧边栏 --------- */
    .mobile-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 1050; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .mobile-overlay.active { opacity: 1; visibility: visible; }
    .headerbt.mobile-nav { display: block !important; position: fixed; top: 0; right: -100%; width: 85%; max-width: 340px;  background-color: #ffffff; z-index: 1055; padding: 0; margin: 0; overflow-y: auto; overflow-x: hidden; transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: -10px 0 30px rgba(0,0,0,0.1); border: none; }
    .headerbt.mobile-nav.active { right: 0; }
    .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; background-color: #fafbfc; position: sticky; top: 0; z-index: 10; }
    .drawer-title { font-size: 18px; font-weight: 700; color: #333; letter-spacing: 0.5px; }
    .drawer-close { background: none; border: none; font-size: 28px; line-height: 1; color: #888; cursor: pointer; padding: 0; }
    .mobile-nav-inner { display: flex; flex-direction: column; width: 100%; padding: 10px 0; }
    .headerbtnav { width: 100%; }
    .headerbtnav ul { flex-direction: column !important; width: 100%; gap: 0 !important; }
    .headerbtnav ul li { width: 100%; margin: 0; border-bottom: 1px solid #f6f6f6; }
    .headerbtnav ul li:last-child { border-bottom: none; }
    .headerbtnav span, .headerbtnav a { display: block; width: 100%; padding: 8px 20px; font-size: 13px; font-weight: 500; color: #333; text-decoration: none; box-sizing: border-box; transition: all 0.2s; }
    /*.headerbtnav .active span, .headerbtnav .active a { color: #00B42A; font-weight: bold; background-color: #f2fcf5; border-left: 4px solid #00B42A; padding-left: 20px; }*/
    .headerbtnav .active::after { display: none !important; }
    .mobile-divider { width: 100%; height: 8px; background-color: #f5f7fa; margin: 15px 0; }
    .lang-wrap { padding: 10px 24px; }
    .language-selector { margin: 0; }
    .language-btn{
        font-size: 12px;
        padding: 5px !important;
    }

    /* ===== 抽屉顶部===== */
    .drawer-quick {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 16px 12px 18px;
        border-bottom: 1px solid #f0f0f0;
        background: #fafbfc;
        box-sizing: border-box;
    }
    .drawer-quick a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #333;
        padding: 6px 2px;
        border-radius: 6px;
        transition: background 0.2s, color 0.2s;
        min-width: 0;
    }
    .drawer-quick a:hover, .drawer-quick a:active {
        background: #f2fcf5;
        color: #00B42A;
    }
    .drawer-quick .iconfont {
        font-size: 20px;
        line-height: 1;
        margin-bottom: 4px;
    }
    .drawer-quick span.lbl {
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* ===== 抽屉内语言切换区 ===== */
    .drawer-lang-mobile {
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }
    .drawer-lang-mobile .pc-language-wrapper { display: none !important; }
    .drawer-lang-mobile .mob-language-wrapper { display: inline-block !important; }
    #adPopup{right: 0;}
}

@media (min-width: 992px) {
    .drawer-header, .mobile-overlay, .mobile-divider,
    .drawer-quick, .drawer-lang-mobile { display: none !important; }


}

/* ===== 科学与教程详情页响应式===== */

.post-body img,
.post-body video,
.post-body iframe{
    max-width: 100%;
    height: auto !important;
    width: 100% !important;
}


@media (max-width: 995.98px) {

    .forum-content.float-start,
    .post-lists.float-end{
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .forum-content{
        padding: 14px;
    }
    .post-lists{
        margin-top: 16px;
        padding: 16px;
    }
    /* 帖子容器 */
    .post-container{
        margin-bottom: 20px;
    }
    .post-header{
        padding: 16px 20px;
    }
    .post-title.fs-3{
        font-size: 1.25rem !important;
        line-height: 1.4;
        margin-bottom: 12px !important;
    }
    .post-meta{
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 12px !important;
        font-size: 12px;
    }
    .post-body{
        padding: 18px 20px;
    }
    .post-body *{
        word-break: break-word;
    }
    .post-footer{
        padding: 12px 20px;
    }
    .post-actions{
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 12px !important;
    }
    /* 评论表单 */
    .reply-form{
        padding: 18px 20px;
    }
    .form-title{
        font-size: 18px;
        margin-bottom: 14px;
    }
    /* 评论列表 */
    .replies-header{
        font-size: 17px;
        padding: 14px 20px;
    }
    .reply{
        padding: 16px 20px;
    }
    .user-avatar{
        width: 44px;
        height: 44px;
        margin-right: 10px;
    }
    img.avatar{
        width: 44px;
        height: 44px;
    }
    .reply-content{
        margin-left: 54px;
    }
    .reply-actions{
        margin-left: 54px;
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 14px;
    }
    .reply-actions a.reply-child{
        margin-left: 0;
    }

    .nested-replies{
        margin-left: 24px;
    }
    .nested-reply-content{
        margin-left: 54px;
    }
  
    .post-item{
        padding: 10px 8px;
    }

    .post-title{
        font-size: 15px;
    }
    .post-meta{
        font-size: 12px;
        column-gap: 10px !important;
    }
    .post-stats{
        min-width: 60px;
    }
    .post-stats .count{
        font-size: 14px;
    }
    .post-stats .label{
        font-size: 10px;
    }
}


@media (max-width: 768px) {
    .course-lessons{height:auto}
    .video-player{height:auto;flex-wrap: wrap;}
    .post-header{
        padding: 12px 14px;
    }
    .post-title.fs-3{
        font-size: 1.1rem !important;
    }
    .post-body{
        padding: 14px;
    }
    .post-body p,
    .post-body div,
    .post-body span{
        font-size: 14px !important;
        line-height: 1.7;
    }
    .post-body p{
        margin: 0 0 10px 0;
    }
    .post-body table{
        max-width: 100% !important;
        width: auto !important;
        display: block;
        overflow-x: auto;
    }
    .post-footer{
        padding: 10px 14px;
    }
    .post-actions{
        column-gap: 14px !important;
    }
    .post-actions a{
        font-size: 13px;
    }
    /* 评论表单 */
    .reply-form{
        padding: 14px;
    }
    .form-title{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        padding: 10px;
    }
    .submit-btn{
        font-size: 14px;
        padding: 6px 16px;
    }
    /* 评论列表 */
    .replies-header{
        font-size: 15px;
        padding: 12px 14px;
    }
    .reply{
        padding: 12px 14px;
    }
    .user-avatar{
        width: 36px;
        height: 36px;
        margin-right: 8px;
    }
    img.avatar{
        width: 36px;
        height: 36px;
    }
    .username{
        font-size: 13px;
    }
    .reply-time{
        font-size: 11px;
    }
    .reply-content{
        margin-left: 0;
        font-size: 14px;
        line-height: 1.6;
    }
    .reply-actions{
        margin-left: 0;
        column-gap: 12px;
        font-size: 12px;
    }
    .reply-actions a{
        font-size: 12px;
    }
 
    .nested-replies{
        margin-left: 0;
        margin-top: 12px;
        padding-left: 10px;
        border-left: 2px solid #f0f0f0;
    }
    .nested-reply{
        padding: 10px 0;
    }
    .nested-reply-header{
        margin-bottom: 6px;
    }
    .nested-reply-content{
        margin-left: 0;
        font-size: 13px;
    }
  
    .post-lists{
        padding: 12px;
    }
    .post-item{
        padding: 8px 6px;
    }
 
    .post-title{
        font-size: 14px;
    }
    .post-stats{
        min-width: 50px;
    }
    .post-stats .count{
        font-size: 13px;
    }
}


@media (max-width: 480px) {
    .course-lessons{height:auto}
    .video-player{height:auto;flex-wrap: wrap;}
    .post-title.fs-3{
        font-size: 1rem !important;
    }
    .post-meta{
        font-size: 11px;
        column-gap: 8px !important;
    }
    .post-body{
        padding: 12px;
    }
    .post-body p,
    .post-body div,
    .post-body span{
        font-size: 13px !important;
    }
    .form-title{
        font-size: 15px;
    }
    .replies-header{
        font-size: 14px;
    }
    .reply-content{
        font-size: 13px;
    }
    .nested-reply-content{
        font-size: 12px;
    }
    .post-title{
        font-size: 13px;
    }
    .post-stats{
        min-width: 44px;
    }
    .post-stats .count{
        font-size: 12px;
    }
    .post-stats .label{
        font-size: 9px;
    }
}