*{box-sizing:border-box}body{margin:0;background:#edf3f8;color:#19394f;font:14px/1.65 'Segoe UI',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}[hidden]{display:none!important}.top{background:white;border-bottom:1px solid #dbe5ed}.top>div{max-width:1240px;margin:auto;padding:15px 24px;display:flex;justify-content:space-between;align-items:center}.brand{font:bold 25px Georgia,serif;color:#245c80}.brand small{font:10px Arial,sans-serif;letter-spacing:3px;color:#8aa1b1;margin-left:8px}nav a{font-size:12px;color:#52758d;margin-left:22px}main{max-width:1240px;margin:auto;padding:26px 24px}.banner{position:relative;padding:34px 38px;overflow:hidden;border-radius:14px;border:1px solid #a59466;border-top:3px solid #d4b36a;background:#102d46 url('banner.jpg') center/cover no-repeat;box-shadow:0 12px 28px rgba(16,43,63,.17)}.banner:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(9,30,48,.97),rgba(10,35,55,.85) 55%,rgba(10,28,41,.25))}.banner>*{position:relative}.eyebrow{display:inline-block;font-size:10px;color:#e9cc89;letter-spacing:2px;padding:5px 12px;border:1px solid #7e795c;border-radius:4px}.banner h1{font:bold 42px/1.2 Georgia,'Times New Roman',serif;color:#ffebba;margin:18px 0;text-shadow:0 2px 8px #091c29}.banner-tags{display:flex;flex-wrap:wrap}.banner-tags span{font-size:12px;color:#d7e5ee;border:1px solid #496175;border-radius:5px;padding:6px 12px;margin-right:12px;background:rgba(18,44,63,.7)}.controls{background:#fff;border:1px solid #dce6ee;border-radius:11px;padding:20px;margin:24px 0}.search-row{display:flex;align-items:flex-end}.search-row label{display:block;font-size:11px;font-weight:600;color:#637e91;flex:1;margin-right:16px}.search-row label:first-child{flex:3}input,select{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid #cadbe6;border-radius:6px;color:#224b67;background:#f9fcfe;min-height:43px}.search-row button{border:1px solid #cbdce6;color:#496e87;background:#fff;padding:10px 16px;border-radius:6px;min-height:43px;cursor:pointer}.quality-filters{display:flex;flex-wrap:wrap;margin-top:16px}.quality-filter{border:1px solid #d5e2eb;background:#f7fafc;color:#536f84;padding:7px 13px;border-radius:20px;margin:0 8px 5px 0;font-size:11px;cursor:pointer}.quality-filter.active{background:#185f89;border-color:#185f89;color:#fff}.cards{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 -8px}.hero-card{background:#fff;width:calc(33.333% - 16px);margin:0 8px 16px;border:1px solid #d9e4ec;border-top:3px solid #e8a548;border-radius:10px;overflow:hidden}.card-head{display:flex;padding:18px 18px 14px;align-items:center;background:#fcfdfe;border-bottom:1px solid #eef2f6}.portrait-wrap{width:84px;flex-shrink:0;margin-right:14px}.portrait-wrap img{display:block;width:82px;height:82px;object-fit:contain;background:#0c1b29;border:1px solid #b2c9da;border-radius:6px}.identity{min-width:0}.identity h2{font-size:17px;line-height:1.4;margin:6px 0 0;color:#274c65}.quality{font-size:10px;background:#fff3d9;border:1px solid #edce8e;color:#8a5915;border-radius:4px;padding:3px 8px}.source-tag{font-size:9px;color:#8ba0af}.image-note{font-size:9px;color:#8b9daa;display:block}.skill{padding:15px 18px 20px}.skill-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#849bab}.skill h3{font-size:14px;color:#1b658e;margin:4px 0 10px}.skill p{font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;color:#4b6579;margin:0}.hero-card.q8{border-top-color:#e7962f}.hero-card.q9{border-top-color:#cc732d}.hero-card.q10{border-top-color:#e198b6}.hero-card.q11{border-top-color:#c05b9e}.hero-card.q12{border-top-color:#9c66c3}.q8 .quality{background:#fff0db;color:#a36517}.q9 .quality{background:#f6e7dc;color:#9b5a2b}.q10 .quality{background:#fbeef5;color:#b66b90}.q11 .quality{background:#f9e8f4;color:#a54687}.q12 .quality{background:#f1e9fb;color:#8753aa}footer{text-align:center;padding:16px;color:#879dab;font-size:11px}#empty{text-align:center;padding:35px;background:white;border:1px dashed #c4d7e4;border-radius:10px}button:focus,a:focus,input:focus,select:focus{outline:2px solid #3597c7;outline-offset:2px}@media(max-width:1000px){.hero-card{width:calc(50% - 16px)}}@media(max-width:620px){main{padding:16px 12px}.top>div{padding:13px 16px}.brand{font-size:21px}.brand small{display:none}nav a{margin-left:12px}.banner{padding:25px 23px}.banner h1{font-size:30px}.banner-tags span{font-size:10px;margin-bottom:8px}.search-row{flex-wrap:wrap}.search-row label:first-child{flex-basis:100%;margin:0 0 12px}.search-row label{margin-right:10px}.hero-card{width:calc(100% - 16px)}.controls{padding:16px}.identity h2{font-size:18px}.skill p{font-size:13px}}

.recruit-info{padding:13px 18px 15px;border-bottom:1px solid #edf2f6;background:#f7fafc}.recruit-info>div{display:flex;justify-content:space-between;align-items:center;font-size:11px}.recruit-info>div>span{color:#7a93a5}.recruit-info strong{color:#436a84;font-weight:600;text-align:right}.recruit-info h4{font-size:10px;color:#7792a6;margin:9px 0 3px;font-weight:600}.recruit-info p{font-size:11px;color:#546f83;line-height:1.7;white-space:pre-wrap;margin:0}.group-tabs{display:flex;border-top:1px solid #e8eff4;margin-top:12px;padding-top:14px}.group-tabs button{border:1px solid #cedee9;border-radius:6px;background:#fff;color:#53758d;font-size:12px;padding:8px 18px;margin-right:10px;cursor:pointer}.group-tabs button.active{background:#164b6b;color:#ffdfa1;border-color:#164b6b}.source-tag{display:block;margin-top:7px}.hero-card.q14,.hero-card.q15,.hero-card.q16,.hero-card.q17{border-top-color:#ccad6a}

.identity{flex:1}.identity-badges{display:flex;justify-content:space-between;align-items:center;gap:6px}.identity-badges .quality{white-space:nowrap}.country{display:inline-block;font-size:11px;font-weight:700;line-height:1.6;padding:3px 7px;text-align:right;white-space:nowrap;border-radius:4px}.country-1{color:#24854a;background:#eaf7ed}.country-2{color:#be6b15;background:#fff2e1}.country-3{color:#277eae;background:#e8f4fc}.country-0{color:#8753aa;background:#f4ecfb}.country-unknown{color:#8b98a1;background:#f0f3f5}.recruit-info{padding:10px 18px 12px}.recruit-info h4{margin:0 0 3px}.recruit-info p{font-size:12px;color:#365f7a}


/* === NGỌA LONG ONLINE · giao diện đồng bộ trang chủ Full Width === */
:root{--blue:#197ab9;--ink:#0c2942;--line:#b6d5e9;--panel:#f1f8fd;--gold:#d6a044}
html{width:100%;scroll-behavior:smooth}
body{
  min-height:100vh; color:#0c2942;
  font:14px/1.6 Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#2e86d0 0%,#77b8e6 39%,#c9e0ed 88%);
  background-attachment:fixed;
}
.top{background:transparent;border:0}
.top>div{max-width:none;width:100%;padding:clamp(16px,2vw,34px) clamp(16px,2.2vw,40px) 10px;gap:20px;flex-wrap:wrap}
.top .brand{
  color:#fff;font:bold 32px/1 Georgia,'Times New Roman',serif;text-shadow:1px 3px 3px #235479;
}
.top .brand small{
  color:#fff;display:block;letter-spacing:6px;
  margin-left:38px;margin-top:3px;font:bold 11px/1.3 Arial,Helvetica,sans-serif;
}
.top nav{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.top nav a{display:inline-flex;align-items:center;justify-content:center;min-height:41px;margin:0;padding:10px 16px;border-radius:8px;border:1px solid #bfddf0;background:rgba(247,251,255,.97);box-shadow:0 3px 8px #285d8036;color:#1b628f;font-size:12px;font-weight:700;transition:background .2s,transform .2s,box-shadow .2s}
.top nav a:hover{background:#d9effc;transform:translateY(-1px);box-shadow:0 5px 12px #285d8044}
.top nav a.nav-current{background:#ffe9b3;border-color:#d3a046;color:#80500d}
main{width:100%;max-width:none;margin:0;padding:12px clamp(16px,2.2vw,40px) 30px}
.banner{
  border:1px solid rgba(255,255,255,.85);border-top:3px solid #e3ba72;
  border-radius:12px;padding:27px clamp(18px,2.2vw,35px);min-height:188px;
  background:#143a5c url('banner.jpg') center 42% /cover no-repeat;
  box-shadow:0 6px 16px #31678a46;
}
.banner:before{background:linear-gradient(90deg,rgba(13,52,83,.95),rgba(14,67,107,.83) 60%,rgba(29,108,161,.3))}
.eyebrow{font:700 11px Arial,Helvetica,sans-serif;letter-spacing:1px;color:#ffe2a4;background:#1b5c8c85;border-color:#b49662}
.banner h1{font:700 clamp(24px,2.2vw,37px)/1.25 Georgia,'Times New Roman',serif;color:#fff;margin:15px 0 17px;text-shadow:0 2px 5px #09213d}
.banner-tags span{border-color:#a4cde3;background:rgba(245,251,255,.13);color:#f1f9ff;font-weight:600}
.controls{background:rgba(247,251,255,.97);border:1px solid #d1e4f2;border-radius:11px;padding:19px clamp(16px,1.5vw,26px);margin:16px 0;box-shadow:0 6px 12px #31678a39}
.controls-titlebar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;border-bottom:1px solid #dcebf5;padding:0 0 13px;margin:0 0 15px}
.controls-titlebar h2{margin:0;font-size:18px;color:#174d72}
.results-summary{font-size:12px;color:#4c7796;background:#e7f3fc;padding:5px 12px;border:1px solid #c7e1f2;border-radius:30px}
.results-summary strong{color:#125e92}
.search-row label{font-size:12px;color:#376681;margin-right:12px}
.search-row input,.search-row select{background:#fff;border-color:#b6d5e9;min-height:44px;border-radius:7px;color:#17456a}
.search-row button{color:#1d6597;background:#e8f5fc;border:1px solid #accfe6;border-radius:7px;font-weight:700;transition:background .2s}
.search-row button:hover{background:#d3ecfc}
.group-tabs{margin-top:13px;border-top:1px solid #dcebf5;padding-top:14px;gap:8px}
.group-tabs button{margin:0;background:#f1f8fd;border:1px solid #c8e1ee;color:#245e88;border-radius:7px;transition:background .2s,transform .2s;font-weight:700}
.group-tabs button:hover{background:#e2f2fd;transform:translateY(-1px)}
.group-tabs button.active{background:#d68b17;color:#fff;border-color:#cc8617}
.quality-filters{margin-top:13px;gap:7px}
.quality-filter{margin:0;min-height:33px;padding:6px 13px;font-size:11px;color:#456c87;border:1px solid #d2e4f1;background:#eaf5fc;font-weight:700;transition:background .2s,transform .2s}
.quality-filter:hover{background:#dbeefd;transform:translateY(-1px)}
.quality-filter.active{background:#1d7ebc;border-color:#1d7ebc;color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:15px;margin:0}
.hero-card{
 width:auto;margin:0;border:1px solid #d4e7f6;border-top:3px solid #e8a548;
 border-radius:11px;background:rgba(247,251,255,.98);
 box-shadow:0 4px 10px #31678a29;transition:box-shadow .22s,transform .22s,border-color .22s;
}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px #31678a45;border-color:#a5d4ed}
.card-head{padding:16px 17px 13px;background:linear-gradient(110deg,#fff,#edf8fe);border-bottom:1px solid #dcebf5}
.portrait-wrap{width:91px;margin-right:13px}
.portrait-wrap img{width:88px;height:88px;border:2px solid #c1deef;background:#164263;border-radius:7px}
.identity h2{color:#123f60;font-size:17px}
.recruit-info{background:#f2f8fc;border-bottom:1px solid #e0eef7;padding:11px 17px}
.recruit-info h4{color:#517d99;font-size:10px}
.recruit-info p{color:#365f7a;font-size:12px}
.skill{padding:14px 17px 18px}
.skill-label{color:#7195ac}
.skill h3{color:#197ab9;font-size:14px}
.skill p{font-size:12px;color:#395e77;line-height:1.75}
#empty{background:#f5fbff;border-color:#b9d9ef;color:#466f8b}
footer{padding:27px 0 6px;color:#426e8c;text-align:left;font-size:11px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0bb61;outline-offset:2px}
@media (min-width:1650px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1020px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:650px){
 .top>div{padding:16px 12px 5px}.top .brand{font-size:28px}.top .brand small{margin-left:34px}
 .top nav{gap:6px}.top nav a{padding:9px 10px;min-height:38px}
 main{padding:10px 12px 24px}.banner{padding:21px 18px;min-height:158px}.banner h1{font-size:27px}
 .controls{padding:15px}.controls-titlebar h2{font-size:16px}.search-row{gap:10px}
 .search-row label,.search-row label:first-child{margin:0;flex:1 1 100%}
 .search-row label:nth-child(2){flex:1 1 calc(100% - 120px)}.search-row button{flex:0 0 100px}
 .cards{grid-template-columns:1fr;gap:12px}
 .hero-card{width:100%;margin:0}.identity h2{font-size:18px}.skill p{font-size:13px}
 .banner-tags span{margin-bottom:7px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.hero-card:hover,.top nav a:hover,.quality-filter:hover,.group-tabs button:hover{transform:none}}