/* =====================================
ABOUT HERO
===================================== */

.about-hero{
padding:90px 0 80px;
background:#f8fafc;
}

.title-about-hero{
max-width:900px;
margin:0 auto 50px;
}

.title-about-hero h1{
font-size:58px;
line-height:1.15;
font-weight:800;
color:#111827;
margin-bottom:20px;
}

.title-about-hero p{
font-size:20px;
line-height:1.9;
color:#64748b;
max-width:780px;
margin:0 auto;
}

/* =====================================
STATS
===================================== */

.about-stats{
margin-top:40px;
}

.stat-box{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:20px;
padding:30px 20px;
height:100%;
transition:.3s;
}

.stat-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 35px rgba(15,23,42,.06);
}

.stat-box h3{
color:#0f766e;
font-size:24px;
font-weight:800;
margin-bottom:10px;
}
.stat-box hr{
width:50px;
margin:15px auto;
border:none;
height:2px;
background:#0f766e;
}

.stat-box p{
margin:0;
color:#64748b;
font-size:15px;
line-height:1.8;
}

/* =====================================
ABOUT SECTION
===================================== */

.about-section{
    padding:90px 0;
    background:#ffffff;
}

.about-banner{
    margin-bottom:60px;
}

.about-img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.about-content-box{
    max-width:900px;
    margin:0 auto;
}

.about-block{
    margin-bottom:50px;
}

.about-block h2{
    font-size:34px;
    font-weight:800;
    color:#111827;
    margin-bottom:18px;
}
.about-block p{
    color:#64748b;
    font-size:18px;
    line-height:1.9;
}

.about-block ul{
    margin:0;
    padding-left:22px;
}

.about-block li{
    color:#64748b;
    font-size:17px;
    line-height:1.9;
    margin-bottom:10px;
}

.affiliate-box{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:35px;
}
/* =====================================
CORE VALUES
===================================== */

.core-values{
padding:90px 0;
background:#f8fafc;
}

.value-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:22px;
padding:35px 25px;
height:100%;
transition:.35s;
}

.value-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.value-card .icon{
width:70px;
height:70px;
border-radius:50%;
background:#ecfdf5;
color:#0f766e;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
font-size:28px;
}

.value-card h4{
font-size:22px;
font-weight:700;
color:#111827;
margin-bottom:10px;
}

.value-card hr{
width:50px;
margin:15px auto;
border:none;
height:2px;
background:#0f766e;
}

.value-card p{
margin:0;
color:#64748b;
line-height:1.8;
font-size:15px;
}

/* =====================================
TITLE LINE
===================================== */

.title-home-main{
margin-bottom:50px;
}

/* =====================================
MOBILE
===================================== */

@media(max-width:991px){
.about-content{
    padding-left:0;
    margin-top:40px;
}

.title-about-hero h1{
    font-size:44px;
}
}

@media(max-width:767px){
.about-hero{
    padding:70px 0;
}

.about-section,
.core-values{
    padding:70px 0;
}

.title-about-hero h1{
    font-size:34px;
}

.title-about-hero p{
    font-size:18px;
}
.about-content h2{
    font-size:26px;
}
}


/* =====================================
CONTACT HERO
===================================== */

.contact-hero{
padding:90px 0 80px;
background:#f8fafc;
}

.title-contact-hero{
max-width:900px;
margin:0 auto;
}

.title-contact-hero h1{
font-size:58px;
font-weight:800;
line-height:1.15;
color:#111827;
margin-bottom:20px;
}

.title-contact-hero p{
max-width:760px;
margin:0 auto;
font-size:20px;
line-height:1.9;
color:#64748b;
}

/* =====================================
CONTACT INFO
===================================== */

.contact-info{
padding:80px 0;
background:#ffffff;
}

.contact-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:24px;
padding:40px 30px;
text-align:center;
height:100%;
transition:.35s;
}

.contact-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.contact-card i{
width:70px;
height:70px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
background:#ecfdf5;
color:#0f766e;
font-size:28px;
}

.contact-card h4{
font-size:24px;
font-weight:700;
color:#111827;
margin-bottom:12px;
}

.contact-card p{
margin:0;
color:#64748b;
line-height:1.8;
}

/* =====================================
CONTACT FORM
===================================== */

.contact-form-sec{
padding:90px 0;
background:#f8fafc;
}

