/* hero */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Be Vietnam Pro',sans-serif;

background:#f5f7f5;

color:#222;

line-height:1.6;

overflow-x:hidden;

}

img{
max-width:100%;
display:block;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}
.hero{

position:relative;

min-height:100vh;
padding: 180px 0;
display:flex;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

top:0;
left:0;

}

.overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
135deg,
rgba(0,0,0,.45 ),
rgba(20,83,45,.55)
);

z-index:1;

}
.hero-wrap{

position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

flex-wrap:wrap;

}
.hero-left{
flex:1;
color:white;
text-shadow:
0 2px 10px rgba(0,0,0,.4);
position:relative;
z-index:2;
}

.logo{
width:180px;
margin-bottom:25px;
}

.hero-tag{

display:inline-block;

padding:10px 18px;

background:rgba(255,255,255,.15);

border-radius:50px;

margin-bottom:25px;

font-size:14px;

backdrop-filter:blur(10px);

}

.hero-left h1{

font-size:64px;

font-weight:800;

line-height:1.5;

margin-bottom:20px;
text-shadow:
0 4px 25px rgba(0,0,0,.65);

}

.hero-left p{

font-size:20px;

margin-bottom:30px;

max-width:600px;

}

.hero-list{

list-style:none;

}

.hero-list li{

margin-bottom:14px;

font-size:18px;
.hero-list li{

text-shadow:
0 2px 10px rgba(0,0,0,.5);

}
}
.form-box{

width:420px;

background:white;

padding:40px;

border-radius:30px;

box-shadow:
0 25px 80px rgba(0,0,0,.35);
background:
rgba(255,255,255,.92);

backdrop-filter:
blur(18px);

border:
1px solid rgba(255,255,255,.25);

}

.form-box h2{

font-size:28px;

margin-bottom:25px;

text-align:center;

color:#14532d;

}

.form-box input,
.form-box select{

width:100%;

height:58px;

padding:0 18px;

margin-bottom:18px;

border:none;

background:#f3f4f6;

border-radius:16px;

font-size:16px;

}

.form-box button{

width:100%;

height:60px;

border:none;

border-radius:18px;

background:
linear-gradient(
135deg,
#166534,
#22c55e
);
box-shadow:
0 15px 35px rgba(34,197,94,.35);
color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

}
.section{
    background:white;
padding:100px 0;
}

.gray{
background:#edf7ed;
}

.title{

font-size:42px;

text-align:center;

margin-bottom:60px;

color:#14532d;

font-weight:800;

}
.info-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.info-card{

background:white;

padding:24px;

border-radius:24px;

box-shadow:
0 10px 30px rgba(0,0,0,.06);

}

.info-card span{

display:block;

margin-bottom:10px;

color:#777;

}

.info-card strong{

font-size:22px;

color:#14532d;

}
@media(max-width:768px){
    .gallery{

grid-template-columns:1fr;

}

.gallery img{

height:240px;

}

.hero-wrap,
.detail-wrap,
.location{

flex-direction:column;

}

.hero-left h1{
font-size:42px;
}

.form-box{
width:100%;
}

.info-grid{
grid-template-columns:1fr;
}

.title{
font-size:32px;
}

.section{
padding:70px 0;
}

}
/* CHI TIẾT DỰ ÁN */
.detail-wrap{

display:flex;

align-items:center;

gap:60px;

}

.detail-image{
flex:1;
}

.detail-image img{

border-radius:30px;

box-shadow:
0 20px 50px rgba(0,0,0,.15);

}

.detail-content{
flex:1;
}

.detail-content h3{

font-size:38px;

margin-bottom:20px;

color:#14532d;

}

.detail-content p{

margin-bottom:25px;

font-size:18px;

color:#555;

}

.detail-content ul{

list-style:none;

}

.detail-content li{

margin-bottom:16px;

font-size:18px;

}
/* ẢNH DỰ ÁN */
.gallery{

display:grid;

grid-template-columns:
1fr 1fr;

gap:25px;

}
.gallery img{

width:100%;

aspect-ratio:3/4;

object-fit:cover;

border-radius:28px;

box-shadow:
0 12px 35px rgba(0,0,0,.12);

transition:.4s;
.gallery img:hover{

transform:scale(1.03);

}
}
/* LIÊN HỆ */
.contact{

padding:100px 0;

background:
linear-gradient(
135deg,
#14532d,
#22c55e
);

text-align:center;

color:white;

}

.contact h2{

font-size:48px;

margin-bottom:20px;

}

.contact p{

margin-bottom:14px;

font-size:18px;

}

