:root{
  --steel:#123F6D;        /* xanh thép chính */
  --steel-dark:#0B2B4C;
  --steel-light:#E8F0F9;
  --orange:#F26A21;       /* cam áo phản quang */
  --orange-dark:#D4530F;
  --hivis:#FFC20E;        /* vàng hi-vis */
  --ink:#1D2733;
  --grey:#5B6B7C;
  --line:#DDE5EE;
  --bg:#F5F7FA;
  --white:#FFFFFF;
  --green:#1F9D55;
  --red:#D64545;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55}
img{max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.stripe{height:8px;background:repeating-linear-gradient(45deg,var(--hivis) 0 12px,var(--ink) 12px 24px)}
.stripe-mini{display:inline-block;width:42px;height:6px;background:repeating-linear-gradient(45deg,var(--hivis) 0 8px,var(--ink) 8px 16px);border-radius:3px;vertical-align:middle}
h1,h2,h3{line-height:1.2}
.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.5px;text-transform:uppercase}
.btn{display:inline-block;padding:12px 26px;border-radius:8px;font-weight:700;font-size:15px;border:none;cursor:pointer;transition:.15s}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-dark)}
.btn-steel{background:var(--steel);color:#fff}
.btn-steel:hover{background:var(--steel-dark)}
.btn-ghost{background:#fff;color:var(--steel);border:2px solid var(--steel)}
.btn-sm{padding:8px 16px;font-size:13.5px;border-radius:6px}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.badge-hot{background:var(--orange);color:#fff}
.badge-open{background:#E5F5EC;color:var(--green)}
.badge-full{background:#EEF1F5;color:var(--grey)}
.badge-new{background:#FFE9DB;color:var(--orange-dark)}
.badge-done{background:#E5F5EC;color:var(--green)}
.badge-call{background:#FFF6D6;color:#9B7B00}

/* ===== MOCKUP SWITCHER BAR ===== */
.mockbar{position:sticky;top:0;z-index:999;background:var(--ink);color:#fff;padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.mockbar .mocktag{font-family:'Anton';font-size:13px;letter-spacing:1px;color:var(--hivis);margin-right:10px;white-space:nowrap}
.mockbar button{background:#33404F;color:#D6DEE8;border:none;border-radius:6px;padding:6px 12px;font-size:12.5px;font-family:'Be Vietnam Pro';font-weight:600;cursor:pointer}
.mockbar button:hover{background:#42556B}
.mockbar button.on{background:var(--orange);color:#fff}
.mockbar .sep{color:#5B6B7C;font-size:11px;margin:0 4px;text-transform:uppercase;letter-spacing:1px}
.screen{display:none}
.screen.on{display:block}
[data-go]{cursor:pointer}

/* ===== SITE HEADER / FOOTER ===== */
.topbar{background:var(--steel-dark);color:#BBD0E6;font-size:12.5px;padding:6px 0}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.sitehead{background:#fff;border-bottom:1px solid var(--line);position:relative}
.sitehead .container{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:44px;height:44px;border-radius:9px;background:#fff;object-fit:contain;padding:3px;box-sizing:border-box;flex-shrink:0}
.logo .nm{font-weight:800;font-size:17px;color:var(--steel);line-height:1.15}
.logo .nm small{display:block;font-weight:500;font-size:10.5px;color:var(--grey);letter-spacing:1.5px;text-transform:uppercase}
.mainnav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:14.5px}
.mainnav a{color:var(--ink);padding:6px 2px;border-bottom:3px solid transparent;white-space:nowrap}
.mainnav a.cur{color:var(--steel);border-color:var(--orange)}
.mainnav a:hover{color:var(--steel)}
.navtoggle{display:none;background:var(--steel);color:#fff;border:none;border-radius:8px;padding:8px 13px;font-size:18px;cursor:pointer}
#s-jp-biz{font-family:'Noto Sans JP','Be Vietnam Pro',sans-serif}
#s-jp-biz .display{font-family:'Noto Sans JP',sans-serif;font-weight:900;letter-spacing:0}
.headcta{margin-left:8px;flex-shrink:0;white-space:nowrap}
.sitefoot{background:var(--steel-dark);color:#B9CBDD;margin-top:60px}
.sitefoot .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:34px;padding:44px 0 30px}
.sitefoot h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.sitefoot li{list-style:none;margin-bottom:8px;font-size:13.5px}
.sitefoot .bot{border-top:1px solid #1E4066;padding:14px 0;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}

/* ===== FLOATING BUTTONS ===== */
.floats{position:fixed;right:18px;bottom:22px;display:flex;flex-direction:column;gap:12px;z-index:500}
.floats a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);position:relative}
.f-call{background:var(--orange);animation:ring 2.2s infinite}
.f-zalo{background:#0068FF;font-family:'Anton';font-size:15px!important;letter-spacing:.5px}
@keyframes ring{0%,100%{transform:rotate(0)}5%{transform:rotate(-12deg)}10%{transform:rotate(10deg)}15%{transform:rotate(-8deg)}20%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.f-call{animation:none}}

/* ===== HERO ===== */
.hero{background:linear-gradient(120deg,var(--steel-dark) 0%,var(--steel) 62%,#1B5FA0 100%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;background:rgba(255,194,14,.08)}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding:64px 20px 70px;position:relative;z-index:1}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--hivis);font-weight:700;margin-bottom:18px}
.hero h1{font-size:46px;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--hivis)}
.hero p.lead{font-size:16.5px;color:#CFE0F2;max-width:520px;margin-bottom:28px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .stats{display:flex;gap:36px;margin-top:38px}
.hero .stats b{font-family:'Anton';font-size:30px;color:var(--hivis);display:block;letter-spacing:1px}
.hero .stats span{font-size:12.5px;color:#AFC8DF;text-transform:uppercase;letter-spacing:1px}
.quicksearch{background:#fff;border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:end;flex-wrap:wrap;max-width:540px;box-shadow:0 16px 40px rgba(0,0,0,.28)}
.ph{border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;text-align:center;font-size:13.5px;letter-spacing:.4px}
.hero .ph{background:linear-gradient(145deg,#1B5FA0,#0B2B4C);border:1px solid rgba(255,255,255,.18);min-height:330px;flex-direction:column;gap:8px}
.ph .cam{font-size:40px}

/* ===== SECTIONS ===== */
.sec{padding:56px 0}
.sec.alt{background:#fff}
.sec-head{margin-bottom:34px}
.sec-head .kick{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.sec-head h2{font-size:30px}
.sec-head p{color:var(--grey);margin-top:8px;max-width:640px}

/* job cards */
.jobgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jobcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;position:relative;transition:.15s;display:flex;flex-direction:column;gap:10px}
.jobcard:hover{box-shadow:0 10px 26px rgba(18,63,109,.12);transform:translateY(-2px)}
.jobcard .jtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.jobcard h3{font-size:16.5px}
.jobcard .kcn{color:var(--steel);font-weight:600;font-size:13.5px}
.jobcard .meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--grey)}
.jobcard .meta span{background:var(--bg);border:1px solid var(--line);padding:3px 9px;border-radius:6px}
.jobcard .sal{font-family:'Anton';font-size:21px;color:var(--orange);letter-spacing:.5px}
.jobcard .jbot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}
.jobcard .jbot small{color:var(--grey)}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:st}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 18px;position:relative}
.step::before{counter-increment:st;content:"0" counter(st);font-family:'Anton';font-size:34px;color:var(--steel-light);position:absolute;top:10px;right:14px}
.step .ic{width:44px;height:44px;border-radius:10px;background:var(--steel-light);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.step h3{font-size:15px;margin-bottom:6px}
.step p{font-size:12.8px;color:var(--grey)}

/* trust strip */
.truststrip{background:var(--steel);color:#fff}
.truststrip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 20px}
.trust{display:flex;gap:12px;align-items:center}
.trust .tic{font-size:26px}
.trust b{display:block;font-size:14.5px}
.trust span{font-size:12.5px;color:#BBD3EA}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px}
.gal .ph{font-size:12.5px}
.g1{background:linear-gradient(135deg,#1B5FA0,#123F6D);grid-column:span 2;grid-row:span 2}
.g2{background:linear-gradient(135deg,#F26A21,#C24E0D)}
.g3{background:linear-gradient(135deg,#2A7DBE,#155083)}
.g4{background:linear-gradient(135deg,#57677A,#33404F)}
.g5{background:linear-gradient(135deg,#1F9D55,#137040)}
.g6{background:linear-gradient(135deg,#8C6D1F,#5E4A15)}

/* Homepage featured-media grid: how many tiles subdivide the same fixed
   2-row band depends on the featured count, so the section never leaves a
   dead cell and never changes height as items are featured/unfeatured.
   count-5 (the max: 1 video + 4 images) is the only count where a 2x2 hero
   plus 4 unit tiles fills the grid exactly, so it alone keeps the .g1
   oversized-hero treatment; every other count renders uniform tiles. */
.gal.count-1{grid-template-columns:1fr}
.gal.count-1 .ph{grid-row:span 2}
.gal.count-2{grid-template-columns:1fr 1fr}
.gal.count-2 .ph{grid-row:span 2}
.gal.count-3{grid-template-columns:repeat(3,1fr)}
.gal.count-3 .ph{grid-row:span 2}
.gal.count-4{grid-template-columns:1fr 1fr}
.gal.count-5{grid-template-columns:repeat(4,1fr)}
.playball{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid #fff}
.galtab{background:#fff;border:1.5px solid var(--line);color:var(--ink);padding:8px 16px;font-size:13.5px;font-weight:700;border-radius:6px;display:inline-block}
.galtab.active{background:var(--steel);color:#fff;border-color:var(--steel)}

/* ===== gallery lightbox (thu-vien.html) ===== */
.lightbox{position:fixed;inset:0;background:rgba(10,14,20,.92);z-index:2000;display:none;align-items:center;justify-content:center;padding:70px 60px}
.lightbox-content{max-width:min(90vw,1100px);max-height:76vh;display:flex;align-items:center;justify-content:center}
.lightbox-content img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:8px}
.lightbox-content iframe{width:min(90vw,960px);aspect-ratio:16/9;border:0;border-radius:8px}
.lightbox-close,.lightbox-nav{background:rgba(255,255,255,.14);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.26)}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;font-size:20px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:26px}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-title{position:absolute;bottom:20px;left:60px;right:60px;text-align:center;color:#fff;font-size:14px}
@media(max-width:640px){
  .lightbox{padding:56px 16px}
  .lightbox-nav{width:40px;height:40px;font-size:20px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-title{left:16px;right:16px;bottom:10px}
}

/* news */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.newscard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.newscard .ph{height:150px;border-radius:0;font-size:12.5px}
.n1{background:linear-gradient(135deg,#123F6D,#0B2B4C)}
.n2{background:linear-gradient(135deg,#F26A21,#A84208)}
.n3{background:linear-gradient(135deg,#2A7DBE,#123F6D)}
.newscard .nb{padding:16px 18px}
.newscard .date{font-size:12px;color:var(--grey);margin-bottom:6px}
.newscard h3{font-size:15.5px;margin-bottom:8px}
.newscard p{font-size:13px;color:var(--grey)}

/* CTA band */
.ctaband{background:linear-gradient(100deg,var(--orange),#E5560F);color:#fff;border-radius:16px;padding:38px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ctaband h2{font-size:26px;margin-bottom:6px}
.ctaband p{color:#FFE0CC}

/* page hero (subpages) */
.pagehero{background:linear-gradient(115deg,var(--steel-dark),var(--steel));color:#fff;padding:40px 0}
.pagehero .crumb{font-size:12.5px;color:#9DBBD8;margin-bottom:10px}
.pagehero h1{font-size:32px}

/* about */
.aboutgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.aboutgrid .ph{min-height:280px;background:linear-gradient(140deg,#1B5FA0,#0B2B4C);flex-direction:column;gap:8px}
.licsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lic{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.lic .doc{width:100%;height:170px;border-radius:8px;background:repeating-linear-gradient(#F0F4F9 0 14px,#E2EAF3 14px 16px);border:1px solid var(--line);position:relative;margin-bottom:12px;overflow:hidden}
.lic .doc::before{content:"⚖";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;opacity:.35}
.lic .doc .seal{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:rgba(214,69,69,.85);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:700;transform:rotate(-12deg)}
.lic b{font-size:13.8px;display:block}
.capgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cap{background:var(--steel);color:#fff;border-radius:12px;padding:24px 20px;text-align:center}
.cap b{font-family:'Anton';font-size:32px;color:var(--hivis);display:block;letter-spacing:1px}
.cap span{font-size:12.5px;color:#BBD3EA;text-transform:uppercase;letter-spacing:.5px}

/* jobs page */
.filterbar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr .8fr auto;gap:12px;margin:-30px 0 30px;box-shadow:0 8px 24px rgba(18,63,109,.08);position:relative;z-index:2}
.field label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--grey);margin-bottom:5px}
.field select,.field input,.field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.field select:focus,.field input:focus,.field textarea:focus{outline:2px solid var(--steel);outline-offset:1px}
.filterbar .btn{align-self:end}
.joblist{display:flex;flex-direction:column;gap:14px}
.jobrow{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;display:grid;grid-template-columns:2fr 1.1fr 1fr .9fr auto;gap:16px;align-items:center}
.jobrow:hover{box-shadow:0 8px 22px rgba(18,63,109,.1)}
.jobrow h3{font-size:15.5px;margin-bottom:3px}
.jobrow .kcn{font-size:13px;color:var(--steel);font-weight:600}
.jobrow .cell b{display:block;font-size:13.5px}
.jobrow .cell span{font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:.5px}
.jobrow .sal{font-family:'Anton';font-size:19px;color:var(--orange)}
.rowtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rowtags span{font-size:11.5px;color:var(--grey);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:28px}
.pager a,.pager span{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px}
.pager a.cur{background:var(--steel);color:#fff;border-color:var(--steel)}
.pager span{opacity:.5;cursor:default;color:var(--grey)}

/* job detail */
.detailgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.card h2{font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:20px}
.kv div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.kv b{display:block;font-size:14px}
.kv span{font-size:11.5px;color:var(--grey);text-transform:uppercase;letter-spacing:.6px}
.card ul{margin:0 0 16px 18px}
.card li{margin-bottom:7px;font-size:14px}
.applybox{position:sticky;top:74px}
.applybox .card{border-top:5px solid var(--orange)}
.applybox .field{margin-bottom:12px}
.applybox .note{font-size:12px;color:var(--grey);margin-top:10px}

/* business page */
.bizgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.bizpoints{display:flex;flex-direction:column;gap:14px}
.bp{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.bp .ic{width:42px;height:42px;flex:0 0 42px;border-radius:10px;background:var(--steel-light);display:flex;align-items:center;justify-content:center;font-size:19px}
.bp b{font-size:14.5px;display:block}
.bp span{font-size:13px;color:var(--grey)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form2 .full{grid-column:1/-1}

/* process page */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;background:var(--line);border-radius:2px}
.tstep{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:16px}
.tstep::before{content:"";position:absolute;left:-31px;top:22px;width:15px;height:15px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 0 0 2px var(--orange)}
.tstep b{font-size:15.5px}
.tstep p{font-size:13.5px;color:var(--grey);margin-top:4px}
.bengrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ben{background:#fff;border:1px solid var(--line);border-left:5px solid var(--hivis);border-radius:10px;padding:18px}
.ben b{display:block;font-size:14.5px;margin-bottom:4px}
.ben span{font-size:13px;color:var(--grey)}
.faq{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.faq summary{padding:15px 20px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:14.5px}
.faq summary::after{content:"+";font-family:'Anton';color:var(--orange);font-size:18px}
.faq[open] summary::after{content:"–"}
.faq p{padding:0 20px 16px;color:var(--grey);font-size:13.8px}

/* ===== ADMIN ===== */
.adminwrap{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:#EDF1F6}
.aside{background:var(--steel-dark);color:#B9CBDD;padding:18px 0}
.aside .alogo{display:flex;align-items:center;gap:10px;padding:4px 18px 18px;border-bottom:1px solid #1E4066;margin-bottom:12px}
.aside .alogo .mark{width:36px;height:36px;border-radius:8px;background:#fff;object-fit:contain;padding:2px;box-sizing:border-box;flex-shrink:0}
.aside .alogo b{color:#fff;font-size:13.5px;line-height:1.2}
.aside .alogo small{font-size:10px;color:#7E9BB8;text-transform:uppercase;letter-spacing:1px}
.aside a{display:flex;align-items:center;gap:11px;padding:11px 18px;font-size:13.8px;font-weight:500;border-left:4px solid transparent}
.aside a:hover{background:#12395F;color:#fff}
.aside a.cur{background:#12395F;color:#fff;border-color:var(--orange)}
.aside .cnt{margin-left:auto;background:var(--orange);color:#fff;border-radius:12px;font-size:11px;font-weight:700;padding:2px 8px}
.aside .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:1.5px;color:#5F7FA0;padding:16px 18px 6px}
.amain{padding:0}
.abar{background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:14px}
.abar h1{font-size:18px}
.abar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.abar .user{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.abar .avatar{width:34px;height:34px;border-radius:50%;background:var(--steel);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.abody{padding:24px 26px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;position:relative}
.kpi b{font-family:'Anton';font-size:28px;letter-spacing:.5px;display:block}
.kpi span{font-size:12.5px;color:var(--grey)}
.kpi.hot{border-top:4px solid var(--orange)}
.kpi.hot b{color:var(--orange)}
.kpi .up{font-size:11.5px;color:var(--green);font-weight:700}
.atools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:end}
.atools .field{min-width:160px}
.atools .spacer{flex:1}
.atable{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:13.5px}
.atable th{background:var(--steel);color:#fff;text-align:left;padding:11px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.atable td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:middle}
.atable tr:hover td{background:#F4F8FC}
.atable .b{font-weight:700}
.atable .mut{color:var(--grey);font-size:12.5px}
.atable select.mini{padding:5px 8px;border:1.5px solid var(--line);border-radius:6px;font-size:12.5px;font-family:inherit}
.rownew td{background:#FFF7F1!important}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.o{background:var(--orange)}.dot.g{background:var(--green)}.dot.y{background:#D8A900}
.alink{color:var(--steel);font-weight:600;font-size:12.5px}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 9px;cursor:pointer;font-size:13px}

/* login */
.loginwrap{min-height:100vh;background:linear-gradient(120deg,var(--steel-dark),var(--steel) 70%,#1B5FA0);display:flex;align-items:center;justify-content:center;padding:40px 16px;position:relative;overflow:hidden}
.loginwrap::before{content:"";position:absolute;inset:auto 0 0 0;height:10px;background:repeating-linear-gradient(45deg,var(--hivis) 0 14px,var(--ink) 14px 28px)}
.loginbox{background:#fff;border-radius:16px;padding:38px 36px;width:400px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.loginbox .logo{justify-content:center;margin-bottom:8px}
.loginbox h1{font-size:19px;text-align:center;margin-bottom:4px}
.loginbox .sub{text-align:center;color:var(--grey);font-size:13px;margin-bottom:24px}
.loginbox .field{margin-bottom:14px}
.loginbox .btn{width:100%}
.loginbox .aux{display:flex;justify-content:space-between;font-size:12.5px;margin:12px 2px 0;color:var(--grey)}

/* media admin */
.medgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.med{height:110px;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;color:#fff;font-size:11px;font-weight:600}
.med span{background:rgba(0,0,0,.45);width:100%;padding:5px 8px}
.med .vid{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);border-radius:5px;padding:2px 7px;font-size:10px}
.banrow{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:10px}
.banrow .thumb{width:170px;height:56px;border-radius:8px;flex:0 0 170px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
.toggle{width:42px;height:23px;border-radius:20px;background:var(--green);position:relative;flex:0 0 42px;border:1px solid rgba(0,0,0,.08);cursor:pointer}
.toggle::after{content:"";position:absolute;top:2.5px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
/* Icon glyph on the empty side of the track — on/off is never conveyed by
   color alone, since color-blind users or low-contrast displays can't rely
   on green-vs-grey to tell the state apart. */
.toggle::before{content:"✓";position:absolute;top:50%;left:6px;transform:translateY(-50%);font-size:10px;font-weight:700;line-height:1;color:#fff}
.toggle.off{background:var(--grey)}
.toggle.off::after{right:auto;left:3px}
.toggle.off::before{content:"✕";left:auto;right:6px}

.mock-note{max-width:1140px;margin:26px auto 40px;padding:0 20px;font-size:12.5px;color:var(--grey);text-align:center}

/* ===== home banners ===== */
/* #home-banners is a direct child of main.page, which is a column flex
   container (see the footer-pinning rules above). .container's own
   `margin:0 auto` sets auto margins on the cross axis of that flex
   context, which per spec defeats align-items:stretch -- so without an
   explicit width, this box collapses to its content's intrinsic size
   (here, near-zero, since the banner tiles size themselves relative to
   *this* box) instead of the intended max-width:1140px. count-many
   happens to dodge the symptom because its tiles have a fixed
   flex-basis, but count-1/count-2 tiles are sized relative to this
   parent, so the fix belongs on the parent itself.
   JS toggles one of these count-* classes on #home-banners based on how
   many visible banners there are: 0 = stays hidden (display:none inline
   style), 1 = centered single banner, 2 = side-by-side, 3+ = horizontal
   scroll so the homepage never grows an unbounded vertical stack. */
.home-banners{width:100%}
.home-banners.count-1{display:flex;justify-content:center}
.home-banners.count-1 .hbanner{width:100%;max-width:640px}
.home-banners.count-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home-banners.count-many{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.home-banners.count-many .hbanner{flex:0 0 320px;scroll-snap-align:start}
.hbanner{display:block;border-radius:12px;overflow:hidden;height:120px;background-position:center;background-size:cover}
@media(max-width:640px){
  .home-banners.count-2{grid-template-columns:1fr;gap:12px}
  .home-banners.count-many .hbanner{flex-basis:260px}
}

@media(max-width:960px){
  .hero .container{grid-template-columns:1fr}
  .jobgrid,.newsgrid,.licsgrid,.bengrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .capgrid,.kpis{grid-template-columns:1fr 1fr}
  .truststrip .container{grid-template-columns:1fr 1fr}
  .filterbar{grid-template-columns:1fr 1fr}
  .jobrow{grid-template-columns:1fr 1fr}
  .detailgrid,.bizgrid,.aboutgrid{grid-template-columns:1fr}
  .adminwrap{grid-template-columns:1fr}
  .aside{display:flex;flex-wrap:wrap;padding:8px}
  .aside .alogo,.aside .grp{display:none}
  /* count-3 stays 1 column on mobile -- 3 is odd, so 2 columns would always
     leave one dead cell no matter how the tiles are arranged. */
  .gal.count-3{grid-template-columns:1fr}
  .gal.count-5{grid-template-columns:1fr 1fr}
  .medgrid{grid-template-columns:1fr 1fr 1fr}
  .clientlogos{grid-template-columns:repeat(3,1fr)!important}
  .quotes2{grid-template-columns:1fr!important}
  .form2{grid-template-columns:1fr}
  .mainnav{display:none}
  .navtoggle{display:block}
  .headcta{margin-left:auto}
  .mainnav.open{display:flex;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:6px 0 10px;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(0,0,0,.14);z-index:400}
  .mainnav.open a{padding:12px 22px;border-bottom:1px solid var(--bg);border-left:4px solid transparent}
  .mainnav.open a.cur{border-left-color:var(--orange);border-bottom-color:var(--bg)}
  .sitefoot .grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
}
@media(max-width:560px){
  .jobgrid,.newsgrid,.licsgrid,.bengrid,.steps,.capgrid,.kpis,.jobrow,.filterbar{grid-template-columns:1fr}
}
@media(max-width:480px){
  /* Logo + "Ứng tuyển ngay" + hamburger toggle together don't fit one row
     below ~480px (none of the three shrink) -- the toggle button itself
     gets pushed past the viewport edge, causing horizontal page overflow.
     The CTA is redundant here anyway: the hamburger menu and every job
     card/CTA band elsewhere on the page still get the user to "Việc làm". */
  .headcta{display:none}
}

/* ===== multi-page mockup strip ===== */
.mockstrip{position:sticky;top:0;z-index:999;background:var(--ink);color:#D6DEE8;font:600 12px 'Be Vietnam Pro',sans-serif;padding:9px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mockstrip b{font-family:'Anton';letter-spacing:1px;color:var(--hivis);font-weight:400}
.mockstrip a{color:#fff;text-decoration:underline}
main.page{display:block}
/* Public pages (main.page with a direct .sitefoot child): pin the footer to
   the bottom of the viewport when content is shorter than one screen, by
   growing whichever content block directly precedes it. Admin/login pages
   (no .sitefoot) are untouched by these :has() selectors. */
body:has(> main.page > .sitefoot){display:flex;flex-direction:column;min-height:100vh}
main.page:has(> .sitefoot){display:flex;flex-direction:column;flex:1 0 auto}
main.page:has(> .sitefoot) > *:has(+ .sitefoot){flex:1 0 auto}