*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,'Helvetica Neue',sans-serif;
scroll-behavior:smooth;
}

body{
background:#fffdf5;
color:#111;
overflow-x:hidden;
}

/* =========================
BACKGROUND
========================= */

.bg-blur1{
position:fixed;
top:-250px;
left:-250px;
width:700px;
height:700px;
background:#ffd84d;
opacity:.25;
filter:blur(180px);
z-index:-2;
}

.bg-blur2{
position:fixed;
bottom:-250px;
right:-250px;
width:700px;
height:700px;
background:#ffb300;
opacity:.18;
filter:blur(180px);
z-index:-2;
}

/* =========================
CONTAINER
========================= */

.container{
max-width:1450px;
margin:auto;
padding:0 24px;
}

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

header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
padding:18px 0;
}

.navbar{
background:rgba(255,255,255,.8);
backdrop-filter:blur(20px);
border-radius:30px;
padding:18px 28px;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.logo{
display:flex;
align-items:center;
gap:14px;
font-size:28px;
font-weight:800;
}

.logo img{
width:58px;
height:58px;
border-radius:18px;
object-fit:cover;
}

.nav-links{
display:flex;
gap:28px;
}

.nav-links a{
text-decoration:none;
color:#333;
font-weight:600;
}

.nav-right{
display:flex;
gap:14px;
}

.btn{
padding:14px 24px;
border:none;
border-radius:18px;
font-weight:700;
cursor:pointer;
transition:.25s;
font-size:15px;
}

.btn:hover{
transform:translateY(-3px);
}

.btn-yellow{
background:linear-gradient(135deg,#ffd84d,#ffb300);
color:#111;
box-shadow:0 10px 24px rgba(255,184,0,.25);
}

.btn-white{
background:#fff;
color:#111;
border:1px solid rgba(0,0,0,.08);
}

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

.hero{
padding-top:180px;
padding-bottom:120px;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 620px;
gap:70px;
align-items:center;
}

.hero-title{
font-size:86px;
font-weight:800;
line-height:.95;
margin-bottom:30px;
}

.hero-title span{
color:#f59e0b;
}

.hero-desc{
font-size:20px;
line-height:2;
color:#555;
margin-bottom:40px;
max-width:760px;
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:16px;
}

/* =========================
PHONE
========================= */

.phone-wrap{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:900px;
overflow:visible;
}

.phone-bg{
position:absolute;
width:620px;
height:620px;
border-radius:50%;
background:linear-gradient(135deg,#ffd84d,#ffb300);
opacity:.15;
}

.phone{
width:390px;
background:#ffd84d;
padding:14px;
border-radius:48px;
box-shadow:0 40px 80px rgba(0,0,0,.18);
position:relative;
z-index:2;
}

.phone-screen{
background:#fafafa;
border-radius:36px;
overflow:hidden;
height:780px;
min-height:780px;
display:flex;
align-items:stretch;
justify-content:center;
}

.phone-header{
background:#ffd84d;
padding:24px;
font-size:30px;
font-weight:800;
}

.phone-content{
padding:22px;
}

.card{
background:#fff;
padding:22px;
border-radius:24px;
margin-bottom:18px;
box-shadow:0 10px 20px rgba(0,0,0,.05);
}

.card h3{
font-size:22px;
margin-bottom:10px;
}

.card p{
line-height:1.9;
color:#666;
}

.price{
font-size:44px;
font-weight:800;
margin:16px 0;
}

.sale{
color:#16a34a;
font-weight:700;
margin-bottom:16px;
}

.choose-btn{
width:100%;
padding:16px;
border:none;
border-radius:18px;
background:linear-gradient(135deg,#ffd84d,#ffb300);
font-weight:700;
cursor:pointer;
}

/* FLOAT */

.float-box{
position:absolute;
background:#fff8da;
padding:20px;
border-radius:28px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
width:220px;
z-index:5;
}

.float1{
left:-35px;
top:150px;
}

.float2{
right:-35px;
bottom:170px;
}

.float-box h4{
margin-bottom:10px;
font-size:18px;
}

.float-box p{
font-size:14px;
line-height:1.8;
color:#666;
}

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

.section{
padding:120px 0;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title h2{
font-size:68px;
margin-bottom:18px;
}

.section-title p{
font-size:18px;
color:#666;
}

/* =========================
SERVICES
========================= */

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
}

.service{
background:#fff;
padding:34px;
border-radius:34px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:.25s;
}

.service:hover{
transform:translateY(-8px);
}

.service-icon{
width:84px;
height:84px;
border-radius:24px;
background:#fff5cc;
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
margin-bottom:22px;
}

.service h3{
font-size:28px;
margin-bottom:14px;
}

.service p{
line-height:1.9;
color:#666;
}

/* =========================
HOW
========================= */

.how-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
}









.how-card h3{
font-size:32px;
margin-bottom:14px;
}

.how-card p{
line-height:1.9;
color:#5d4500;
}

/* =========================
INSTALL
========================= */

.install-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
}

.install-card{
background:#fff;
padding:26px;
border-radius:34px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.install-img{
width:100%;
height:260px;
border-radius:24px;
background:#fff8da;
border:3px dashed rgba(0,0,0,.12);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:700;
margin-bottom:22px;
}

.install-card h3{
font-size:30px;
margin-bottom:14px;
}

.install-card p{
line-height:1.9;
color:#666;
}

/* =========================
DRIVER
========================= */

.driver-box{
background:linear-gradient(135deg,#ffd84d,#ffb300);
padding:80px;
border-radius:50px;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.driver-box h2{
font-size:74px;
margin-bottom:22px;
}

.driver-box p{
line-height:2;
font-size:18px;
margin-bottom:30px;
color:#5f4300;
}

.driver-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.driver-item{
background:rgba(255,255,255,.4);
padding:20px;
border-radius:20px;
}

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

.feedback-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:28px;
}

.feedback{
background:#fff;
padding:28px;
border-radius:34px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.feedback-top{
display:flex;
align-items:center;
gap:16px;
margin-bottom:18px;
}

.feedback-top img{
width:64px;
height:64px;
border-radius:50%;
object-fit:cover;
}

.feedback-name{
font-size:20px;
font-weight:700;
}

.feedback-stars{
color:#f59e0b;
}

.feedback p{
line-height:1.9;
color:#666;
}

/* =========================
CTA
========================= */

.cta{
background:linear-gradient(135deg,#ffd84d,#ffb300);
padding:90px;
border-radius:50px;
text-align:center;
}

.cta h2{
font-size:76px;
margin-bottom:24px;
}

.cta p{
font-size:20px;
line-height:2;
max-width:900px;
margin:auto;
margin-bottom:40px;
}

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

footer{
padding:100px 0 40px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:60px;
}

.footer-grid h3{
font-size:24px;
margin-bottom:18px;
}

.footer-grid p{
line-height:2;
color:#555;
}

.footer-grid a{
display:block;
margin-bottom:12px;
text-decoration:none;
color:#555;
}

.footer-bottom{
margin-top:60px;
padding-top:24px;
border-top:1px solid rgba(0,0,0,.08);
text-align:center;
color:#777;
}

/* =========================
CONTACT FLOAT
========================= */

.contact-float{
position:fixed;
right:18px;
bottom:18px;
display:flex;
flex-direction:column;
gap:14px;
z-index:9999;
}

.contact-btn{
width:64px;
height:64px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
text-decoration:none;
box-shadow:0 10px 24px rgba(0,0,0,.18);
transition:.25s;
}

.contact-btn:hover{
transform:scale(1.1);
}

.phone-btn{background:#ffb300;}
.zalo-btn{
background:#fff;
}

.zalo-btn img{
width:30px;
height:30px;
object-fit:contain;
display:block;
}
.fb-btn{background:#1877f2;}
.mess-btn{background:#7c3aed;}
.tt-btn{background:#000;}

/* =========================
LIVE FEEDBACK
========================= */

.live-feedback{
position:fixed;
left:20px;
bottom:20px;
z-index:99999;
display:flex;
flex-direction:column;
gap:12px;
pointer-events:none;
}

.live-item{
background:white;
padding:16px 18px;
border-radius:22px;
box-shadow:0 16px 30px rgba(0,0,0,.12);
display:flex;
align-items:center;
gap:14px;
width:340px;
animation:livePop 10s ease forwards;
overflow:hidden;
}

.live-avatar{
width:56px;
height:56px;
border-radius:50%;
object-fit:cover;
}

.live-content{
flex:1;
}

.live-content h4{
font-size:16px;
margin-bottom:6px;
}

.live-content p{
font-size:14px;
line-height:1.6;
color:#666;
}

.live-price{
font-weight:700;
color:#16a34a;
}

@keyframes livePop{

0%{
opacity:0;
transform:translateY(40px) scale(.8);
}

10%{
opacity:1;
transform:translateY(0) scale(1);
}

85%{
opacity:1;
transform:translateY(0);
}

100%{
opacity:0;
transform:translateY(20px);
}

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

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

.hero-left{
text-align:center;
}

.hero-buttons{
justify-content:center;
}

.driver-box{
grid-template-columns:1fr;
}

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

}

@media(max-width:768px){

.nav-links{
display:none;
}

.hero-title{
font-size:56px;
}

.section-title h2,
.driver-box h2,
.cta h2{
font-size:42px;
}

.phone{
width:100%;
max-width:380px;
}

.driver-list{
grid-template-columns:1fr;
}

.float1,
.float2{
display:none;
}

}



.phone-custom-image{
width:100%;
height:100%;
min-height:100%;
object-fit:cover;
object-position:top center;
border-radius:32px;
display:block;
}



.store-btn{
padding:0;
background:transparent;
border:none;
box-shadow:none;
}

.store-badge{
height:54px;
width:auto;
display:block;
object-fit:contain;
}

.store-btn:hover{
transform:translateY(-3px);
}


/* ===== HERO BENEFIT LIST - UPDATED ===== */
.float-box{
display:none !important;
}

.hero-desc{
margin-bottom:22px;
}

.hero-benefits{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin:0 0 34px 0;
max-width:760px;
}

.hero-benefit{
display:flex;
align-items:flex-start;
gap:12px;
background:rgba(255,255,255,.72);
border:1px solid rgba(0,0,0,.06);
box-shadow:0 8px 22px rgba(0,0,0,.04);
border-radius:18px;
padding:14px 16px;
font-size:16px;
font-weight:600;
line-height:1.55;
color:#333;
}

.hero-benefit span{
font-size:22px;
line-height:1.2;
min-width:28px;
text-align:center;
}

.hero-benefit strong{
color:#111;
}

@media(max-width:768px){
.hero-benefits{
max-width:100%;
}
.hero-benefit{
font-size:14px;
padding:12px 14px;
}
}



.phone-wrap{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:900px;
overflow:visible;
}

.phone{
width:390px;
background:#ffd84d;
padding:14px;
border-radius:48px;
box-shadow:0 40px 80px rgba(0,0,0,.18);
position:relative;
z-index:2;
overflow:hidden;
}

.phone-screen{
background:#fafafa;
border-radius:36px;
overflow:hidden;
height:780px;
position:relative;
}

.phone-custom-image{
width:100%;
height:100%;
object-fit:cover;
object-position:top center;
display:block;
}





.how-card h3,
.how-card p,



@media(max-width:768px){


}



/* ===== FIX HOW SECTION CARD BACKGROUND + EQUAL IMAGES ===== */

.how-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
align-items:stretch;
}

.how-card{
background:linear-gradient(135deg,#ffd84d,#ffb300) !important;
padding:26px !important;
padding-top:120px !important;
border-radius:36px !important;
position:relative !important;
overflow:hidden !important;
min-height:720px;
box-shadow:none;
}

.how-number{
position:absolute !important;
right:22px !important;
top:22px !important;
width:82px !important;
height:82px !important;
border-radius:50% !important;
background:#111 !important;
color:#ffd84d !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:46px !important;
font-weight:900 !important;
line-height:1 !important;
z-index:5 !important;
box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
border:4px solid rgba(255,255,255,.75) !important;
pointer-events:none !important;
opacity:1 !important;
}

.how-image{
width:100% !important;
height:460px !important;
border-radius:28px !important;
background:#fff7d8 !important;
border:3px dashed rgba(0,0,0,.12) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:18px !important;
font-weight:700 !important;
margin-bottom:22px !important;
overflow:hidden !important;
padding:12px !important;
}

.how-image img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center !important;
border-radius:22px !important;
display:block !important;
background:#fff !important;
}

.how-card h3{
font-size:30px !important;
margin-bottom:14px !important;
position:relative;
z-index:2;
}

.how-card p{
line-height:1.9 !important;
color:#5d4500 !important;
position:relative;
z-index:2;
}

@media(max-width:768px){
.how-card{
min-height:auto;
padding:22px !important;
padding-top:105px !important;
}
.how-image{
height:430px !important;
}
.how-number{
width:68px !important;
height:68px !important;
font-size:38px !important;
}
}


/* ===== FIX HOW STEP IMAGE FULL WIDTH ===== */
.how-image{
padding:0 !important;
background:#fff7d8 !important;
}

.how-image img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:top center !important;
border-radius:24px !important;
background:transparent !important;
}


/* ===== FINAL BUTTON + MOBILE OPTIMIZATION ===== */

a{
text-decoration:none;
}

.btn-link{
display:inline-flex;
align-items:center;
justify-content:center;
}

.hero-buttons,
.nav-right{
align-items:center;
}

.store-link{
height:58px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:16px;
overflow:hidden;
background:#111;
box-shadow:0 10px 22px rgba(0,0,0,.12);
transition:.25s;
}

.store-link:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.store-badge{
height:58px !important;
width:auto !important;
display:block;
object-fit:contain;
}

.ride-cta,
.web-cta{
height:58px;
padding:0 28px;
border-radius:18px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
font-size:16px;
font-weight:800;
line-height:1;
white-space:nowrap;
transition:.25s;
box-shadow:0 10px 22px rgba(0,0,0,.10);
}

.ride-cta{
background:#111;
color:#ffd84d;
border:2px solid #ffd84d;
}

.ride-cta i{
font-size:22px;
color:#ffd84d;
}

.web-cta{
background:linear-gradient(135deg,#ffd84d,#ffb300);
color:#111;
border:2px solid rgba(0,0,0,.06);
}

.web-cta i{
font-size:21px;
color:#111;
}

.web-cta-white{
background:#fff;
border:1px solid rgba(0,0,0,.08);
}

.ride-cta:hover,
.web-cta:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(0,0,0,.16);
}

.ride-cta-small{
height:52px;
padding:0 24px;
font-size:15px;
}

/* Header responsive fix */
@media(max-width:1100px){
.navbar{
gap:16px;
}
.nav-right{
flex-wrap:wrap;
justify-content:flex-end;
}
}

/* Mobile layout */
@media(max-width:768px){

.container{
padding:0 16px;
}

header{
position:sticky;
padding:10px 0;
}

.navbar{
border-radius:22px;
padding:12px 14px;
gap:10px;
}

.logo{
font-size:18px;
gap:8px;
}

.logo img{
width:42px;
height:42px;
border-radius:12px;
}

.nav-right{
gap:8px;
}

.nav-right .btn-link{
height:42px;
padding:0 12px;
font-size:12px;
border-radius:12px;
}

.nav-right .ride-cta{
height:42px;
padding:0 14px;
font-size:12px;
border-radius:12px;
gap:7px;
}

.nav-right .ride-cta i{
font-size:15px;
}

.hero{
padding-top:42px;
padding-bottom:70px;
}

.hero-grid{
grid-template-columns:1fr;
gap:42px;
}

.hero-left{
text-align:left;
}

.hero-title{
font-size:44px;
line-height:1.05;
margin-bottom:22px;
}

.hero-desc{
font-size:16px;
line-height:1.8;
margin-bottom:18px;
}

.hero-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
width:100%;
}

.hero-buttons .ride-cta,
.hero-buttons .web-cta,
.hero-buttons .store-link{
width:100%;
height:54px;
}

.hero-buttons .ride-cta,
.hero-buttons .web-cta{
font-size:14px;
padding:0 14px;
border-radius:16px;
}

.hero-buttons .ride-cta i,
.hero-buttons .web-cta i{
font-size:18px;
}

.store-badge{
height:54px !important;
max-width:100%;
}

.phone-wrap{
min-height:auto;
padding:10px 0 0;
}

.phone{
width:100%;
max-width:340px;
border-radius:38px;
padding:10px;
}

.phone-screen{
height:680px;
border-radius:30px;
}

.section{
padding:70px 0;
}

.section-title{
margin-bottom:38px;
}

.section-title h2{
font-size:36px;
line-height:1.15;
}

.section-title p{
font-size:15px;
}

.how-grid{
grid-template-columns:1fr !important;
gap:22px;
}

.how-card{
min-height:auto !important;
padding:20px !important;
padding-top:92px !important;
border-radius:28px !important;
}

.how-number{
width:62px !important;
height:62px !important;
font-size:34px !important;
right:18px !important;
top:18px !important;
}

.how-image{
height:560px !important;
border-radius:24px !important;
}

.how-card h3{
font-size:26px !important;
}

.driver-box{
padding:34px 22px;
border-radius:32px;
}

.driver-box h2{
font-size:36px !important;
line-height:1.15;
}

.cta{
padding:42px 20px;
border-radius:32px;
}

.cta h2{
font-size:34px !important;
line-height:1.15;
}

.cta p{
font-size:16px;
}

.live-feedback{
left:12px;
right:12px;
bottom:12px;
}

.live-item{
width:100%;
max-width:360px;
padding:14px;
border-radius:18px;
}

.contact-float{
right:12px;
bottom:12px;
gap:10px;
}

.contact-btn{
width:52px;
height:52px;
font-size:20px;
}

}

/* Very small phones */
@media(max-width:420px){

.hero-title{
font-size:38px;
}

.hero-buttons{
grid-template-columns:1fr;
}

.phone-screen{
height:620px;
}

.how-image{
height:520px !important;
}

}


/* ===== FINAL PHONE IMAGE FIT ===== */
.phone-screen{
position:relative;
}
.phone-custom-image{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:top center !important;
display:block !important;
}


/* ===== FINAL CTA BUTTON ALIGNMENT FIX ===== */

.nav-links a[href="#install"]{
position:relative;
}

.action-btn,
.store-link{
height:58px !important;
min-width:176px;
border-radius:16px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-size:16px !important;
font-weight:800 !important;
line-height:1 !important;
white-space:nowrap !important;
box-sizing:border-box !important;
}

.action-btn i{
font-size:22px !important;
line-height:1 !important;
}

.ride-action{
background:#111 !important;
color:#ffd84d !important;
border:2px solid #ffd84d !important;
box-shadow:0 10px 22px rgba(0,0,0,.16) !important;
}

.ride-action i{
color:#ffd84d !important;
}

.web-action{
background:linear-gradient(135deg,#ffd84d,#ffb300) !important;
color:#111 !important;
border:2px solid rgba(0,0,0,.06) !important;
box-shadow:0 10px 22px rgba(255,179,0,.24) !important;
}

.web-action-white{
background:#fff !important;
}

.store-link{
background:#000 !important;
padding:0 !important;
overflow:hidden !important;
box-shadow:0 10px 22px rgba(0,0,0,.16) !important;
}

.store-badge{
height:58px !important;
width:176px !important;
object-fit:contain !important;
display:block !important;
}

/* Header right: 3 nút cùng chiều cao */
.nav-right{
display:flex !important;
align-items:center !important;
gap:12px !important;
}

.nav-right .store-link,
.nav-right .action-btn{
height:56px !important;
min-width:170px !important;
}

.nav-right .store-badge{
height:56px !important;
width:170px !important;
}

.nav-right .action-btn{
font-size:15px !important;
}

/* Hero buttons: desktop 4 nút cùng 1 dòng */
.hero-buttons{
display:grid !important;
grid-template-columns:repeat(4, minmax(150px, 1fr)) !important;
gap:14px !important;
align-items:center !important;
max-width:900px;
}

.hero-buttons .action-btn,
.hero-buttons .store-link{
width:100% !important;
min-width:0 !important;
}

.hero-buttons .store-badge{
width:100% !important;
}

/* Nếu khu vực hẹp: 2 dòng, mỗi dòng 2 nút */
@media(max-width:1100px){
.hero-buttons{
grid-template-columns:repeat(2, minmax(150px, 1fr)) !important;
max-width:520px;
}
}

/* Mobile */
@media(max-width:768px){

.navbar{
align-items:flex-start !important;
}

.nav-right{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
width:100%;
margin-top:8px;
}

.nav-right .store-link,
.nav-right .action-btn{
width:100% !important;
height:48px !important;
min-width:0 !important;
border-radius:14px !important;
}

.nav-right .store-badge{
height:48px !important;
width:100% !important;
}

.nav-right .action-btn{
font-size:13px !important;
}

.nav-right .action-btn i{
font-size:17px !important;
}

.hero-buttons{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:12px !important;
max-width:100%;
width:100%;
}

.hero-buttons .action-btn,
.hero-buttons .store-link{
height:54px !important;
min-width:0 !important;
width:100% !important;
border-radius:16px !important;
}

.hero-buttons .action-btn{
font-size:14px !important;
padding:0 10px !important;
}

.hero-buttons .action-btn i{
font-size:18px !important;
}

.hero-buttons .store-badge{
height:54px !important;
width:100% !important;
}

}

/* Điện thoại rất nhỏ: vẫn giữ 2 cột nếu đủ, không đủ thì 1 cột */
@media(max-width:380px){
.hero-buttons{
grid-template-columns:1fr !important;
}
.nav-right{
grid-template-columns:1fr !important;
}
}


/* ===== SERVICES ICON UPGRADE ===== */

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
}

.service-card{
background:#fff !important;
border-radius:34px !important;
padding:34px !important;
transition:.3s;
box-shadow:0 12px 30px rgba(0,0,0,.05);
border:2px solid rgba(255,216,77,.22);
position:relative;
overflow:hidden;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(255,179,0,.16);
border-color:#ffd84d;
}

.service-icon{
width:96px !important;
height:96px !important;
border-radius:28px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:48px !important;

background:linear-gradient(135deg,#ffd84d,#ffb300) !important;

box-shadow:
0 14px 30px rgba(255,179,0,.28),
inset 0 2px 8px rgba(255,255,255,.35);

margin-bottom:26px !important;

position:relative;
}

.service-icon::after{
content:"";
position:absolute;
inset:8px;
border-radius:22px;
border:2px solid rgba(255,255,255,.28);
pointer-events:none;
}

.service-card h3{
font-size:28px !important;
margin-bottom:14px !important;
line-height:1.2;
color:#111;
}

.service-card p{
font-size:18px !important;
line-height:1.7 !important;
color:#555 !important;
}

/* Mobile */
@media(max-width:768px){

.services-grid{
grid-template-columns:1fr !important;
gap:20px;
}

.service-card{
padding:26px !important;
border-radius:28px !important;
}

.service-icon{
width:82px !important;
height:82px !important;
font-size:40px !important;
border-radius:24px !important;
margin-bottom:22px !important;
}

.service-card h3{
font-size:24px !important;
}

.service-card p{
font-size:16px !important;
line-height:1.65 !important;
}

}


/* ===== HERO SECTION UPGRADE + BANNER SLIDER ===== */

.hero{
padding-top:170px !important;
padding-bottom:110px !important;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 15% 20%, rgba(255,216,77,.42), transparent 34%),
linear-gradient(135deg,#fff8d8 0%,#fffdf5 48%,#fff4bd 100%);
}

.hero::before{
content:"";
position:absolute;
inset:70px 24px 40px;
border-radius:54px;
background:linear-gradient(135deg,rgba(255,216,77,.45),rgba(255,179,0,.12));
z-index:0;
pointer-events:none;
box-shadow:0 30px 80px rgba(255,179,0,.12);
}

.hero .container{
position:relative;
z-index:1;
}

.hero-grid{
background:rgba(255,255,255,.55);
backdrop-filter:blur(14px);
border:1px solid rgba(255,216,77,.55);
border-radius:46px;
padding:54px;
box-shadow:0 30px 80px rgba(0,0,0,.06);
}

.hero-title{
font-size:82px !important;
}

.hero-desc{
font-size:19px !important;
font-weight:500;
color:#4b4b4b !important;
}

.hero-benefit{
background:rgba(255,255,255,.86) !important;
border:1px solid rgba(255,216,77,.55) !important;
box-shadow:0 10px 24px rgba(255,179,0,.10) !important;
}

.hero-banner-slider{
width:100%;
max-width:720px;
height:210px;
border-radius:32px;
overflow:hidden;
margin:0 0 28px;
position:relative;
background:linear-gradient(135deg,#ffd84d,#ffb300);
box-shadow:0 20px 45px rgba(255,179,0,.22);
border:4px solid rgba(255,255,255,.75);
}

.hero-banner-track{
display:flex;
width:300%;
height:100%;
animation:heroBannerSlide 12s infinite;
}

.hero-banner-track img{
width:33.3333%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}

.hero-banner-dots{
position:absolute;
left:50%;
bottom:14px;
transform:translateX(-50%);
display:flex;
gap:8px;
z-index:3;
}

.hero-banner-dots span{
width:9px;
height:9px;
border-radius:50%;
background:rgba(255,255,255,.75);
box-shadow:0 2px 6px rgba(0,0,0,.18);
}

@keyframes heroBannerSlide{
0%,28%{transform:translateX(0);}
33%,61%{transform:translateX(-33.3333%);}
66%,94%{transform:translateX(-66.6666%);}
100%{transform:translateX(0);}
}

.phone{
background:linear-gradient(135deg,#ffd84d,#ffb300) !important;
box-shadow:0 34px 80px rgba(255,179,0,.30),0 22px 60px rgba(0,0,0,.12) !important;
}

.phone-screen{
background:#fff !important;
}

@media(max-width:1100px){
.hero-grid{
padding:38px;
}
.hero-title{
font-size:62px !important;
}
.hero-banner-slider{
height:190px;
max-width:100%;
}
}

@media(max-width:768px){
.hero{
padding-top:42px !important;
padding-bottom:70px !important;
}

.hero::before{
inset:12px;
border-radius:32px;
}

.hero-grid{
padding:22px;
border-radius:30px;
}

.hero-title{
font-size:42px !important;
line-height:1.08 !important;
}

.hero-banner-slider{
height:160px;
border-radius:24px;
margin-bottom:22px;
}

.hero-desc{
font-size:15px !important;
line-height:1.75 !important;
}
}

@media(max-width:420px){
.hero-banner-slider{
height:135px;
}
}


/* ===== FULL WIDTH TOP SLIDER ===== */

.top-banner-slider{
position:relative;
width:100%;
height:82vh;
min-height:620px;
overflow:hidden;
background:#111;
}

.top-banner-track{
display:flex;
width:300%;
height:100%;
animation:topHeroSlider 15s infinite;
}

.top-banner-track img{
width:33.3333%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
filter:brightness(.72);
}

.top-banner-overlay{
position:absolute;
inset:0;
background:
linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.18)),
linear-gradient(to top, rgba(0,0,0,.45), transparent);
z-index:1;
}

.top-banner-content{
position:absolute;
left:8%;
top:50%;
transform:translateY(-50%);
z-index:2;
max-width:700px;
color:#fff;
}

.top-banner-content h1{
font-size:92px;
line-height:1.02;
font-weight:900;
margin-bottom:24px;
letter-spacing:-2px;
}

.top-banner-content p{
font-size:24px;
line-height:1.7;
margin-bottom:34px;
color:rgba(255,255,255,.9);
}

.top-banner-content .ride-action{
height:66px !important;
padding:0 34px !important;
font-size:20px !important;
border-radius:18px !important;
background:#ffd84d !important;
color:#111 !important;
border:none !important;
}

.top-banner-content .ride-action i{
color:#111 !important;
font-size:24px !important;
}

.top-banner-dots{
position:absolute;
left:50%;
bottom:28px;
transform:translateX(-50%);
display:flex;
gap:12px;
z-index:3;
}

.top-banner-dots span{
width:12px;
height:12px;
border-radius:50%;
background:rgba(255,255,255,.72);
}

@keyframes topHeroSlider{
0%,28%{transform:translateX(0);}
33%,61%{transform:translateX(-33.3333%);}
66%,94%{transform:translateX(-66.6666%);}
100%{transform:translateX(0);}
}

/* Hero spacing after slider */
.hero{
padding-top:80px !important;
}

/* Mobile */
@media(max-width:768px){

.top-banner-slider{
height:68vh;
min-height:520px;
}

.top-banner-content{
left:20px;
right:20px;
max-width:none;
}

.top-banner-content h1{
font-size:46px;
line-height:1.08;
margin-bottom:18px;
letter-spacing:-1px;
}

.top-banner-content p{
font-size:16px;
line-height:1.7;
margin-bottom:24px;
}

.top-banner-content .ride-action{
height:56px !important;
padding:0 24px !important;
font-size:16px !important;
}

.top-banner-content .ride-action i{
font-size:18px !important;
}

.top-banner-dots{
bottom:18px;
}

}


/* ===== FIX SLIDER BRIGHTNESS + FULL IMAGE DISPLAY ===== */

.top-banner-slider{
background:#fffdf5 !important;
height:auto !important;
min-height:auto !important;
padding:130px 24px 42px !important;
overflow:hidden !important;
}

.top-banner-track{
width:300% !important;
height:auto !important;
align-items:center !important;
}

.top-banner-track img{
width:33.3333% !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
object-position:center !important;
filter:none !important;
background:#fffdf5 !important;
display:block !important;
}

.top-banner-overlay{
display:none !important;
}

.top-banner-content{
display:none !important;
}

.top-banner-dots{
bottom:16px !important;
}

.top-banner-dots span{
background:#ffb300 !important;
box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* Mobile */
@media(max-width:768px){

.top-banner-slider{
padding:92px 12px 34px !important;
}

.top-banner-track img{
height:auto !important;
object-fit:contain !important;
}

}

/* Very small phones */
@media(max-width:420px){

.top-banner-slider{
padding:84px 10px 30px !important;
}

}


/* ===== SLIDER HEIGHT OPTIMIZATION ===== */

.top-banner-slider{
padding:90px 20px 24px !important;
max-height:720px !important;
display:flex;
align-items:center;
justify-content:center;
}

.top-banner-track{
max-width:1400px;
margin:auto;
}

.top-banner-track img{
max-height:620px !important;
width:33.3333%;
object-fit:contain !important;
}

/* Tablet */
@media(max-width:1024px){

.top-banner-slider{
padding:80px 16px 20px !important;
max-height:560px !important;
}

.top-banner-track img{
max-height:480px !important;
}

}

/* Mobile */
@media(max-width:768px){

.top-banner-slider{
padding:72px 10px 16px !important;
max-height:340px !important;
min-height:auto !important;
}

.top-banner-track{
width:300% !important;
}

.top-banner-track img{
max-height:300px !important;
width:33.3333% !important;
object-fit:contain !important;
}

.top-banner-dots{
bottom:8px !important;
}

}

/* Small phones */
@media(max-width:420px){

.top-banner-slider{
padding:68px 8px 12px !important;
max-height:280px !important;
}

.top-banner-track img{
max-height:240px !important;
}

}


/* ===== BIGGER SLIDER BALANCED SIZE ===== */

.top-banner-slider{
padding:100px 24px 34px !important;
max-height:none !important;
min-height:760px !important;
display:flex;
align-items:center;
justify-content:center;
}

.top-banner-track{
max-width:1600px;
margin:auto;
}

.top-banner-track img{
max-height:700px !important;
width:33.3333%;
object-fit:contain !important;
}

/* Tablet */
@media(max-width:1024px){

.top-banner-slider{
padding:90px 18px 26px !important;
min-height:620px !important;
}

.top-banner-track img{
max-height:560px !important;
}

}

/* Mobile */
@media(max-width:768px){

.top-banner-slider{
padding:78px 12px 18px !important;
min-height:440px !important;
}

.top-banner-track img{
max-height:390px !important;
}

}

/* Small phones */
@media(max-width:420px){

.top-banner-slider{
padding:72px 10px 14px !important;
min-height:360px !important;
}

.top-banner-track img{
max-height:320px !important;
}

}


@media(max-width:1100px){
.hero-grid{
padding:38px !important;
}
.hero-promo-card{
grid-template-columns:1fr;
}
.hero-promo-image{
height:260px;
}
}

@media(max-width:768px){
.hero{
padding-top:42px !important;
padding-bottom:70px !important;
}
.hero-grid{
padding:22px !important;
border-radius:30px !important;
}
.hero-promo-card{
padding:18px;
border-radius:26px;
gap:16px;
}
.hero-promo-text h2{
font-size:26px;
}
.hero-promo-text p{
font-size:15px;
}
.hero-promo-image{
height:180px;
border-radius:20px;
}
}

@media(max-width:420px){
.hero-promo-image{
height:150px;
}
}


/* ===== INSTALL ANCHOR FIX ===== */
#install{
scroll-margin-top:120px;
}


/* ===== CUSTOM ZALO ICON ===== */
.zalo-btn img{
width:30px;
height:30px;
object-fit:contain;
display:block;
}



/* ===== MOBILE: PHONE PREVIEW FIRST ===== */
@media(max-width:768px){

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

.phone-wrap{
order:1 !important;
margin-bottom:26px !important;
}

.hero-left{
order:2 !important;
}

.hero{
padding-top:34px !important;
}

.phone{
width:100% !important;
max-width:360px !important;
margin:auto !important;
}

.phone-screen{
height:720px !important;
}

}

@media(max-width:420px){

.phone{
max-width:340px !important;
}

.phone-screen{
height:680px !important;
}

}


/* ===== DRIVER SECTION UPGRADE ===== */

.driver-box{
background:
radial-gradient(circle at 15% 15%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg,#ffd84d 0%,#ffb300 100%) !important;
padding:72px !important;
border-radius:46px !important;
grid-template-columns:1.05fr .95fr !important;
gap:58px !important;
box-shadow:0 28px 70px rgba(255,179,0,.22);
position:relative;
overflow:hidden;
}

.driver-box::after{
content:"";
position:absolute;
right:-140px;
bottom:-160px;
width:420px;
height:420px;
border-radius:50%;
background:rgba(255,255,255,.20);
filter:blur(2px);
pointer-events:none;
}

.driver-box > *{
position:relative;
z-index:1;
}

.driver-box h2{
font-size:64px !important;
line-height:1.08 !important;
letter-spacing:-1.5px;
margin-bottom:22px !important;
color:#111;
}

.driver-box p{
font-size:18px !important;
line-height:1.9 !important;
max-width:680px;
color:#5d4500 !important;
font-weight:500;
}

.driver-box .hero-buttons{
display:flex !important;
flex-wrap:wrap;
gap:14px !important;
max-width:none !important;
}

.driver-cta{
height:58px;
padding:0 26px;
border-radius:18px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
font-size:16px;
font-weight:800;
transition:.25s;
box-shadow:0 12px 26px rgba(0,0,0,.10);
}

.driver-cta i{
font-size:20px;
}

.driver-cta-white{
background:#fff;
color:#111;
border:1px solid rgba(0,0,0,.06);
}

.driver-cta-dark{
background:#111;
color:#ffd84d;
border:2px solid #ffd84d;
}

.driver-cta:hover{
transform:translateY(-3px);
box-shadow:0 16px 34px rgba(0,0,0,.16);
}

.driver-list{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:16px !important;
}

.driver-item{
background:rgba(255,255,255,.48) !important;
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.55);
padding:18px !important;
border-radius:20px !important;
font-weight:800 !important;
display:flex;
align-items:center;
gap:12px;
color:#111;
box-shadow:0 10px 22px rgba(0,0,0,.06);
transition:.25s;
}

.driver-item:hover{
transform:translateY(-4px);
background:rgba(255,255,255,.68) !important;
}

.driver-icon{
width:42px;
height:42px;
min-width:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:#111;
color:#ffd84d;
box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.driver-icon i{
font-size:18px;
}

/* Mobile */
@media(max-width:768px){

.driver-box{
padding:30px 20px !important;
border-radius:30px !important;
grid-template-columns:1fr !important;
gap:28px !important;
}

.driver-box h2{
font-size:36px !important;
line-height:1.15 !important;
letter-spacing:-.5px;
}

.driver-box p{
font-size:15px !important;
line-height:1.8 !important;
}

.driver-box .hero-buttons{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
width:100%;
}

.driver-cta{
height:54px;
padding:0 14px;
font-size:14px;
border-radius:16px;
width:100%;
}

.driver-cta i{
font-size:17px;
}

.driver-list{
grid-template-columns:1fr !important;
gap:12px !important;
}

.driver-item{
padding:14px !important;
border-radius:16px !important;
font-size:15px;
}

.driver-icon{
width:38px;
height:38px;
min-width:38px;
border-radius:12px;
}

}

@media(max-width:420px){
.driver-box .hero-buttons{
grid-template-columns:1fr !important;
}
}


/* ===== FINAL UNIFIED DESIGN SYSTEM ===== */

:root{
--gld-yellow:#ffd84d;
--gld-orange:#ffb300;
--gld-dark:#111111;
--gld-cream:#fffdf5;
--gld-soft:#fff7d8;
--gld-card:#ffffff;
--gld-text:#222222;
--gld-muted:#5f5f5f;
--gld-shadow:0 18px 45px rgba(255,179,0,.14);
--gld-shadow-dark:0 16px 34px rgba(0,0,0,.10);
}

body{
background:
radial-gradient(circle at 12% 8%, rgba(255,216,77,.24), transparent 32%),
radial-gradient(circle at 88% 22%, rgba(255,179,0,.18), transparent 30%),
linear-gradient(180deg,#fffdf5 0%,#fff8df 50%,#fffdf5 100%) !important;
color:var(--gld-text);
}

.section{
position:relative;
}

.section:nth-of-type(even){
background:linear-gradient(180deg,rgba(255,248,216,.45),rgba(255,253,245,.1));
}

.navbar,
.hero-grid,
.service,
.feedback,
.install-card,
.live-item{
border:1px solid rgba(255,216,77,.35) !important;
box-shadow:var(--gld-shadow) !important;
}

.navbar{
background:rgba(255,255,255,.88) !important;
}

.hero-grid{
background:
linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,248,216,.68)) !important;
border-radius:46px !important;
}

.hero-title span,
.section-title h2 span{
color:var(--gld-orange) !important;
}

.hero-desc,
.service p,
.install-card p,
.feedback p,
.footer-grid p,
.footer-grid a{
color:var(--gld-muted) !important;
}

/* Consistent CTA area: only 3 buttons after removing duplicate Web App */
.hero-buttons{
display:grid !important;
grid-template-columns:repeat(3,minmax(170px,1fr)) !important;
gap:14px !important;
align-items:center !important;
max-width:720px !important;
}

.hero-buttons .action-btn,
.hero-buttons .store-link{
width:100% !important;
height:58px !important;
min-width:0 !important;
}

.hero-buttons .store-badge{
width:100% !important;
height:58px !important;
}

.action-btn,
.store-link,
.driver-cta,
.btn{
transition:.25s ease !important;
}

.action-btn:hover,
.store-link:hover,
.driver-cta:hover,
.btn:hover{
transform:translateY(-3px) !important;
}

.ride-action{
background:linear-gradient(135deg,#111,#2a2a2a) !important;
color:var(--gld-yellow) !important;
border:2px solid var(--gld-yellow) !important;
box-shadow:0 14px 32px rgba(0,0,0,.16) !important;
}

.ride-action i{
color:var(--gld-yellow) !important;
}

/* Services unified with yellow identity */
.service,
.service-card{
background:rgba(255,255,255,.88) !important;
border:1px solid rgba(255,216,77,.45) !important;
box-shadow:var(--gld-shadow) !important;
}

.service-icon{
background:linear-gradient(135deg,var(--gld-yellow),var(--gld-orange)) !important;
box-shadow:0 14px 30px rgba(255,179,0,.26) !important;
}

/* How cards unified */
.how-card{
background:linear-gradient(135deg,var(--gld-yellow),var(--gld-orange)) !important;
box-shadow:0 20px 48px rgba(255,179,0,.18) !important;
}

.how-image{
background:#fff8da !important;
border-color:rgba(17,17,17,.13) !important;
}

/* Driver unified */
.driver-box{
background:
radial-gradient(circle at 12% 14%, rgba(255,255,255,.36), transparent 28%),
linear-gradient(135deg,var(--gld-yellow),var(--gld-orange)) !important;
box-shadow:0 26px 66px rgba(255,179,0,.24) !important;
}

.driver-item{
background:rgba(255,255,255,.52) !important;
border:1px solid rgba(255,255,255,.55) !important;
}

.driver-icon{
background:var(--gld-dark) !important;
color:var(--gld-yellow) !important;
}

/* CTA unified */
.cta{
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 26%),
linear-gradient(135deg,var(--gld-yellow),var(--gld-orange)) !important;
box-shadow:0 26px 66px rgba(255,179,0,.22) !important;
}

/* Footer cleaner */
footer{
background:linear-gradient(180deg,rgba(255,248,216,.2),rgba(255,253,245,1));
}

/* Mobile */
@media(max-width:768px){

.hero-grid{
border-radius:30px !important;
padding:22px !important;
}

.hero-buttons{
grid-template-columns:1fr !important;
max-width:100% !important;
gap:12px !important;
}

.hero-buttons .action-btn,
.hero-buttons .store-link{
height:54px !important;
}

.hero-buttons .store-badge{
height:54px !important;
}

.section{
padding:68px 0 !important;
}

}

@media(min-width:769px) and (max-width:1100px){
.hero-buttons{
grid-template-columns:repeat(2,minmax(170px,1fr)) !important;
max-width:540px !important;
}
}


/* ===== FINAL FULL PAGE YELLOW SYNC + RESTORE ===== */

:root{
--gld-yellow:#ffd84d;
--gld-orange:#ffb300;
--gld-dark:#111;
--gld-cream:#fffdf5;
--gld-text:#222;
--gld-muted:#5f5f5f;
}

body{
background:
radial-gradient(circle at 10% 4%, rgba(255,216,77,.34), transparent 32%),
radial-gradient(circle at 88% 18%, rgba(255,179,0,.23), transparent 34%),
linear-gradient(180deg,#fff8d8 0%,#fffdf5 48%,#fff8df 100%) !important;
}

/* HERO trên cùng đồng bộ nền vàng */
.hero{
background:
radial-gradient(circle at 16% 12%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg,#ffd84d 0%,#ffb300 100%) !important;
padding-top:160px !important;
padding-bottom:110px !important;
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
inset:24px;
border-radius:52px;
background:rgba(255,255,255,.22);
border:1px solid rgba(255,255,255,.35);
pointer-events:none;
}

.hero .container{
position:relative;
z-index:1;
}

.hero-grid{
background:rgba(255,255,255,.62) !important;
border:1px solid rgba(255,255,255,.65) !important;
border-radius:46px !important;
padding:54px !important;
box-shadow:0 28px 70px rgba(0,0,0,.10) !important;
}

.hero-title{
color:#111 !important;
}

.hero-title span{
color:#f59e0b !important;
text-shadow:0 8px 24px rgba(245,158,11,.18);
}

.hero-desc{
color:#5d4500 !important;
font-weight:600 !important;
}

.hero-benefit{
background:rgba(255,255,255,.88) !important;
border:1px solid rgba(255,255,255,.75) !important;
box-shadow:0 12px 28px rgba(0,0,0,.06) !important;
}

/* Đồng bộ các khối section nổi bật */
#services .container,
#how .container,
#feedback .feedback-section-yellow{
background:
radial-gradient(circle at 16% 12%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg,#ffd84d 0%,#ffb300 100%) !important;
border-radius:46px;
padding:72px 46px !important;
box-shadow:0 28px 70px rgba(255,179,0,.24);
border:1px solid rgba(255,255,255,.45);
}

#services .section-title h2,
#how .section-title h2,
#feedback .section-title h2{
color:#111 !important;
}

#services .section-title p,
#how .section-title p,
#feedback .section-title p{
color:#5d4500 !important;
font-weight:700;
}

#services .service{
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(255,255,255,.72) !important;
box-shadow:0 16px 36px rgba(0,0,0,.08) !important;
}

#services .service-icon{
background:#111 !important;
color:#ffd84d !important;
box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
}

#how .how-card{
background:rgba(255,255,255,.32) !important;
border:1px solid rgba(255,255,255,.55) !important;
box-shadow:0 16px 36px rgba(0,0,0,.08) !important;
}

#how .how-card h3{
color:#111 !important;
}

#how .how-card p{
color:#5d4500 !important;
font-weight:600;
}

/* Feedback mới */
#feedback{
padding:110px 0 !important;
}

#staticFeedbackGrid.feedback-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:24px !important;
width:100% !important;
}

#staticFeedbackGrid .feedback{
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(255,255,255,.72) !important;
box-shadow:0 16px 36px rgba(0,0,0,.08) !important;
border-radius:28px !important;
padding:26px !important;
transition:.25s;
min-height:230px;
}