.contact button{

margin-top:25px;

width:280px;

height:60px;

border:none;

border-radius:18px;

background:white;

color:#14532d;

font-size:18px;

font-weight:700;

cursor:pointer;

}
/* =========================
FLOATING BUTTON
========================= */

.hotline-float,
.zalo-float{

position:fixed;

right:20px;

width:60px;
height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

color:white;

text-decoration:none;

z-index:999;

box-shadow:
0 10px 30px rgba(0,0,0,.2);

}

.hotline-float{

bottom: 120px;

background:#22c55e;

}

.zalo-float{

bottom: 45px;

background:#14532d;

}
/* =========================
HEADER
========================= */

.header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

padding: 8px 0;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

}

.nav{

display:flex;

align-items:center;

justify-content:space-between;

}

.nav-logo{

width:100px;

}

.menu{

display:flex;

gap: 16px;

}

.menu a{

color:white;

text-decoration:none;

font-weight:600;

}
/* ANIMATION */
.gallery img:hover{

transform:
translateY(-8px)
scale(1.02);

}
/* BUTTON*/
button{

transition:.3s;

}

button:hover{

transform:translateY(-3px);

}
/* SECTION BO TRÒN */
.section{

border-radius:40px;

margin:30px;

overflow:hidden;
box-shadow:
0 20px 60px rgba(0,0,0,.08);
}
/* LOADING BUTTON */
button{

transition:.3s;

}

button:hover{

transform:translateY(-3px);

}
/* =========================
SUCCESS POPUP
========================= */

.success-popup{

position:fixed;

width:100%;
height:100%;

background:
rgba(0,0,0,.45);

top:0;
left:0;

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}

.success-box{

width:90%;
max-width:420px;

background:white;

padding:40px;

border-radius:30px;

text-align:center;

box-shadow:
0 20px 60px rgba(0,0,0,.2);

animation:popup .35s ease;

}

.success-box h3{

font-size:32px;

margin-bottom:15px;

color:#14532d;

}

.success-box p{

font-size:17px;

color:#555;

margin-bottom:25px;

line-height:1.7;

}

.success-box button{

width:100%;

height:55px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
#166534,
#22c55e
);

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

}

@keyframes popup{

from{

transform:
translateY(40px);

opacity:0;

}

to{

transform:
translateY(0);

opacity:1;

}

}
/* MOBILE BAR */

.mobile-bar{

position:fixed;

bottom:0;

left:0;

width:100%;

display:flex;

z-index:9999;

}

.mobile-bar a{

flex:1;

height:60px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-weight:700;

color:white;

}

.mobile-bar a:first-child{

background:#14532d;

}

.mobile-bar a:last-child{

background:#22c55e;

}
/* PROJECT SECTION */

.project-wrap{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

margin-top:60px;

}

.project-info{

flex:1.2;

}

.project-image{

flex:1;

display:flex;

justify-content:center;


}

.project-image img{

width:100%;

max-width:700px;

border-radius:32px;

object-fit:cover;

box-shadow:
0 20px 60px rgba(0,0,0,.15);

}

/* INFO CARD */

.info-card{

background:white;

padding: 30px;

border-radius:32px;

box-shadow:
0 15px 50px rgba(0,0,0,.08);

}

.info-card h2{

font-size:24px;

margin-bottom:10px;

color:#14532d;

}

.info-card .sub{

font-size:18px;

color:#666;

margin-bottom:15px;

}

.info-card .number{

font-size:22px;

line-height:1.4;

margin-bottom:30px;

color:#111;

}

.info-card h4{

font-size:24px;

margin-top:30px;

margin-bottom:15px;

color:#14532d;

}

.info-card ul{

padding-left:20px;

}

.info-card li{

font-size:18px;

line-height:1.8;

margin-bottom:8px;

color:#444;

}

.note{

margin-top:25px;

font-size:15px;

color:#888;

}

/* LINE */

.line{

width:120px;

height:5px;

border-radius:999px;

background:
linear-gradient(
90deg,
#14532d,
#22c55e
);

margin-bottom:30px;

}
@media(max-width:768px){

.project-wrap{

flex-direction:column;

gap:30px;

}

.project-info{

width:100%;

}

.project-image{

width:100%;

}

.info-card{

padding:30px;

}

.info-card h2{

font-size:24px;

line-height:1.4;

word-break:normal;

}

.info-card .number{

font-size:18px;

line-height:1.6;

}

.info-card h4{

font-size:18px;

}

.info-card li{

font-size:15px;

line-height:1.7;

}

.project-image img{

width:100%;

border-radius:24px;

}

}