.contact-img{
width:100%;
border-radius:24px;
box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.contact-form-box{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:24px;
padding:45px;
box-shadow:0 10px 30px rgba(15,23,42,.05);
}


.title-contact-form {
    text-align: center;
    margin-bottom: 15px;
}


/* TITLE */
.title-contact-form h2 {
    font-family: 'NVNAlpha-Light', sans-serif !important;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.2;
    color: #017077;
    letter-spacing: -0.02em;
    margin: 0;

    /* gradient text nhẹ */
    background: linear-gradient(90deg, #017077, #1ba0e2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.title-contact-form p {
  font-family: 'NVNAlpha-Light', sans-serif !important;
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
    margin-top: 12px;
    margin-bottom: 10px;
    letter-spacing: 0.02em;

    /* giới hạn chiều rộng cho đẹp */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;

    /* hiệu ứng fade nhẹ */
    opacity: 0.9;
}
/* LINE WRAPPER */
.title-contact-form  .title-line {
    margin-top: 0px !important;
}

/* LEFT & RIGHT LINE */
.title-contact-form .title-line .tl-1,
.title-contact-form  .title-line .tl-3 {
    width: 70px;
    height: 2px;
    display: inline-block;
    background: linear-gradient(to right, transparent, #2d8373);
    vertical-align: middle;
}

.title-contact-form  .title-line .tl-3 {
    background: linear-gradient(to left, transparent, #2d8373);
}

/* CENTER DOT */
.title-contact-form .title-line .tl-2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    border-radius: 50%;
    background: #1ba0e2;
    box-shadow: 0 0 10px rgba(27, 160, 226, 0.6);
    vertical-align: middle;

    /* animation nhẹ */
    animation: pulse 1.8s infinite ease-in-out;
}
/* =====================================
CONTACT FORM INPUT
===================================== */

/* INPUT (áp dụng chung form) */
.contact-form-box input,
.contact-form-box textarea {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* BUTTON */
.contact-form-box button,
.contact-form-box input[type="submit"] {
    background: #00B2C1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
}

/* MAP */
.contact-map iframe {
    border-radius: 0;
}
button.btn.btn-submit {
    font-weight: 700;
}
button.btn.btn-submit:hover {
    background: #017077;
    color: #ffffff;
}
/* =====================================
FAQ
===================================== */

.contact-faq{
padding:90px 0;
background:#ffffff;
}

.faq-box{
max-width:900px;
margin:0 auto;
}

.faq-box h3{
font-size:24px;
font-weight:700;
color:#111827;
margin-bottom:12px;
}

.faq-box p{
color:#64748b;
line-height:1.9;
margin-bottom:35px;
padding-bottom:35px;
border-bottom:1px solid #e5e7eb;
}

.faq-box p:last-child{
border-bottom:none;
padding-bottom:0;
}

/* =====================================
MOBILE
===================================== */

@media(max-width:991px){
.contact-form-box{
    margin-top:40px;
}

.title-contact-hero h1{
    font-size:44px;
}
}
@media(max-width:767px){
.contact-hero,
.contact-info,
.contact-form-sec,
.contact-faq{
    padding:70px 0;
}
.title-contact-hero h1{
    font-size:34px;
}
.title-contact-hero p{
    font-size:18px;
}
.contact-form-box{
    padding:30px;
}
.title-contact-form h2{
    font-size:30px;
}
}

/* =====================================
FOOTER
===================================== */

.site-footer{
background:#0f172a;
color:#cbd5e1;
padding:80px 0 50px;
position:relative;
}

/* =====================================
LOGO
===================================== */

.footer-logo{
max-width:190px;
height:auto;
margin-bottom:20px;
}

.footer-brand p{
color:#94a3b8;
line-height:1.9;
font-size:15px;
margin-bottom:25px;
max-width:340px;
}

/* =====================================
TITLES
===================================== */

.footer-menu h4,
.footer-newsletter h4{
color:#ffffff;
font-size:20px;
font-weight:700;
margin-bottom:22px;
}

/* =====================================
MENU
===================================== */

.footer-links{
list-style:none;
margin:0;
padding:0;
}

.footer-links li{
margin-bottom:12px;
margin-left: 20px;
}

.footer-links a{
color:#cbd5e1;
text-decoration:none;
transition:.25s;
font-size:15px;
}

.footer-links a:hover{
color:#34d399;
padding-left:4px;
}

/* =====================================
SOCIAL
===================================== */

.footer-social{
display:flex;
gap:12px;
}

.footer-social a{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
background:rgba(255,255,255,.08);
color:#ffffff;
transition:.3s;
}

.footer-social a:hover{
background:#0f766e;
transform:translateY(-3px);
}

/* =====================================
NEWSLETTER
===================================== */

.footer-newsletter{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:24px;
}

.footer-newsletter p{
color:#94a3b8;
line-height:1.8;
font-size:14px;
margin-bottom:20px;
}

.newsletter-input-group{
display:flex;
flex-direction:column;
gap:12px;
}

.newsletter-input-group input{
width:100%;
height:50px;
border:none;
border-radius:12px;
padding:0 16px;
font-size:15px;
background:#ffffff;
}

.newsletter-input-group input:focus{
outline:none;
box-shadow:0 0 0 4px rgba(15,118,110,.15);
}

.newsletter-input-group button{
height:50px;
border:none;
border-radius:12px;
background:#0f766e;
color:#ffffff;
font-weight:700;
transition:.3s;
}

.newsletter-input-group button:hover{
background:#115e59;
}

/* =====================================
MESSAGE
===================================== */

.newsletter-message{
margin-top:12px;
font-size:14px;
}

/* =====================================
FOOTER BOTTOM
===================================== */

.footer-bottom{
background:#020617;
border-top:1px solid rgba(255,255,255,.08);
padding:18px 0;
}

.footer-bottom p{
margin:0;
color:#94a3b8;
font-size:14px;
letter-spacing:.3px;
}

/* =====================================
MOBILE
===================================== */

@media(max-width:991px){
.footer-brand{
    text-align:center;
    margin-bottom:0px;
}

.footer-brand p{
    margin-left:auto;
    margin-right:auto;
}
.footer-social{
    justify-content:center;
}
}

@media(max-width:767px){
.site-footer{
    padding:60px 0 30px;
}

.footer-menu{
    margin-top:15px;
}

.footer-newsletter{
    margin-top:20px;
}

}