.jp{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
color:#222;line-height:1.9;letter-spacing:.05em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.jp *{box-sizing:border-box}

.jp .jp-container{max-width:1200px;margin:0 auto;padding:0 40px}
.jp .jp-container-small{max-width:860px;margin:0 auto}

.jp .flex-header{display:flex;align-items:center;justify-content:space-between;gap:40px}
.jp .logo{font-size:18px;white-space:nowrap;letter-spacing:.1em}
.jp .nav-links{display:flex;gap:32px;justify-content:center}
.jp .nav-links a{font-size:13px;letter-spacing:.1em;color:#333;text-decoration:none;position:relative;padding:5px 0}
.jp .nav-links a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;background:#003366;transform:translateX(-50%);transition:.3s}
.jp .nav-links a:hover::after,.jp .nav-links a.active::after{width:100%}
.jp .header-right{display:flex;gap:15px;white-space:nowrap}
.jp .btn-contact{background:#003366;color:#fff;padding:8px 16px;font-size:13px}

.jp .hero{padding:10px 0 8px;text-align:center}
.jp .hero-inner p{font-size:14px;letter-spacing:.1em;color:#003366}
.jp .hero-inner h1{font-size:42px;font-weight:500;letter-spacing:.08em;position:relative;display:inline-block;padding-bottom:15px}
.jp .hero-inner h1::after{content:"";width:60px;height:2px;background:#003366;display:block;margin:12px auto 0}

.jp .greeting{padding:20px 0}
.jp .greeting-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:120px;align-items:center}
.jp .greeting-text span{font-size:12px;color:#003366;letter-spacing:.12em}
.jp .greeting-text h2{font-size:34px;line-height:60px;font-weight:500;letter-spacing:.06em;margin:20px 0}
.jp .greeting-text .desc{font-size:14px;line-height:30px;color:#555}
.jp .greeting-img img{width:100%;object-fit:cover}

.jp .profile{padding:10px 0;display:flex;justify-content:center}
.jp .profile .container{max-width:1100px !important;margin:0 auto !important;display:flex;justify-content:center}
.jp .profile .row{width:100%;justify-content:center;margin:0}
.jp .profile .col-md-8{flex:0 0 100%;max-width:100%;padding:0}

.jp .section-en{font-size:14px;color:#1a2a44;text-align:left;margin-bottom:10px}
.jp .section-title{font-size:36px;font-weight:600;margin-bottom:40px;letter-spacing:.08em;text-align:left}

.jp .profile-list{
display:grid;
grid-template-columns:260px 1fr;
border-top:1px solid #cfcfcf;
max-width:1100px;
width:100%;
margin:0 auto
}

.jp .profile-list dt,
.jp .profile-list dd{
padding:22px 0;
border-bottom:1px solid #cfcfcf;
display:flex;
align-items:center;
width:100%
}

.jp .profile-list dt{
position:relative;
font-size:16px;
font-weight:500;
width:260px
}

.jp .profile-list dt::before{
content:"";
position:absolute;
bottom:-1px;
left:0;
width:80px;
height:2px;
background:#1f4aa8
}

.jp .profile-list dd{
padding-left:80px;
font-size:16px;
color:#333;
display:flex;
align-items:center
}

.jp .recruit{padding:10px 0;display:flex;justify-content:center}
.jp .recruit-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:120px;align-items:center;max-width:1200px;width:100%}

.jp .recruit-img-wrap{position:relative;width:100%;max-width:720px}
.jp .img-front{width:100%;max-height: 500px;height: 500px;display:block;position:relative;z-index:2}
.jp .img-back{
position:absolute;
width:70%;
max-height: 500px;
height: 500px;
background:url('/img/web/hai-giang-2.jpg') center/cover no-repeat;
top:-80px;
left:-80px;
z-index:1
}

.jp .recruit-text{max-width:360px}
.jp .recruit-text p{font-size:14px;color:#1a2a44;margin-bottom:10px}
.jp .recruit-text h2{font-size:34px;letter-spacing:.08em;margin-bottom:20px}
.jp .recruit-text h2::after{content:"";display:block;width:40px;height:2px;background:#1f4aa8;margin-top:12px}

.jp .recruit-item{
display:flex;
gap:15px;
margin-top:30px;
align-items:flex-start;
padding-bottom:20px;
border-bottom:1px solid #ccc
}

.jp .recruit-item .icon{font-size:22px}
.jp .recruit-item .title{font-size:16px;margin-bottom:5px}
.jp .recruit-item .desc{font-size:13px;color:#555}

.jp .stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
padding:120px 0
}

.jp .stat span{
font-family:"Times New Roman","Hiragino Mincho ProN","Yu Mincho",serif;
font-size:72px;
font-weight:400;
letter-spacing:.05em;
color:#1f4aa8;
line-height:1;
display:block
}

.jp .stat p{
font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
font-size:14px;
letter-spacing:.08em;
margin-top:12px;
color:#222
}

.jp .stat{
padding-bottom:20px;
position:relative
}

.jp .stat::after{
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:80%;
height:2px;
background:#1f4aa8
}

.jp-map iframe{width:100%;height:400px;border:0;filter:grayscale(100%)}

.jp-contact{
position:relative;
background:url('/img/web/hai-giang-4.jpg') center/cover no-repeat;
padding:120px 20px;
text-align:center
}

.contact-overlay{position:absolute;inset:0;background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}
.contact-inner{position:relative}

.jp-contact h2{font-size:30px}
.jp-contact h2::after{
content:"";
width:60px;
height:2px;
background:#003366;
display:block;
margin:10px auto
}

.contact-tel{font-size:26px;margin:20px 0}

.contact-btns a{
background:#1f4aa8;
color:#fff;
padding:12px 30px;
margin:10px;
display:inline-block
}

.jp-footer{
background:linear-gradient(180deg,#05252a,#031e22);
color:#fff;
padding:100px 0 40px
}

.jp-footer .container{max-width:1200px}

.jp-footer-row{row-gap:40px}

.jp-footer h3{
font-size:22px;
letter-spacing:.08em;
margin-bottom:20px;
font-weight:500
}

.jp-footer p{
font-size:14px;
line-height:2.2;
color:#d6e0e2;
margin:0
}

.jp-footer .btn-map{
display:inline-block;
background:#fff;
color:#111;
padding:14px 32px;
font-size:14px;
letter-spacing:.08em;
margin-bottom:20px;
text-decoration:none
}

.jp-footer .footer-copy{
font-size:13px;
color:#cfd8da;
margin-top:10px
}

.jp .hero-inner,
.jp .greeting-text,
.jp .greeting-img,
.jp .profile,
.jp .recruit,
.jp .stats{
opacity:0;
transform:translateY(30px);
animation:jpFadeUp .8s ease forwards
}

.jp .greeting-img{animation-delay:.2s}
.jp .profile{animation-delay:.3s}
.jp .recruit{animation-delay:.4s}
.jp .stats{animation-delay:.5s}

@keyframes jpFadeUp{
to{opacity:1;transform:translateY(0)}
}

@media(max-width:992px){
.jp .nav-links{display:none}
.jp .greeting-grid{grid-template-columns:1fr;gap:40px}
.jp .recruit-grid{grid-template-columns:1fr;gap:40px}
.jp .img-back{display:none}
.jp .hero-inner h1{font-size:30px}
.jp .greeting-text h2{font-size:24px;line-height:42px}
.jp .stat span{font-size:36px}
.jp-footer{padding:60px 0 30px}
.jp-footer .text-lg-end{text-align:left !important}
}

@media(max-width:576px){
.jp .hero-inner h1{font-size:24px}
.jp .greeting-text h2{font-size:20px;line-height:34px}
}
.jp-footer {
    width: 100%;
    float: left;
    
}

img.anh-gt-1
{
	max-height:500px;
	width:auto;
}
.jp .profile {
    margin-bottom: 70px;
}
@media screen and (max-width:767.9px)
{
.jp .profile-list dd
{
    padding-left: unset;
}
.jp .stat {
    float: left;
    width: 50%;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 10px;
}
}
:root {
    --navy: #003366;
    --light-bg: #f8f9fa;
    --border-color: #d1d1d1;
	--normal: #0a1f25;
}

p {
    color: var(--normal);
}
.profile-list dd {
position: relative;
}
.title {
	font-size: 35px;
	line-height: 1.6;
	color: var(--navy);
}
.jp .profile-list dt, .jp .profile-list dd { 
border-bottom: unset;
}
.jp .profile-list dt::before{

}
.jp .profile-list dd::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background: #cfcfcf;

}
.contact-tel {
padding-top: 30px;
font-weight: bold;
    color: var(--normal);
margin: unset;
}
.contact-time {
font-weight: bold;
padding-bottom: 30px;
}
.contact-inner h2 {
    margin-bottom: 70px;
}
.contact-overlay {
display:none;
}
.jp-contact .contact-inner {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 120px;
background-image: url(/upload/images/eb6190_d04e10b9d2474d459861d8ac5a472472~mv2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.jp-contact {
background: linear-gradient(to bottom, #ffffff 50%, var(--normal) 50%);
}
.jp .profile {
    padding-top: 120px;
    padding-bottom: 120px;
}
.jp .section-title {
font-size: 35px;
}
.jp .stats {
    padding-top: 50px;
    padding-bottom: 50px;
}
.hero h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: var(--navy);
    animation: borderRun1 1.5s ease-out forwards;
}
.jp .section-en {
    color: var(--navy);
    font-size: 22px;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}
.greeting-text h2 {
padding-bottom: 100px;
color: var(--navy);
}
.hero {
padding: 80px 0!important;
}
.greeting-text  span {
font-size: 22px!important;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}
.hero p {
font-weight: bold;
    margin-bottom: 5px;
    font-size: 22px;
}
.hero h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    font-size: 45px;
}
.jp .profile-list dd {
    padding-left: 30px;
}
.jp .profile-list dt {
width: unset;
}
.jp .profile-list dt::before {
    width: 100%;
}
.jp .profile-list dt, .jp .profile-list dd {
align-items: flex-start;
}
.jp .profile-list {
    display: grid;
    grid-template-columns: 20% 80%; 
    border-top: 1px solid #cfcfcf;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
.jp .profile .col-md-8 {
max-width: 80%;
}
.jp .profile .row {
display:flex;
}
img.anh-gt-1 {
    max-height: unset;
    width: 100%;
}
@media (min-width: 992px) {
.greeting .col-md-5 {
width: 50%;
}
.greeting .col-md-7 {
        width: 50%;
    }
}
.full-width-sp-home {
    background-color: #fff;
}
.noi-dung-1 .fa {
color: #f58020;
}
.row-02 {
	display:flex;
	flex-wrap: wrap;
}
.row-02 .colm-1, .row-02 .colm-2 {
    display: flex;
    flex-direction: column;
}
.img-recruit, .recruit-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
}
.img-recruit {
	position: relative;
}
.img-recruit-2 {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(30%, -50%);
	width: 100%;
	height: auto;
}
.recruit-content {
	padding-left:200px;
	justify-content: center;
}
.recruit-content .recruit-1-text {
	display:flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
}


.recruit-content .text-tittle {
	padding-bottom: 20px;
}
.recruit-content .text-tittle h2 {
	position: relative;
	padding-bottom: 20px;
}
.recruit-content .text-tittle h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 2px;
    background: var(--navy);
}

@media (max-width: 768px) {
.jp .profile .col-md-8 {
max-width: 100%;
}
.jp .profile-list {
    grid-template-columns: 30% 70%; 
}
}
@keyframes borderRun {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}@keyframes borderRun1 {
    to {
        width: 50%; 
    }
}
@media (max-width: 768px) {
	.img-recruit {
		width: 80%;
	}
	.img-recruit-2 {
		width: 90%;
	}
	.recruit-content {
		padding-left:unset;
	}
}