#staticFeedbackGrid .feedback:hover{
transform:translateY(-6px);
box-shadow:0 22px 46px rgba(0,0,0,.12) !important;
}

#staticFeedbackGrid .feedback-top{
display:flex !important;
align-items:center !important;
gap:16px !important;
margin-bottom:18px !important;
}

#staticFeedbackGrid .feedback-top img{
width:70px !important;
height:70px !important;
border-radius:50% !important;
object-fit:cover !important;
border:4px solid #ffd84d !important;
box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
background:#fff7d8 !important;
}

#staticFeedbackGrid .feedback-name{
font-size:19px !important;
font-weight:800 !important;
color:#111 !important;
}

#staticFeedbackGrid .feedback-stars{
font-size:15px !important;
color:#f59e0b !important;
letter-spacing:1px;
}

#staticFeedbackGrid .feedback p{
font-size:16px !important;
line-height:1.8 !important;
color:#4f4f4f !important;
margin:0 !important;
}

.feedback-route{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:800;
color:#5d4500;
background:#fff4bd;
padding:7px 10px;
border-radius:999px;
margin-top:14px;
}

/* Mobile */
@media(max-width:1100px){
.hero-grid,
#services .container,
#how .container,
#feedback .feedback-section-yellow{
padding:44px 28px !important;
}

