:root{

    --primary:#176B3F;
    --primary-light:#6CBF6A;
    --background:#F7F5EF;
    --white:#FFFFFF;
    --danger:#D32F2F;
    --text:#333333;

}
html{

scroll-behavior:smooth;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Be Vietnam Pro',sans-serif;
}

body{

background:#ffffff;

color:#333;

overflow-x:hidden;

}

.container{

width:90%;
margin:auto;

}

.top-bar{

background:#176b3f;

color:white;

padding:12px 0;

}

.top-bar .container{

display:flex;

justify-content:space-between;

}
/*--hesder 2 --*/
.header{

position:fixed;

top:0;

left:0;

width:100%;

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

backdrop-filter:blur(10px);

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

z-index:999;

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

}

.logo img{

height:60px;
transform:scale(1.08);
}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

text-decoration:none;

color:var(--text);

font-weight:600;

transition:.3s;

}

nav a:hover{

color:var(--primary);

}
/*--header1
header{

position:sticky;

top:0;

z-index:999;

background:white;

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

transition:.4s;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

nav ul{

display:flex;

gap:30px;

list-style:none;

}

nav a{

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

padding:10px;

}

nav a:hover{

color:#1f7a43;

}
*/
.btn{

background:#1f7a43;

padding:15px 28px;

color:white;

border-radius:50px;
font-weight: bold;

text-decoration:none;
transition:.3s;

}
.btn:hover{

transform:translateY(-3px);

background:#2fa95d;

}
/*banner1
.hero{

min-height:90vh;

display:flex;

align-items:center;

background:

linear-gradient(

135deg,

#eefaf0,

#dff5e3,

#f5fff8);

}
*/
/*banner2*/
.hero{

padding:170px 0 120px;

background:linear-gradient(135deg,#f8fff8,#eef8ee);

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero h1{

font-size:54px;

color:var(--primary);

margin-bottom:20px;

}

.hero h3{

font-size:26px;

font-weight:500;

margin-bottom:20px;

}

.hero p{

line-height:32px;

margin-bottom:35px;

}

.hero-image{

text-align:center;
transform:scale(1.08);
}

.hero-image img{

max-width:420px;

width:100%;

transition:.4s;

}

.hero-image img:hover{

transform:scale(1.05);

}
.hero-btn-outline{

display:inline-block;

padding:16px 40px;

border:2px solid var(--primary);

color:var(--primary);

border-radius:50px;

margin-left:15px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.hero-btn-outline:hover{

background:var(--primary);

color:white;

}
.hero-box{

display:flex;

justify-content:space-between;

align-items:center;

}

.left{

width:45%;

}

.right{

width:45%;

text-align:center;

}

.right img{

max-width:470px;

animation:float 4s ease-in-out infinite;

filter:drop-shadow(0 25px 35px rgba(0,0,0,.18));
transform:scale(1.08);

}


.left h1{

font-size:68px;

font-weight:800;

line-height:1.1;

color:#176b3f;

}

.left span{

display:block;

color:#c72c2c;

}

.hero-btn{

display:inline-block;

margin-top:30px;

padding:18px 40px;

background:#176b3f;

color:white;

border-radius:50px;

text-decoration:none;

font-size:18px;

font-weight:bold;

transition:.3s;

}
.hero-btn:hover{

background:#24a159;

transform:translateY(-5px);

}
.logo h2{

font-size:30px;

font-weight:800;

color:#1f7a43;

}

.logo span{

display:block;

font-size:18px;

letter-spacing:4px;

color:#d18d00;

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

FEATURES

========================*/

.features{

margin-top:-60px;

position:relative;

z-index:10;

}

.feature-box{

display:grid;

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

gap:25px;

}

.feature-item{

background:#fff;

padding:35px;

text-align:center;

border-radius:20px;

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

transition:.35s;

}

.feature-item:hover{

transform:translateY(-10px);

}

.icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:#e7f8eb;

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

margin-bottom:20px;

}

.feature-item h3{

margin-bottom:15px;

font-size:22px;

color:#1f7a43;

}

.feature-item p{

color:#666;

line-height:28px;

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

BENEFITS

========================*/

.benefits{

padding:90px 0;

background:#f8fff8;

}

.title{

text-align:center;

margin-bottom:60px;

}

.title h2{

font-size:42px;

color:#176b3f;

margin-bottom:15px;

}

.title p{

color:#777;

font-size:18px;

}

.benefit-grid{

display:grid;

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

gap:30px;

}

.benefit-card{

background:#fff;

padding:25px;

border-radius:20px;

text-align:center;

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

transition:.4s;

}

.benefit-card:hover{

transform:translateY(-12px);

}

.benefit-card img{

width:150px;

height:150px;

object-fit:cover;

border-radius:50%;

margin-bottom:20px;

transform:scale(1.08);

}

.benefit-card h3{

font-size:22px;

color:#176b3f;

margin-bottom:15px;

}

.benefit-card p{

color:#666;

line-height:28px;

}
/*================ phần tại sao =================*/

.why{

padding:90px 0;

background:white;

}

.why-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.why-item{

display:flex;

align-items:center;

gap:25px;

padding:30px;

border-radius:18px;

background:#f8fff8;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.35s;

}

.why-item:hover{

transform:translateY(-8px);

background:#176b3f;

color:white;

}

.why-item:hover h3{

color:white;

}

.why-item:hover p{

color:#e7ffe7;

}

.why-icon{

width:70px;

height:70px;

background:#176b3f;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

flex-shrink:0;

}

.why-item h3{

margin-bottom:10px;

color:#176b3f;

font-size:24px;

}

.why-item p{

color:#666;

line-height:28px;

}
/*================ FEEDBACK =================*/

.feedback{

padding:100px 0;

background:#f5fbf6;

}

.feedback-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.feedback-card{

background:white;

padding:30px;

border-radius:20px;

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

transition:.35s;

}

.feedback-card:hover{

transform:translateY(-10px);

}

.stars{

font-size:22px;

margin-bottom:20px;

}

.feedback-card p{

line-height:30px;

color:#555;

margin-bottom:25px;

font-style:italic;

}

.customer{

display:flex;

align-items:center;

gap:15px;

}

.customer img{

width:65px;

height:65px;

border-radius:50%;

object-fit:cover;

transform:scale(1.08);
}

.customer h4{

color:#176b3f;

margin-bottom:5px;

}

.customer span{

color:#777;

font-size:14px;

}
/*===============FEEDBACK-2=======*/
.feedback{

padding:100px 0;

background:#f8fff8;

}

.feedback-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.feedback-card{

background:white;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.feedback-card:hover{

transform:translateY(-10px);

}

.feedback-card img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;
transform:scale(1.08);

}

.feedback-card h3{

color:#176B3F;

margin-bottom:10px;

}

.star{

color:#FFD700;

font-size:22px;

margin-bottom:10px;

}

.feedback-card span{

display:block;

color:#777;

margin-bottom:15px;

font-size:14px;

}

.feedback-card p{

line-height:28px;

color:#555;

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

.stats{

padding:90px 0;

background:linear-gradient(135deg,#176b3f,#2d9d57);

}

.stats-grid{

display:grid;

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

gap:25px;

}

.stat-box{

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

padding:40px;

text-align:center;

border-radius:20px;

backdrop-filter:blur(8px);

transition:.4s;

}

.stat-box:hover{

transform:translateY(-8px);

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

}

.stat-box h2{

font-size:52px;

color:white;

margin-bottom:15px;

}

.stat-box p{

color:white;

font-size:18px;

}

:root{

--primary:#176b3f;

--secondary:#2ea85c;

--gold:#d4af37;

--light:#f8fff8;

--dark:#2d2d2d;

}


.zalo-btn{

position:fixed;

right:25px;

bottom:30px;

width:65px;

height:65px;

border-radius:50%;

overflow:hidden;

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

z-index:999;

animation:pulse 2s infinite;

}
.zalo-btn img{

width:100%;

height:100%;

object-fit:cover;
transform:scale(1.08);
}
.call-btn{

position:fixed;

left:25px;

bottom:30px;

width:65px;

height:65px;

background:#176b3f;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:white;

text-decoration:none;

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

z-index:999;

animation:pulse 2s infinite;

}
#topBtn{

position:fixed;

right:25px;

bottom:110px;

width:55px;

height:55px;

border:none;

background:#176b3f;

color:white;

font-size:24px;

border-radius:50%;

cursor:pointer;

display:none;

z-index:999;

}
/*================ PROCESS =================*/

.process{

padding:100px 0;

background:white;

}

.process-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-top:60px;

}

.process-image img{

width:100%;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.12);
transform:scale(1.08);

}

.step{

display:flex;

gap:20px;

margin-bottom:30px;

align-items:flex-start;

}

.step span{

width:60px;

height:60px;

background:#176b3f;

color:white;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:22px;

font-weight:bold;

flex-shrink:0;

}

.step h3{

margin-bottom:10px;

color:#176b3f;

}

.step p{

line-height:28px;

color:#666;

}
/*================ BRAND STORY =================*/

.brand-story{

padding:100px 0;

background:#f9fff9;

}

.brand-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.brand-image img{

width:100%;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.12);
transform:scale(1.08);

}

.brand-content h2{

font-size:42px;

color:#176b3f;

margin-bottom:25px;

}

.brand-content p{

line-height:30px;

margin-bottom:20px;

color:#555;

}

.brand-values{

display:grid;

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

gap:15px;

margin:35px 0;

}

.brand-values div{

background:white;

padding:15px;

border-radius:12px;

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

transition:.3s;

}

.brand-values div:hover{

background:#176b3f;

color:white;

}
/*================ PRODUCT =================*/

.product{

padding:100px 0;

background:white;

}

.product-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.product-image{

text-align:center;
transform:scale(1.08);

}

.product-image img{

width:100%;

max-width:450px;

transition:.4s;
transform:scale(1.08);

}

.product-image img:hover{

transform:scale(1.05);

}

.product-info h2{

font-size:42px;

color:#176b3f;

margin-bottom:20px;

}

.rating{

font-size:26px;

color:#FFD700;

margin-bottom:25px;

}

.product-desc{

line-height:32px;

color:#666;

margin-bottom:30px;

}

.product-info ul{

list-style:none;

margin-bottom:35px;

}

.product-info li{

margin-bottom:15px;

font-size:18px;

}

.price{

font-size:40px;

font-weight:bold;

color:#e53935;

margin-bottom:35px;

}

.buy-btn{

display:inline-block;

padding:18px 45px;

background:#176b3f;

color:white;

text-decoration:none;

border-radius:50px;

font-size:20px;

font-weight:bold;

transition:.3s;

}

.buy-btn:hover{

background:#0d4d2c;

transform:translateY(-3px);

}
/*================ PAIN =================*/

.pain{

padding:100px 0;

background:#f8fff8;

}

.pain-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}

.pain-item{

background:white;

padding:30px;

border-radius:18px;

font-size:20px;

font-weight:500;

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

transition:.3s;

}

.pain-item:hover{

transform:translateY(-8px);

border-left:6px solid #176b3f;

}
.solution{

padding:80px 0;

background:white;

text-align:center;

}
/*================ ORDER =================*/

.order{

padding:100px 0;

background:#f7f5ef;

}

.order-form{

max-width:700px;

margin:auto;

}

.form-group{

margin-bottom:25px;

}

.form-group input,
.form-group textarea,
.form-group select{

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

outline:none;

transition:.3s;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

border-color:var(--primary);

box-shadow:0 0 10px rgba(23,107,63,.15);

}

textarea{

height:150px;

resize:none;

}

.order-form button{

width:100%;

padding:18px;

border:none;

background:var(--primary);

color:white;

font-size:18px;

font-weight:bold;

border-radius:50px;

cursor:pointer;

transition:.3s;

}

.order-form button:hover{

background:#0d4d2c;

}
.secure{

margin-top:20px;

text-align:center;

font-size:14px;

color:#777;

}
/*================ FAQ =================*/

.faq{

padding:100px 0;

background:#ffffff;

}

.faq-item{

margin-bottom:20px;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.faq-question{

width:100%;

padding:22px;

border:none;

background:#176B3F;

color:white;

font-size:18px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

}

.faq-answer{

display:none;

padding:25px;

background:#f8fff8;

line-height:30px;

}

.faq-answer.active{

display:block;

}
/*================ SCROLL ANIMATION =================*/

.hidden{

opacity:0;

transform:translateY(80px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(50px) scale(.95);

}
/*================ GALLERY =================*/

.gallery{

padding:100px 0;

background:#ffffff;

}

.gallery-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}

.gallery-item{

overflow:hidden;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

cursor:pointer;

}

.gallery-item img{

width:100%;

height:300px;

object-fit:cover;

transition:.4s;

display:block;

}

.gallery-item:hover img{

transform:scale(1.08);

}
/*================ LIGHTBOX =================*/

.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.lightbox img{

max-width:90%;

max-height:85%;

border-radius:20px;

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

animation:zoom .35s;

}

@keyframes zoom{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.close{

position:absolute;

top:30px;

right:40px;

font-size:45px;

color:white;

cursor:pointer;

}
.lightbox{

opacity:0;

visibility:hidden;

transition:.3s;

display:flex;

}

.lightbox.active{

opacity:1;

visibility:visible;

}