body{background:linear-gradient(135deg,#e4e7ea 0%,#f5f5f5 100%);min-height:100vh}
.page-container{max-width:1228px;margin:0 auto;background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,0.1);position:relative;z-index:1}
.search-section {padding:35px 0 0 0;background:#e9ecef;position:relative;overflow:hidden;width:100%;z-index:999;}
.category-selector:hover .category-dropdown {display:block;}
.stat-item {text-align:center;padding:20px;}
.stat-number {display:block;font-size:32px;font-weight:800;color:#fff;margin-bottom:8px;text-shadow:0 2px 10px rgba(0, 0, 0, 0.1);}
.label {display:block;font-weight:600;}
.stat-label {display:block;font-size:14px;color:rgba(255, 255, 255, 0.85);font-weight:500;}
.search-box {border-radius:9px;padding:5px;position:relative;z-index:1;}
.tab-item {padding-bottom:5px;font-size:20px;color:#999;cursor:pointer;position:relative;transition:all 0.3s ease;}
.tab-item:hover {color:#666;}
.tab-item.active {color:#00b38a;}
.tab-item.active::after {content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:linear-gradient(90deg, #00b38a, #00d4a4);border-radius:2px;}
.search-input-group {display:flex;gap:10px;border-radius:8px;margin-bottom:10px;border:1px solid #3E9EFE;}
.input-item {position:relative;}
.input-item.category-selector {width:180px;}
.input-item {flex:1;}
.input-item input {width:102%;height:50px;padding:0 0 0 20px;border:2px solid #e8e8e8;border-radius:5px;font-size:16px;outline:none;transition:all 0.3s ease;background-color:#fafafa;}
.input-item input:focus {border-color:#00b38a;background-color:#fff;box-shadow:0 0 0 4px rgba(0, 179, 138, 0.1);}
.input-item input::placeholder {color:#bbb;}
.btn-search {max-width:900px;padding:0 35px;height:50px;background:linear-gradient(135deg, #3E9EFE 0%, #06F 100%);color:#fff;border:none;border-radius:8px;font-size:21px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0, 179, 138, 0.3);}
.btn-search:hover {transform:translateY(-2px);box-shadow:0 8px 25px rgba(0, 179, 138, 0.4);}
.btn-search:active {transform:translateY(0);}

.js-list{padding:40px 0;background-color:#fff}
.js-container{max-width:1248px;margin:0 auto;padding:0 20px;display:flex;gap:30px}
.js-main{flex:1}
.js-sidebar{width:300px}
.search-filter{background-color:#f9f9f9;border-radius:12px;padding: 0 20px;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.filter-title{font-size:16px;font-weight:600;color:#333;margin-bottom:15px;padding-left:10px;border-left:4px solid #00b38a}
.filter-group{margin-bottom:20px}
.filter-group label{display:block;font-size:14px;font-weight:500;color:#333;margin-bottom:10px}
.filter-options{display:flex;flex-wrap:wrap;gap:10px}
.filter-option{padding:6px 15px;background-color:#fff;border:1px solid #e8e8e8;border-radius:5px;font-size:13px;color:#666;cursor:pointer;transition:all 0.3s ease}
.filter-option:hover{border-color:#00b38a;color:#00b38a}
.filter-option.active{background-color:#3E9EFE;color:#fff;border-color:#3E9EFE}
.js-header{background-color:#f9f9f9;border-radius:5px;padding:20px;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.js-header h1{font-size:24px;font-weight:700;color:#333;margin-bottom:10px}
.js-header p{font-size:14px;color:#666}
.js-header span{font-size:21px;color:#F63;font-weight:700;}

.j-list{background-color:#f9f9f9;border-radius:5px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.j-item{background-color:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:20px;margin-bottom:15px;transition:all 0.3s ease}
.j-item:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.1);border-color:#3E9EFE;}
.j-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.j-title{font-size:18px;font-weight:600;color:#333;transition:color 0.3s ease}
.j-item:hover .j-title{color:#00b38a}
.j-salary{font-size:16px;font-weight:700;color:#fa5151}
.j-item-meta{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px;font-size:14px;color:#666}
.j-item-c{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.c-logo-small{width:40px;height:40px;background:linear-gradient(135deg,#fd9810 0%,#F63 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.c-logo-small img{width:40px;height:40px;background:linear-gradient(135deg,#fd9810 0%,#F63 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.c-info-small{flex:1}
.c-name-small{font-size:14px;font-weight:500;color:#333;margin-bottom:3px}
.c-tags-small{display:flex;flex-wrap:wrap;gap:5px}
.c-tag-small{padding:2px 8px;background-color:#f0f7f5;border-radius:4px;font-size:12px;color:#2b312f}
.j-item-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid #f0f0f0;font-size:13px;color:#999}
.j-apply{padding:6px 15px;background-color:#fd9810;color:#fff;border:none;border-radius:5px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.3s ease; margin-right:-200px;}
.j-apply:hover{background-color:#F63;transform:translateY(-2px);color:#fff}
.pagination{display:flex;justify-content:center;gap:10px;margin-top:30px}
.page-btn{padding:8px 15px;background-color:#fff;border:1px solid #e8e8e8;border-radius:6px;font-size:14px;color:#333;cursor:pointer;transition:all 0.3s ease}
.page-btn:hover:not(:disabled){background-color:#3E9EFE;color:#fff;border-color:#00b38a}
.page-btn.active{background-color:#3E9EFE;color:#fff;border-color:#3E9EFE}
.page-btn:disabled{opacity:0.7;cursor:not-allowed}
.c-nav{display:flex;gap:10px;margin-bottom:20px}
.nav-btn{padding:8px 10px;background-color:#f9f9f9;border:1px solid #e8e8e8;border-radius:6px;font-size:14px;color:#333;cursor:pointer;transition:all 0.3s ease;text-decoration:none}
.nav-btn:hover{background-color:#f0f0f0;border-color:#00b38a;color:#00b38a}
.nav-btn.active{background-color:#3E9EFE;color:#fff;border-color:#00b38a}
.aclink{display:inline-block;padding:6px 15px;background:linear-gradient(135deg,#3E9EFE 0%,#06F 100%);color:#FFF;text-decoration:none;border-radius:6px;font-size:13px;font-weight:500;transition:all 0.3s ease;cursor:pointer}
.aclink:hover{background-color:#3E9EFE;border-color:#00b38a;color:#fff}
.c-container{max-width:1228px;width:100%;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.1);overflow:hidden; margin-top:55px;}
.c-header{background:linear-gradient(135deg,#06F 0%,#3E9EFE 100%);color:#fff;padding:10px 40px;display:flex;align-items:center;gap:30px}
.clogo{width:120px;height:120px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:38px;color:#00b38a}
.clogo img{width:120px;height:120px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:600;color:#00b38a;}
.cinfo{flex:1}
.cname{font-size:28px;font-weight:600;margin:0 0 10px}
.cname span{font-size:28px;font-weight:600;margin:0 0 10px; color:#F63;}
.c-meta{display:flex;gap:20px;margin-bottom:15px;font-size:14px;opacity:0.9}
.c-tags{display:flex;gap:10px;flex-wrap:wra;}
.c-tags span{margin-bottom: 15px;}
.c-tag{padding:6px 12px;background:rgba(255,255,255,0.2);border-radius:10px;font-size:12px;}
.nav-btn { padding: 10px 15px; margin-left:5px;}
#app{padding: 0px;}.js-list { padding:25px;}
.j-list{ padding: 0px 20px;}
.js-header{margin-bottom: 0px;}
.js-container {padding: 0px;}
@media (max-width:768px){
.c-container{margin:65px 5px 10px 5px}
.js-list{padding:20px 10px 10px 10px;}
.j-list{padding: 0px;}
.j-item{padding: 10px;}
.nav-btn{ padding: 8px;}
.container{padding: 0 5px;}
.logo{padding: 0px;}
.c-header{ flex-direction: column; text-align: center;padding: 10px;gap:10px}
.js-container{flex-direction:column}
.js-sidebar{width:100%}
}