#staticFeedbackGrid.feedback-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}

@media(max-width:768px){
.hero{
padding-top:34px !important;
padding-bottom:70px !important;
}

.hero::before{
inset:10px;
border-radius:32px;
}

.hero-grid,
#services .container,
#how .container,
#feedback .feedback-section-yellow{
border-radius:30px !important;
padding:24px 18px !important;
}

#staticFeedbackGrid.feedback-grid{
grid-template-columns:1fr !important;
gap:18px !important;
}

#staticFeedbackGrid .feedback{
padding:22px !important;
border-radius:22px !important;
min-height:auto;
}
}


/* ===== CONSISTENT FULL-WIDTH SECTION LAYOUT ===== */

/* tất cả section vàng cùng độ rộng */
.hero .container,
#services .container,
#how .container,
#feedback .container,
.driver-section .container{
max-width:1400px !important;
width:calc(100% - 48px) !important;
margin:0 auto !important;
}

/* section dịch vụ đang nhỏ -> full ngang đồng bộ */
#services{
padding-top:90px !important;
padding-bottom:90px !important;
}

#services .container{
width:calc(100% - 48px) !important;
max-width:1400px !important;
}

/* grid dịch vụ cân đối hơn */
.services-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:28px !important;
margin-top:48px !important;
}

