/* GJO – Giao diện CHÍNH "Cổ điển" (màu bản đầu tiên 27/10/2026), font Be Vietnam Pro (đủ dấu tiếng Việt – Anh chốt 27/10).
   Mặc định trang luôn có <html class="classic">. Bản Wix được LƯU LẠI: xem bằng ?theme=new (bỏ class classic). */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700;800;900&display=swap");

html.classic{
  --serif:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html.classic body{font-family:var(--sans)}
html.classic h1,html.classic h2,html.classic h3{font-weight:900;letter-spacing:-.2px}

/* Header navy */
html.classic header.site{background:rgba(14,34,64,.97);border-bottom:0}
html.classic header.site .brand{color:#fff}
html.classic header.site .brand b{color:#8fd3ff}
html.classic header.site .brand img{background:#fff}
html.classic nav.main a{color:#dfe8f6}
html.classic nav.main a:hover{background:rgba(255,255,255,.1);color:#fff}
html.classic .menu-btn{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
html.classic header.site .pillbtn,html.classic header.site .back{color:#fff;border-color:rgba(255,255,255,.5)}
html.classic header.site .pillbtn.solid{background:#2e9e57;border-color:#2e9e57}
@media (max-width:1180px){
  html.classic nav.main{background:#0e2240;border-bottom:0}
  html.classic nav.main a{border-bottom-color:rgba(255,255,255,.12)}
  html.classic nav.main .m-social a{background:rgba(255,255,255,.1)}
}

/* Hero gradient navy → xanh */
html.classic .hero-left,
html.classic .hero:not(:has(.hero-left)){background:linear-gradient(160deg,#0e2240 0%,#123566 60%,#1a5fc4 130%)}
@media (min-width:901px){
  html.classic .hero-left{background:linear-gradient(90deg,rgba(14,34,64,.97) 0%,rgba(14,34,64,.92) 34%,rgba(14,34,64,.55) 44%,rgba(14,34,64,0) 52%)}
}
html.classic .tag{background:rgba(46,158,87,.18);color:#9ff0bf;border:1px solid rgba(46,158,87,.5)}
html.classic .hero h1{color:#fff}
html.classic .hero p{color:#d5e2f5}
html.classic .hero .btn-dark{background:#2e9e57}
html.classic .hero .btn-dark:hover{background:#278a4b}
html.classic .hero .btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
html.classic .hero .btn-light:hover{background:rgba(255,255,255,.08)}
html.classic .btn{border-radius:10px}

/* Sections: xen kẽ trắng / xám xanh */
html.classic .s-alt{background:#fff}
html.classic .ico{border-radius:50%;box-shadow:none;color:#fff;font-size:13px}
html.classic .ico.yes{background:#2e9e57}
html.classic .ico.no{background:#c94a4a}
html.classic .job,html.classic .tile,html.classic .t,html.classic .item,html.classic .card,html.classic .city{border-radius:14px}
html.classic .step .pic{border-radius:14px}
html.classic .s-alt .tile{background:#f0f4f9}

/* Khối liên hệ nền navy */
html.classic section.cta{background:#0e2240}
html.classic section.cta h2{color:#fff}
html.classic section.cta p{color:#cfdcf0}
html.classic section.cta .tiny-note{color:#a9b9d1}
html.classic .cta:not(section){background:#0e2240}
html.classic .cta:not(section) h2{color:#fff}
html.classic .cta:not(section) p{color:#cfdcf0}

/* Footer tối */
html.classic footer{background:#0a1a31;color:#a9b9d1;border-top:0}
html.classic footer p,html.classic footer .tiny{color:#a9b9d1}
html.classic footer .brand{color:#fff}
html.classic footer .brand b{color:#8fd3ff}
html.classic footer .brand img{background:#fff}
html.classic footer hr{border-top-color:rgba(255,255,255,.2);opacity:1}

/* Nút chuyển giao diện (chỉ hiện trên bản thử) */
.gjo-theme-switch{position:fixed;left:14px;bottom:14px;z-index:999;display:flex;background:#fff;border:1px solid #cfd9e6;border-radius:999px;padding:4px;box-shadow:0 8px 24px rgba(14,34,64,.18);font:600 13px/1 system-ui,sans-serif}
.gjo-theme-switch button{border:0;background:transparent;padding:9px 14px;border-radius:999px;cursor:pointer;color:#0e2240;font:inherit}
.gjo-theme-switch button[aria-pressed="true"]{background:#0e2240;color:#fff}