/* ===============================
ABOUT PAGE
================================*/

.about-hero{
background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
url('/assets/images/banner2.webp') center/cover;
padding:120px 20px;
color:#fff;
text-align:center;
}

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

.about-hero h1{
font-size:42px;
margin-bottom:15px;
}

.about-hero p{
font-size:18px;
line-height:1.7;
}

/* SECTION */

.about-section{
padding:30px 20px;
font-size:18px;
line-height:1.8;
}

/* GRID */

.about-grid{
display:flex;
gap:40px;
align-items:stretch;
max-width:1200px;
margin:auto;
}

.about-text{
flex:1;
}

.about-text h2{
font-size:36px;
margin-bottom:20px;
text-align:center;
}

.about-image{
flex:1;
display:flex;
}

.about-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* LIST */

.about-list{
list-style:none;
padding:0;
margin-top:20px;
}

.about-list li{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
font-size:18px;
}

.about-list i{
color:#ff6600;
font-size:20px;
}

/* TITLE */

.section-title{
text-align:center;
font-size:34px;
margin-bottom:35px;
color:#0b3d91;
}

.section-title:after{
content:"";
width:70px;
height:4px;
background:#ff6600;
display:block;
margin:12px auto 0;
border-radius:3px;
}

/* VALUES */

.about-values{
background:#f5f7fa;
padding:30px 20px;
}

.values-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

.value-card{
background:#fff;
padding:30px;
text-align:center;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
transition:0.3s;
}

.value-card:hover{
transform:translateY(-6px);
box-shadow:0 14px 30px rgba(0,0,0,0.18);
}

.value-card i{
font-size:36px;
color:#ff6600;
margin-bottom:15px;
}

/* CAPACITY */

.about-capacity{
padding:30px 20px;
}

.capacity-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

/* STATS */

.about-stats{
padding:5px 20px;
background:#f5f7fa;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
max-width:1200px;
margin:auto;
text-align:center;
}

.stat-box{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.stat-box h3{
font-size:40px;
color:#0d6efd;
margin-bottom:10px;
}

/* FIX MOBILE GIÁ TRỊ CỐT LÕI */

@media (max-width:768px){

.values-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:20px;
padding:0 10px;
}

.value-card{
width:100% !important;
}

.capacity-grid{
display:grid !important;
grid-template-columns:1fr !important;
}

}/* FIX MOBILE ABOUT GRID */

@media (max-width:768px){

.about-grid{
flex-direction:column !important;
}

.about-image{
width:100%;
margin-bottom:20px;
}

.about-text{
width:100%;
}

}
/* PROJECTS */

.about-projects{
padding:5px 20px;
background:#f5f7fa;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

.project-card{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
text-align:center;
}

.project-card img{
width:100%;
height:200px;
object-fit:cover;
}

.project-card h3{
margin:15px 0 10px;
}

/* PROCESS */

.about-process{
padding:5px 20px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1000px;
margin:auto;
text-align:center;
}

.process-box{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.process-box h3{
font-size:32px;
color:#ff6600;
margin-bottom:10px;
}

/* MOBILE */

@media(max-width:768px){

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

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

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

.stats-grid{
grid-template-columns:1fr 1fr;
gap:15px;
}

}