.service{
border-radius:30px !important;
padding:34px 28px !important;
min-height:290px !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
}

.service-icon{
width:84px !important;
height:84px !important;
border-radius:24px !important;
font-size:38px !important;
margin-bottom:26px !important;
}

.service h3{
font-size:42px !important;
font-weight:900 !important;
margin-bottom:14px !important;
}

.service p{
font-size:18px !important;
line-height:1.8 !important;
}

/* đồng bộ khoảng trắng giữa các section */
section{
margin-top:0 !important;
margin-bottom:0 !important;
}

/* mobile */
@media(max-width:1200px){
.services-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}

@media(max-width:768px){

.hero .container,
#services .container,
#how .container,
#feedback .container,
.driver-section .container{
width:calc(100% - 20px) !important;
}

.services-grid{
grid-template-columns:1fr !important;
gap:18px !important;
}

.service{
min-height:auto !important;
padding:26px 22px !important;
}

.service h3{
font-size:32px !important;
}

.service p{
font-size:16px !important;
}

.service-icon{
width:72px !important;
height:72px !important;
font-size:30px !important;
}
}


/* ===== DRIVER REGISTER TOP BUTTON ===== */

.driver-register-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:14px 24px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#111 0%,#222 100%) !important;
color:#ffd84d !important;
font-size:16px !important;
font-weight:800 !important;
text-decoration:none !important;
border:2px solid #ffd84d !important;
box-shadow:
0 10px 26px rgba(0,0,0,.16),
0 0 0 4px rgba(255,216,77,.18) !important;
transition:.25s ease !important;
margin-left:14px !important;
white-space:nowrap !important;
animation:driverPulse 2s infinite;
}

.driver-register-btn:hover{
transform:translateY(-3px) scale(1.03);
background:linear-gradient(135deg,#ffd84d 0%,#ffb300 100%) !important;
color:#111 !important;
box-shadow:
0 18px 40px rgba(255,179,0,.35),
0 0 0 6px rgba(255,216,77,.25) !important;
}

@keyframes driverPulse{
0%{
box-shadow:
0 10px 26px rgba(0,0,0,.16),
0 0 0 0 rgba(255,216,77,.45);
}
70%{
box-shadow:
0 10px 26px rgba(0,0,0,.16),
0 0 0 14px rgba(255,216,77,0);
}
100%{
box-shadow:
0 10px 26px rgba(0,0,0,.16),
0 0 0 0 rgba(255,216,77,0);
}
}

/* mobile */
@media(max-width:1100px){
.driver-register-btn{
padding:12px 18px !important;
font-size:14px !important;
margin-left:8px !important;
}
}

@media(max-width:768px){
.driver-register-btn{
width:100% !important;
justify-content:center !important;
margin-top:12px !important;
margin-left:0 !important;
padding:14px 18px !important;
font-size:15px !important;
}
}


/* ===== LIVE FEEDBACK POPUP - VIETNAMESE + FIXED TRIPS ===== */
.live-item{
width:360px !important;
align-items:flex-start !important;
border:1px solid rgba(255,216,77,.55) !important;
box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
}

.live-avatar{
width:62px !important;
height:62px !important;
border:4px solid #ffd84d !important;
background:#fff7d8 !important;
}

.live-content h4{
font-size:17px !important;
font-weight:800 !important;
}

.live-content p{
font-size:14px !important;
color:#555 !important;
}

.live-route,
.live-service{
font-weight:800;
color:#333;
}

@media(max-width:768px){
.live-item{
width:calc(100vw - 24px) !important;
max-width:360px !important;
}
}


/* ===== HEADER TOOLBAR + HERO PHONE SIZE FIX ===== */

/* Thanh công cụ gọn, đẹp, không bị dàn trải */
header{
padding:14px 0 !important;
}

.navbar{
max-width:1380px !important;
margin:0 auto !important;
padding:16px 22px !important;
border-radius:30px !important;
display:grid !important;
grid-template-columns:auto 1fr auto !important;
gap:22px !important;
align-items:center !important;
}

.logo{
min-width:max-content !important;
font-size:26px !important;
gap:12px !important;
}

.logo img{
width:58px !important;
height:58px !important;
}

.nav-links{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:22px !important;
}

.nav-links a{
font-size:15px !important;
font-weight:800 !important;
padding:10px 4px !important;
white-space:nowrap !important;
}

.nav-right{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
min-width:max-content !important;
}

/* Badge download nhỏ lại vừa thanh top */
.nav-right .store-link{
height:48px !important;
min-width:148px !important;
width:148px !important;
border-radius:12px !important;
}

.nav-right .store-badge{
height:48px !important;
width:148px !important;
object-fit:contain !important;
}

/* Nút đặt xe và đăng ký tài xế cân nhau */
.nav-right .action-btn,
.nav-right .driver-register-btn{
height:48px !important;
min-width:148px !important;
padding:0 18px !important;
border-radius:14px !important;
font-size:14px !important;
gap:8px !important;
}

.nav-right .action-btn i,
.nav-right .driver-register-btn i{
font-size:17px !important;
}

/* Nếu nút đăng ký tài xế đang nằm trong nav-links thì đưa style đẹp */
.driver-register-btn{
height:48px !important;
padding:0 20px !important;
border-radius:14px !important;
font-size:14px !important;
gap:8px !important;
margin-left:0 !important;
}

/* Hero: chia lại tỷ lệ để ảnh điện thoại lớn hơn */
.hero-grid{
grid-template-columns:minmax(0, 0.95fr) minmax(470px, 0.85fr) !important;
gap:52px !important;
align-items:center !important;
}

.hero-left{
max-width:720px !important;
}

.hero-title{
font-size:78px !important;
line-height:1.02 !important;
}

/* Tăng kích thước khung điện thoại */
.phone-wrap{
min-height:940px !important;
overflow:visible !important;
}

.phone{
width:460px !important;
max-width:460px !important;
border-radius:54px !important;
padding:16px !important;
}

.phone-screen{
height:860px !important;
border-radius:40px !important;
}

.phone-custom-image{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:top center !important;
}

/* Vòng nền sau điện thoại cân đối hơn */
.phone-bg{
width:720px !important;
height:720px !important;
opacity:.22 !important;
}

/* Nút phía dưới intro giữ 3 nút, đồng bộ */
.hero-buttons{
grid-template-columns:repeat(3,minmax(170px,1fr)) !important;
max-width:650px !important;
}

/* Tablet */
@media(max-width:1200px){
.navbar{
grid-template-columns:1fr !important;
justify-items:center !important;
gap:14px !important;
}
.nav-links{
order:2;
flex-wrap:wrap !important;
}
.nav-right{
order:3;
flex-wrap:wrap !important;
justify-content:center !important;
}
.logo{
order:1;
}
.hero-grid{
grid-template-columns:1fr !important;
gap:42px !important;
}
.hero-left{
max-width:100% !important;
}
.phone-wrap{
min-height:auto !important;
}
.phone{
width:430px !important;
max-width:90vw !important;
}
.phone-screen{
height:820px !important;
}
}

/* Mobile */
@media(max-width:768px){
header{
padding:8px 0 !important;
}
.navbar{
width:calc(100% - 18px) !important;
padding:12px !important;
border-radius:22px !important;
}
.logo{
font-size:20px !important;
}
.logo img{
width:46px !important;
height:46px !important;
}
.nav-links{
display:none !important;
}
.nav-right{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
width:100% !important;
min-width:0 !important;
}
.nav-right .store-link,
.nav-right .action-btn,
.nav-right .driver-register-btn{
width:100% !important;
min-width:0 !important;
height:46px !important;
font-size:13px !important;
border-radius:12px !important;
}
.nav-right .store-badge{
width:100% !important;
height:46px !important;
}
.hero-grid{
display:flex !important;
flex-direction:column !important;
gap:26px !important;
padding:20px !important;
}
.phone-wrap{
order:1 !important;
margin-bottom:16px !important;
}
.hero-left{
order:2 !important;
}
.phone{
width:100% !important;
max-width:360px !important;
padding:10px !important;
border-radius:38px !important;
}
.phone-screen{
height:720px !important;
border-radius:30px !important;
}
.hero-title{
font-size:42px !important;
}
.hero-buttons{
grid-template-columns:1fr !important;
max-width:100% !important;
}
}

@media(max-width:420px){
.phone{
max-width:340px !important;
}
.phone-screen{
height:680px !important;
}
}


/* ===== FOOTER YELLOW THEME SYNC ===== */

footer,
.footer,
.site-footer{
background:
linear-gradient(
180deg,
#fffdf2 0%,
#fff7d1 28%,
#ffe77a 100%
) !important;
position:relative !important;
overflow:hidden !important;
padding-top:90px !important;
padding-bottom:40px !important;
border-top:4px solid rgba(255,193,7,.35) !important;
}

/* ánh sáng nền footer */
footer::before,
.footer::before,
.site-footer::before{
content:"";
position:absolute;
top:-180px;
left:-120px;
width:520px;
height:520px;
background:radial-gradient(circle,#fff4a8 0%,rgba(255,244,168,0) 72%);
opacity:.85;
pointer-events:none;
}

footer::after,
.footer::after,
.site-footer::after{
content:"";
position:absolute;
right:-160px;
bottom:-160px;
width:520px;
height:520px;
background:radial-gradient(circle,#ffd84d 0%,rgba(255,216,77,0) 74%);
opacity:.25;
pointer-events:none;
}

/* khung footer đồng bộ card */
.footer .container,
footer .container,
.site-footer .container{
position:relative;
z-index:2;
background:rgba(255,255,255,.38) !important;
backdrop-filter:blur(8px);
border:1px solid rgba(255,216,77,.45) !important;
box-shadow:0 20px 60px rgba(255,179,0,.12) !important;
border-radius:34px !important;
padding:50px 46px !important;
}

/* tiêu đề footer */
footer h3,
.footer h3,
.site-footer h3{
font-size:22px !important;
font-weight:900 !important;
margin-bottom:22px !important;
color:#111 !important;
}

/* text */
footer p,
footer a,
footer li,
.footer p,
.footer a,
.footer li,
.site-footer p,
.site-footer a,
.site-footer li{
font-size:17px !important;
line-height:1.9 !important;
color:#555 !important;
font-weight:600 !important;
text-decoration:none !important;
transition:.2s ease;
}

footer a:hover,
.footer a:hover,
.site-footer a:hover{
color:#111 !important;
transform:translateX(2px);
}

/* dòng copyright */
.footer-bottom,
footer .copyright,
.site-footer .copyright{
margin-top:40px !important;
padding-top:26px !important;
border-top:1px solid rgba(255,193,7,.28) !important;
font-size:15px !important;
color:#666 !important;
text-align:center !important;
font-weight:700 !important;
}

/* mobile */
@media(max-width:768px){

footer,
.footer,
.site-footer{
padding-top:60px !important;
}

.footer .container,
footer .container,
.site-footer .container{
padding:32px 22px !important;
border-radius:26px !important;
}

footer h3,
.footer h3,
.site-footer h3{
font-size:20px !important;
margin-bottom:16px !important;
}

footer p,
footer a,
footer li,
.footer p,
.footer a,
.footer li,
.site-footer p,
.site-footer a,
.site-footer li{
font-size:15px !important;
line-height:1.8 !important;
}

}


/* ===== FINAL MOBILE BUTTON OVERLAP FIX ===== */

.navbar{
overflow:visible !important;
}

.nav-right{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
}

.store-link{
flex:0 0 auto !important;
}

.store-badge{
display:block !important;
object-fit:contain !important;
}

@media(max-width:768px){

header{
position:sticky !important;
top:0 !important;
padding:8px 0 !important;
background:rgba(255,248,216,.96) !important;
backdrop-filter:blur(12px);
}

.navbar{
width:calc(100% - 20px) !important;
margin:0 auto !important;
padding:14px !important;
border-radius:24px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:12px !important;
overflow:hidden !important;
}

.logo{
width:100% !important;
justify-content:center !important;
font-size:22px !important;
gap:10px !important;
}

.logo img{
width:56px !important;
height:56px !important;
border-radius:16px !important;
}

.nav-links{
display:none !important;
}

.nav-right{
width:100% !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
align-items:stretch !important;
justify-content:stretch !important;
min-width:0 !important;
margin-top:0 !important;
}

.nav-right .action-btn{
grid-column:1 / -1 !important;
}

.nav-right .driver-register-btn{
grid-column:1 / -1 !important;
}

.nav-right .store-link,
.nav-right .action-btn,
.nav-right .driver-register-btn{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:50px !important;
border-radius:14px !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}

.nav-right .store-badge{
width:100% !important;
height:50px !important;
object-fit:contain !important;
}

.nav-right .action-btn,
.nav-right .driver-register-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
font-size:14px !important;
font-weight:800 !important;
}

.nav-right .action-btn i,
.nav-right .driver-register-btn i{
font-size:18px !important;
}

.hero-buttons{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
width:100% !important;
max-width:100% !important;
}

.hero-buttons .action-btn{
grid-column:1 / -1 !important;
}

.hero-buttons .store-link,
.hero-buttons .action-btn,
.hero-buttons .driver-register-btn{
width:100% !important;
min-width:0 !important;
height:52px !important;
border-radius:15px !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
}

.hero-buttons .store-badge{
width:100% !important;
height:52px !important;
object-fit:contain !important;
}

.contact-float{
right:10px !important;
bottom:10px !important;
gap:8px !important;
}

.contact-btn{
width:48px !important;
height:48px !important;
font-size:18px !important;
}

.live-feedback{
left:10px !important;
right:10px !important;
bottom:10px !important;
}

.live-item{
width:calc(100vw - 20px) !important;
max-width:360px !important;
}

}

@media(max-width:380px){

.nav-right,
.hero-buttons{
grid-template-columns:1fr !important;
}

.nav-right .action-btn,
.nav-right .driver-register-btn,
.hero-buttons .action-btn,
.hero-buttons .driver-register-btn{
grid-column:auto !important;
}

}



/* ===== INSTALL ANCHOR CLICK FIX ===== */
#install{
scroll-margin-top:120px !important;
}


/* ===== NEWFEED POPUP COMPACT + CLOSE BUTTON FIX ===== */
.live-feedback{
left:16px !important;
right:auto !important;
bottom:18px !important;
gap:10px !important;
max-width:300px !important;
z-index:99999 !important;
}

.live-item{
position:relative !important;
width:300px !important;
max-width:calc(100vw - 28px) !important;
padding:12px 14px 12px 12px !important;
border-radius:18px !important;
gap:10px !important;
align-items:flex-start !important;
box-shadow:0 12px 28px rgba(0,0,0,.12) !important;
border:1px solid rgba(255,216,77,.65) !important;
animation:livePop 14s ease forwards !important;
}

.live-avatar{
width:44px !important;
height:44px !important;
min-width:44px !important;
border:3px solid #ffd84d !important;
}

.live-content h4{
font-size:14px !important;
line-height:1.25 !important;
margin:0 24px 4px 0 !important;
}

.live-content p{
font-size:12px !important;
line-height:1.45 !important;
margin:0 !important;
}

.live-content p br{
display:none !important;
}

.live-content p span,
.live-content p b{
line-height:1.45 !important;
}

.live-close{
position:absolute !important;
top:8px !important;
right:8px !important;
width:24px !important;
height:24px !important;
border:none !important;
border-radius:50% !important;
background:#111 !important;
color:#ffd84d !important;
font-size:14px !important;
font-weight:900 !important;
line-height:24px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
pointer-events:auto !important;
z-index:5 !important;
box-shadow:0 6px 14px rgba(0,0,0,.18) !important;
}

.live-close:hover{
transform:scale(1.06) !important;
background:#ffb300 !important;
color:#111 !important;
}

/* Mobile: nhỏ gọn hơn để không che nội dung */
@media(max-width:768px){
.live-feedback{
left:10px !important;
right:auto !important;
bottom:10px !important;
max-width:280px !important;
}

.live-item{
width:280px !important;
max-width:calc(100vw - 20px) !important;
padding:10px 12px !important;
border-radius:16px !important;
}

.live-avatar{
width:38px !important;
height:38px !important;
min-width:38px !important;
}

.live-content h4{
font-size:13px !important;
}

.live-content p{
font-size:11.5px !important;
}
}


/* ===== PROFESSIONAL FAQ SECTION ===== */
.faq-section{
padding:110px 0 !important;
}
.faq-shell{
background:
radial-gradient(circle at 16% 12%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg,#ffd84d 0%,#ffb300 100%) !important;
border-radius:46px;
padding:72px 46px !important;
box-shadow:0 28px 70px rgba(255,179,0,.24);
border:1px solid rgba(255,255,255,.45);
}
.faq-tabs{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin:0 0 34px;
}
.faq-tab{
border:none;
border-radius:999px;
padding:14px 22px;
font-weight:900;
font-size:15px;
background:rgba(255,255,255,.65);
color:#111;
cursor:pointer;
transition:.25s;
box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.faq-tab.active,
.faq-tab:hover{
background:#111;
color:#ffd84d;
transform:translateY(-2px);
}
.faq-group{
display:none;
}
.faq-group.active{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.faq-item{
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.72);
border-radius:22px;
overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,.07);
}
.faq-question{
width:100%;
border:none;
background:transparent;
padding:20px 22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
font-weight:900;
font-size:17px;
line-height:1.45;
color:#111;
text-align:left;
cursor:pointer;
}
.faq-question i{
min-width:28px;
height:28px;
border-radius:50%;
background:#111;
color:#ffd84d;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
transition:.25s;
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .28s ease;
}
.faq-answer p{
padding:0 22px 20px;
font-size:15px;
line-height:1.8;
color:#555;
margin:0;
}
.faq-item.open .faq-answer{
max-height:260px;
}
.faq-item.open .faq-question i{
transform:rotate(180deg);
}
.faq-section .section-title h2{
color:#111 !important;
}
.faq-section .section-title p{
color:#5d4500 !important;
font-weight:700;
}
@media(max-width:900px){
.faq-shell{
border-radius:30px;
padding:34px 18px !important;
}
.faq-group.active{
grid-template-columns:1fr;
}
.faq-question{
font-size:15px;
padding:18px;
}
.faq-answer p{
padding:0 18px 18px;
font-size:14px;
}
}




/* DRIVER */

.driver-box{
background:linear-gradient(135deg,#ffd84d,#ffb300);
padding:80px;
border-radius:50px;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.driver-box h2{
font-size:70px;
margin-bottom:20px;
}

.driver-box p{
line-height:2;
font-size:18px;
color:#5f4300;
margin-bottom:30px;
}

.driver-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.driver-item{
background:rgba(255,255,255,.45);
padding:20px;
border-radius:18px;
font-weight:600;
}

/* FEEDBACK */

.feedback-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:26px;
}

.feedback{
background:white;
padding:28px;
border-radius:34px;
box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.feedback-top{
display:flex;
align-items:center;
gap:16px;
margin-bottom:18px;
}

.feedback-top img{
width:64px;
height:64px;
border-radius:50%;
object-fit:cover;
}

.feedback-name{
font-size:20px;
font-weight:700;
}

.feedback-stars{
color:#f59e0b;
}

.feedback p{
line-height:1.9;
color:#666;
}

/* CTA */

.cta{
background:linear-gradient(135deg,#ffd84d,#ffb300);
padding:90px;
border-radius:50px;
text-align:center;
}

.cta h2{
font-size:72px;
margin-bottom:22px;
}

.cta p{
font-size:20px;
line-height:2;
max-width:900px;
margin:auto;
margin-bottom:40px;
}

/* FOOTER */

footer{
padding:100px 0 40px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:60px;
}

.footer-grid h3{
font-size:24px;
margin-bottom:18px;
}

.footer-grid p{
line-height:2;
color:#555;
}

.footer-grid a{
display:block;
margin-bottom:12px;
text-decoration:none;
color:#555;
}

.footer-bottom{
margin-top:60px;
padding-top:24px;
border-top:1px solid rgba(0,0,0,.08);
text-align:center;
color:#777;
}

/* CONTACT FLOAT */

.contact-float{
position:fixed;
right:18px;
bottom:18px;
display:flex;
flex-direction:column;
gap:14px;
z-index:9999;
}

.contact-btn{
width:64px;
height:64px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
text-decoration:none;
box-shadow:0 10px 24px rgba(0,0,0,.18);
transition:.25s;
}

.contact-btn:hover{
transform:scale(1.1);
}

.phone-btn{
background:#ffb300;
}

.zalo-btn{
background:#0084ff;
}

.fb-btn{
background:#1877f2;
}

.mess-btn{
background:#7c3aed;
}

.tt-btn{
background:#000;
}

/* LIVE FEEDBACK */

.live-feedback{
position:fixed;
left:20px;
bottom:20px;
z-index:99999;
display:flex;
flex-direction:column;
gap:12px;
pointer-events:none;
}

.live-item{
background:white;
padding:16px 18px;
border-radius:22px;
box-shadow:0 16px 30px rgba(0,0,0,.12);
display:flex;
align-items:center;
gap:14px;
width:340px;
animation:livePop 10s ease forwards;
overflow:hidden;
}

.live-avatar{
width:56px;
height:56px;
border-radius:50%;
object-fit:cover;
}

.live-content{
flex:1;
}

.live-content h4{
font-size:16px;
margin-bottom:6px;
}

.live-content p{
font-size:14px;
line-height:1.6;
color:#666;
}

.live-price{
font-weight:700;
color:#16a34a;
}

@keyframes livePop{

0%{
opacity:0;
transform:translateY(40px) scale(.8);
}

10%{
opacity:1;
transform:translateY(0) scale(1);
}

85%{
opacity:1;
transform:translateY(0);
}

100%{
opacity:0;
transform:translateY(20px);
}

}

@media(max-width:1100px){

.driver-box{
grid-template-columns:1fr;
}

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

}



.phone-custom-image{
width:100%;
height:100%;
min-height:100%;
object-fit:cover;
object-position:top center;
border-radius:32px;
display:block;
}




/* ===== FIX MOBILE HEADER: ẨN HOÀN TOÀN KHI LƯỚT, KHÔNG ĐỂ LẠI KHOẢNG TRỐNG ===== */
@media(max-width:768px){
  header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:99999 !important;
    transition:transform .35s ease, opacity .35s ease, visibility .35s ease !important;
    will-change:transform, opacity;
  }

  body.gld-header-hidden header{
    transform:translateY(-130%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Khi header đã ẩn, phần banner trên cùng không còn giữ khoảng trống phía trên */
  body.gld-header-hidden .top-banner-slider{
    padding-top:8px !important;
    min-height:auto !important;
    max-height:none !important;
    align-items:flex-start !important;
  }

  body.gld-header-hidden .top-banner-track{
    align-items:flex-start !important;
  }

  body.gld-header-hidden .top-banner-track img{
    max-height:390px !important;
  }
}

/* ===== GOILADI SEO HOME SECTION ===== */
.seo-home-section{background:linear-gradient(180deg,#fffdf5 0%,#fff7d8 100%);}
.seo-service-grid{margin-top:20px;}
.seo-popular-box,.seo-faq-box{background:#fff;border:1px solid rgba(255,216,77,.55);border-radius:28px;padding:28px;margin-top:34px;box-shadow:0 14px 34px rgba(255,179,0,.12);}
.seo-popular-box h3,.seo-faq-box h3{font-size:30px;margin-bottom:16px;color:#111;}
.seo-popular-box p{display:flex;flex-wrap:wrap;gap:10px 16px;line-height:2;}
.seo-popular-box a{font-weight:700;color:#111;background:#fff7d8;border:1px solid rgba(255,179,0,.28);border-radius:999px;padding:8px 14px;}
.seo-faq-box p{line-height:1.85;color:#555;margin-bottom:14px;}
.seo-faq-box strong{color:#111;}
@media(max-width:768px){.seo-popular-box,.seo-faq-box{padding:20px;border-radius:22px}.seo-popular-box h3,.seo-faq-box h3{font-size:24px}.seo-popular-box p{display:block}.seo-popular-box a{display:block;margin-bottom:8px}}

/* SPEED PACK 4: stable hero dimensions and delayed live feedback */
.phone-screen picture{width:100%;height:100%;display:block;}
.phone-custom-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.store-badge{width:176px;height:58px;aspect-ratio:176/58;}
.live-feedback{contain:layout paint;}
.live-item{backface-visibility:hidden;transform:translateZ(0);}
@media(max-width:768px){.phone-screen{height:609px!important;min-height:609px!important}.phone{max-width:340px!important}.phone-custom-image{aspect-ratio:340/609}.store-badge{width:100%;height:52px}}
@media(min-width:769px){.phone-screen{height:699px!important;min-height:699px!important}.phone-custom-image{aspect-ratio:390/699}}


/* GOILADI ULTIMATE SEO SPEED 2026 - layout safe patch */
.how-image{display:block!important;position:relative!important;width:100%!important;height:460px!important;padding:0!important;overflow:hidden!important;border-radius:28px!important;background:#fff7d8!important}.how-image img{display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;object-fit:cover!important;object-position:top center!important;border-radius:24px!important;transform:none!important}.phone-screen{overflow:hidden!important}.phone-custom-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:top center!important}.live-feedback{contain:layout paint!important;will-change:transform,opacity!important}.contact-float{contain:layout paint!important}@media(max-width:768px){.how-image{height:560px!important;border-radius:24px!important}.how-image img{border-radius:22px!important}.phone-screen{height:609px!important;min-height:609px!important}}@media(max-width:420px){.how-image{height:520px!important}}


/* ===== GOILADI FINAL OPTIMIZED FULL SOURCE PATCH ===== */
*{font-family:Arial,'Helvetica Neue',sans-serif!important}
.gld-fa-replace{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-style:normal;font-weight:800}
.social-letter{font-family:Arial,'Helvetica Neue',sans-serif!important;font-size:22px}
.how-image{display:block!important;position:relative!important;width:100%!important;height:460px!important;padding:0!important;overflow:hidden!important;border-radius:28px!important;background:#fff7d8!important}
.how-image img{display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;object-fit:cover!important;object-position:top center!important;border-radius:24px!important;transform:none!important}
.phone-screen picture{width:100%!important;height:100%!important;display:block!important}
.phone-custom-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:top center!important}
.live-feedback{contain:layout paint!important;will-change:transform,opacity!important}
.contact-float{contain:layout paint!important}
@media(max-width:768px){.how-image{height:560px!important;border-radius:24px!important}.how-image img{border-radius:22px!important}.phone-screen{height:609px!important;min-height:609px!important}}
@media(max-width:420px){.how-image{height:520px!important}}


/* =========================================================
   GOILADI MOBILE REDESIGN 2026 - VERIFIED
   Chỉ áp dụng cho điện thoại, desktop giữ nguyên.
========================================================= */
.gld-mobile-hero{display:none;}

@media(max-width:768px){
  body{padding-bottom:76px;}
  header{position:sticky!important;top:0!important;padding:8px 0!important;background:linear-gradient(180deg,#fff6d9 0%,rgba(255,246,217,.92) 100%);z-index:9999;}
  header .container{padding:0 10px!important;}
  .navbar{padding:10px 12px!important;border-radius:20px!important;align-items:center!important;justify-content:center!important;box-shadow:0 8px 24px rgba(0,0,0,.06)!important;}
  .logo{font-size:22px!important;gap:10px!important;justify-content:center!important;width:100%;}
  .logo img{width:46px!important;height:46px!important;border-radius:14px!important;}
  .nav-links,.navbar .nav-right{display:none!important;}

  /* Ẩn hero desktop cũ trên mobile để tránh bố cục dài và nặng */
  section.hero{display:none!important;}

  .gld-mobile-hero{display:block!important;padding:14px 12px 34px;background:radial-gradient(circle at 50% 0%,#fff7d6 0%,#ffe58a 45%,#fff4bf 100%);}
  .gld-mobile-hero-card{background:linear-gradient(180deg,#fff 0%,#fff8df 100%);border:1px solid rgba(255,179,0,.35);box-shadow:0 16px 38px rgba(255,179,0,.20);border-radius:28px;padding:20px 18px 18px;text-align:center;max-width:430px;margin:0 auto;}
  .gld-mobile-badge{display:inline-flex;align-items:center;justify-content:center;background:#111;color:#ffd84d;border:2px solid #ffd84d;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:900;margin-bottom:12px;box-shadow:0 8px 18px rgba(0,0,0,.12);}
  .gld-mobile-hero h1{font-size:34px;line-height:1.08;margin:4px 0 10px;color:#171717;font-weight:950;letter-spacing:-.8px;}
  .gld-mobile-hero p{font-size:15.5px;line-height:1.55;color:#4a3a15;margin:0 auto 16px;max-width:360px;font-weight:650;}
  .gld-mobile-cta-row{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;margin:14px 0;}
  .gld-mobile-cta-row a{text-decoration:none;border-radius:18px;height:54px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:950;white-space:nowrap;}
  .gld-mobile-primary{background:linear-gradient(135deg,#ffb300,#ffd84d);color:#111;box-shadow:0 10px 22px rgba(255,179,0,.30);}
  .gld-mobile-secondary{background:#111;color:#fff;border:2px solid #ffd84d;}
  .gld-mobile-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .gld-mobile-proof div{background:rgba(255,255,255,.78);border:1px solid rgba(255,179,0,.35);border-radius:18px;padding:10px 6px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .gld-mobile-proof strong{font-size:18px;line-height:1.1;color:#111;font-weight:950;}
  .gld-mobile-proof span{font-size:11.5px;line-height:1.25;color:#5a4818;font-weight:750;margin-top:4px;}
  .gld-mobile-poster{max-width:300px;margin:16px auto 12px;border-radius:30px;overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.18);background:#fff3bf;border:4px solid #ffd84d;}
  .gld-mobile-poster img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;object-position:top center;}
  .gld-mobile-quick-services{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:430px;margin:12px auto 0;}
  .gld-mobile-quick-services a{background:rgba(255,255,255,.9);border:1px solid rgba(255,179,0,.45);border-radius:999px;text-align:center;text-decoration:none;color:#111;font-weight:900;font-size:13px;padding:11px 8px;box-shadow:0 8px 18px rgba(0,0,0,.05);}
  .gld-mobile-download{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;margin:14px auto 0;}
  .gld-mobile-download a{height:46px;background:#000;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.14);}
  .gld-mobile-download img{width:100%;height:46px;object-fit:contain;display:block;}

  /* Nén khoảng cách section đầu sau hero */
  #how{padding-top:40px!important;}
  .section{padding-top:54px!important;padding-bottom:54px!important;}
  .section-title h2{font-size:34px!important;line-height:1.12!important;}
  .section-title p{font-size:15px!important;}

  /* Giữ nút liên hệ nổi nhưng nhỏ gọn hơn */
  .contact-float{right:10px!important;gap:8px!important;}
  .contact-float a{width:48px!important;height:48px!important;}
}

@media(max-width:390px){
  .gld-mobile-hero h1{font-size:30px;}
  .gld-mobile-hero-card{padding:18px 14px 16px;}
  .gld-mobile-poster{max-width:270px;}
  .gld-mobile-poster img{max-height:385px;}
  .gld-mobile-cta-row{grid-template-columns:1fr;}
  .gld-mobile-proof strong{font-size:16px;}
  .gld-mobile-proof span{font-size:10.5px;}
}


/* ===== GOILADI BRAND SEO + POPULAR ROUTES V2 ===== */
html,body{font-family:Tahoma,Arial,'Helvetica Neue',sans-serif!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.btn,.action-btn,.gld-mobile-primary,.gld-mobile-secondary,.seo-popular-group h4{font-family:Tahoma,Arial,'Helvetica Neue',sans-serif!important;font-weight:700!important;letter-spacing:0!important;line-height:1.25!important;}
.seo-popular-box-v2{background:linear-gradient(135deg,#fff9db,#fff);border:1px solid rgba(255,184,0,.28);box-shadow:0 18px 45px rgba(0,0,0,.06);border-radius:34px;padding:34px;margin-top:34px;}
.seo-popular-box-v2 h3{font-size:34px;margin-bottom:12px;color:#111;}
.seo-popular-intro{font-size:17px;line-height:1.8;color:#555;margin-bottom:24px!important;}
.seo-popular-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.seo-popular-group{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:24px;padding:22px;box-shadow:0 10px 25px rgba(0,0,0,.045);}
.seo-popular-group h4{font-size:21px;margin-bottom:16px;color:#111;}
.seo-popular-links{display:flex;flex-wrap:wrap;gap:10px;}
.seo-popular-links a{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:#fff4bd;border:1px solid rgba(255,179,0,.38);color:#111;text-decoration:none;font-size:14px;font-weight:700;line-height:1.35;transition:.2s;}
.seo-popular-links a:hover{background:#111;color:#ffd84d;transform:translateY(-2px);}
@media(max-width:768px){.seo-popular-box-v2{padding:22px;border-radius:26px}.seo-popular-box-v2 h3{font-size:26px}.seo-popular-groups{grid-template-columns:1fr;gap:14px}.seo-popular-group{padding:18px;border-radius:20px}.seo-popular-links a{font-size:13px;padding:9px 12px}.hero-title{font-size:36px!important;line-height:1.16!important}}


/* =========================================================
GOILADI FINAL FONT + ROUTE LINKS FIX VERIFIED
Fix dấu tiếng Việt nhỏ/lệch do font quá đậm và letter-spacing.
========================================================= */
html,body,button,input,textarea,select,a,p,span,div,li,td,th,label,strong,b,em,small,
h1,h2,h3,h4,h5,h6,
.logo,.nav-links,.nav-right,.btn,.action-btn,.driver-register-btn,
.hero-title,.hero-desc,.hero-benefit,.section-title,.service,.how-card,.cta,
.seo-popular-box,.seo-popular-box-v2,.seo-popular-group,.seo-popular-links,
.gld-v4-body,.gld-v4-header,.gld-v4-nav,.gld-v4-logo,.gld-v4-menu,.gld-v4-actions,
.gld-v4-btn,.gld-v4-badge,.gld-v4-breadcrumb,.gld-v4-hero-card,.gld-v4-lead,
.gld-v4-mini-usps,.gld-v4-title,.gld-v4-compare-card,.gld-v4-list,
.gld-v4-flow-step,.gld-v4-feature,.gld-v4-route-info,.gld-v4-faq,.gld-v4-footer{
  font-family:Tahoma,Arial,'Helvetica Neue',sans-serif!important;
  font-synthesis:none!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}

h1,h2,h3,h4,h5,h6,
.logo span,.hero-title,.section-title h2,.cta h2,
.gld-v4-hero-card h1,.gld-v4-title h2,.gld-v4-feature h3,.gld-v4-compare-card h3,
.gld-v4-route-info b,.gld-v4-flow-step b,.gld-v4-btn,.gld-v4-badge,
.seo-popular-box h3,.seo-popular-group h4{
  font-weight:700!important;
  letter-spacing:0!important;
  line-height:1.28!important;
}

.gld-v4-hero-card h1,.hero-title{
  font-weight:700!important;
  letter-spacing:-0.2px!important;
}

.gld-v4-btn,.action-btn,.btn,.driver-register-btn,.seo-popular-links a{
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

.gld-v4-badge,.gld-mobile-badge{
  font-weight:700!important;
  letter-spacing:0!important;
  line-height:1.4!important;
  text-transform:none!important;
}

.seo-popular-box-v2{margin-top:34px!important;}
.seo-popular-groups{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important;margin-top:22px!important;}
.seo-popular-group{background:#fff!important;border:1px solid rgba(0,0,0,.06)!important;border-radius:24px!important;padding:22px!important;box-shadow:0 10px 28px rgba(0,0,0,.05)!important;}
.seo-popular-group h4{font-size:22px!important;margin-bottom:14px!important;color:#111!important;}
.seo-popular-links{display:flex!important;flex-wrap:wrap!important;gap:10px!important;}
.seo-popular-links a{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:10px 13px!important;border-radius:999px!important;background:#fff7d1!important;color:#111!important;border:1px solid rgba(255,179,0,.28)!important;font-size:14px!important;text-decoration:none!important;}
.seo-popular-links a:hover{background:#ffd84d!important;transform:translateY(-1px)!important;}
@media(max-width:768px){
  .seo-popular-groups{grid-template-columns:1fr!important;gap:16px!important;}
  .seo-popular-group{padding:18px!important;border-radius:20px!important;}
  .seo-popular-group h4{font-size:19px!important;}
  .seo-popular-links a{font-size:13px!important;padding:9px 11px!important;}
  .gld-v4-hero-card h1{font-size:34px!important;line-height:1.24!important;}
}


/* ===== GOILADI MASTER V4 FONT + ROUTE FINAL FIX ===== */
html,body,button,input,select,textarea,
.gld-v4-body,.gld-v4-header,.gld-v4-nav,.gld-v4-logo,.gld-v4-menu,.gld-v4-actions,
.gld-v4-btn,.gld-v4-badge,.gld-v4-breadcrumb,.gld-v4-hero-card,.gld-v4-lead,
.gld-v4-mini-usps,.gld-v4-title,.gld-v4-compare-card,.gld-v4-list,
.gld-v4-flow-step,.gld-v4-feature,.gld-v4-route-info,.gld-v4-faq,.gld-v4-footer,
.hero-title,.section-title h2,.seo-popular-box,.seo-popular-links a,.btn,.action-btn{
  font-family:Tahoma,Arial,'Helvetica Neue',sans-serif!important;
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
}
.hero-title,.gld-v4-hero-card h1,.section-title h2{font-weight:700!important;line-height:1.16!important;letter-spacing:-.02em!important;}
.btn,.action-btn,.driver-register-btn,.seo-popular-links a{font-weight:700!important;line-height:1.35!important;letter-spacing:0!important;}
.seo-popular-box-v2{background:#fff;border:1px solid #ffd84d;border-radius:28px;padding:28px;margin-top:36px;box-shadow:0 12px 30px rgba(255,179,0,.08)}
.seo-popular-groups{display:grid;grid-template-columns:1fr;gap:22px;margin-top:18px}
.seo-popular-group{background:#fffaf0;border:1px solid #ffe08a;border-radius:22px;padding:20px}
.seo-popular-group h4{font-size:22px;margin:0 0 14px;font-weight:700}
.seo-popular-links{display:flex;flex-wrap:wrap;gap:10px}
.seo-popular-links a{display:inline-flex;align-items:center;background:#fff;border:1px solid #ffd84d;border-radius:999px;padding:10px 14px;color:#111;text-decoration:none;font-size:15px}
@media(max-width:768px){.seo-popular-box-v2{padding:18px;border-radius:22px}.seo-popular-group{padding:16px}.seo-popular-links a{width:100%;border-radius:14px;justify-content:flex-start}.hero-title,.gld-v4-hero-card h1{font-size:34px!important;line-height:1.24!important}}


/* ===== GOILADI V5 APP BOX + SUPPORT MENU FIX ===== */
.appbox{
  background:linear-gradient(135deg,#fffdf5 0%,#fff8dc 55%,#fff1b7 100%)!important;
  color:#111!important;
  border:1px solid #ffd84d!important;
  border-radius:30px!important;
  box-shadow:0 18px 45px rgba(255,179,0,.16)!important;
}
.appbox h2{color:#111!important;margin:0 0 10px!important}
.appbox p{color:#333!important;margin:0!important}
.store-row a{background:#000!important;border-radius:16px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 10px 24px rgba(0,0,0,.16)!important;overflow:hidden!important}
.store-row img{display:block!important}
.app-web-quick{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.app-web-quick span{color:#444;font-weight:700}
.app-web-quick a{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#111;color:#ffd84d;border:2px solid #ffd84d;border-radius:16px;padding:10px 16px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.landing-contact-float{position:fixed;right:18px;bottom:110px;display:flex;flex-direction:column;gap:12px;z-index:9999}
.landing-contact-float a{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:700;font-family:Tahoma,Arial,sans-serif;box-shadow:0 12px 28px rgba(0,0,0,.2);transition:.2s}
.landing-contact-float a:hover{transform:translateY(-2px) scale(1.04)}
.landing-contact-float .lf-phone{background:#ffb300;color:#fff}
.landing-contact-float .lf-zalo{background:#0a84ff;color:#fff;font-size:13px}
.landing-contact-float .lf-fb{background:#1877f2;font-size:26px}
.landing-contact-float .lf-mess{background:#7c3aed;font-size:22px}
.landing-contact-float .lf-tt{background:#000;font-size:24px}
.landing-contact-float .lf-book{background:#111;color:#ffd84d;border:2px solid #ffd84d}
@media(max-width:768px){
  .appbox{grid-template-columns:1fr!important;padding:24px!important;border-radius:24px!important}
  .store-row{gap:10px!important}
  .store-row a{width:calc(50% - 5px)!important;min-width:0!important}
  .store-row img{width:100%!important;height:48px!important;object-fit:contain!important}
  .app-web-quick{display:grid;grid-template-columns:1fr;gap:8px}
  .app-web-quick a{width:100%;padding:12px 14px}
  .landing-contact-float{right:10px;bottom:88px;gap:8px}
  .landing-contact-float a{width:48px;height:48px;font-size:18px}
  .landing-contact-float .lf-zalo{font-size:11px}
  .landing-contact-float .lf-fb{font-size:22px}
}