a{
text-decoration:none !important;
}

/* ===== FLOATING CONTACT ===== */

.floating-contact{
position:fixed;
right:20px;
bottom:100px;
display:flex !important;
flex-direction:column !important;
z-index:9999;
}

.floating-contact a{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.3s;
}

.floating-contact a + a{
margin-top:10px;
}

.floating-contact img{
width:30px;
height:30px;
object-fit:contain;
}

.floating-contact a:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.call-btn{
background:linear-gradient(135deg,#ff5a1f,#ff7a18);
}

.zalo-btn{
background:#fff;
}

@media(max-width:768px){
.floating-contact{
right:18px;
bottom:18px;
}
.floating-contact a{
width:52px;
height:52px;
}
}

/* ================= DESIGN SYSTEM ================= */

:root{
--radius-lg:28px;
--radius-md:18px;
--radius-sm:12px;

--shadow-soft:0 15px 40px rgba(0,0,0,.08);
--shadow-medium:0 20px 60px rgba(0,0,0,.18);
--shadow-heavy:0 30px 80px rgba(0,0,0,.35);

--transition:.35s cubic-bezier(.4,.2,.2,1);
}

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

.hero{
max-width:1200px;
margin:40px auto;
padding:160px 60px;
color:#fff;
background:radial-gradient(circle at top,#120A23,#0B0614);
border-radius:var(--radius-lg);
position:relative;
overflow:hidden;
box-shadow:var(--shadow-heavy);
isolation:isolate;
}

.hero::before,
.hero::after{
content:"";
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,#ff6a0030,transparent);
filter:blur(100px);
pointer-events:none;
}

.hero::before{
top:-200px;
left:-200px;
opacity:.6;
}

.hero::after{
top:-150px;
right:-200px;
}

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

.hero h1{
font-size:64px;
font-weight:800;
line-height:1.1;
letter-spacing:-1px;
margin-bottom:25px;
color:#fff;
text-shadow:0 8px 40px rgba(0,0,0,.6);
animation:fadeUp .9s ease;
}

.hero h1 span,
.highlight{
background:linear-gradient(135deg,#ff6a00,#ffb347);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}

.hero p{
color:#e3e3f5;
font-size:18px;
margin-bottom:35px;
max-width:520px;
animation:fadeUp 1.1s ease;
}

.hero-image img{
width:100%;
max-width:520px;
border-radius:var(--radius-md);
box-shadow:0 20px 60px rgba(0,0,0,.35);
transition:transform .4s ease;
animation:float 7s ease-in-out infinite;
}

/* ================= BUTTON ================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 38px;
border-radius:var(--radius-sm);
background:linear-gradient(135deg,#E6392E,#FF6A00);
color:#fff !important;
font-weight:600;
text-decoration:none !important;
box-shadow:0 12px 35px rgba(255,106,0,.35);
transition:var(--transition);
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 20px 45px rgba(255,106,0,.5);
}

/* ================= BENTO ================= */

.bento-title{
color:#e8e8ff;
font-weight:700;
}

.bento{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:25px;
margin:120px 0;
}

.large{
grid-row:span 2;
}

.bento-card{
background:linear-gradient(135deg,#0c0220,#15002e);
padding:30px;
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
transition:var(--transition);
box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.bento-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 60px rgba(0,0,0,.45);
background:linear-gradient(135deg,#15002e,#240048);
}

.bento-card a{
color:#fff;
text-decoration:none;
font-weight:600;
font-size:18px;
display:block;
width:100%;
height:100%;
}

.bento-card h3{
font-size:34px;
font-weight:700;
line-height:1.2;
margin-bottom:8px;
}

.bento-card.large p{
color:rgba(255,255,255,.85);
font-size:17px;
line-height:1.6;
max-width:420px;
}

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

.services{
margin-top:140px;
}

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

.card{
background:#fff;
padding:35px;
border-radius:var(--radius-md);
border:1px solid #eaeaf0;
box-shadow:var(--shadow-soft);
transition:var(--transition);
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
top:-80px;
right:-80px;
width:160px;
height:160px;
background:radial-gradient(circle,#ff6a0020,transparent);
border-radius:50%;
opacity:0;
transition:.4s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-medium);
border:1px solid #ff6a00;
border-radius:24px;
}

.card:hover::before{
opacity:1;
}

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

.card h3 a{
color:#0b6ea8;
text-decoration:none;
transition:.3s;
}

.card h3 a:hover{
color:#ff7a18;
}

.card p{
color:#6b6b78;
line-height:1.6;
}

/* ================= PORTFOLIO ================= */

.portfolio{
margin-top:140px;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
}

.portfolio-grid p{
margin:0;
background:#fff;
padding:14px;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,.12);
transition:var(--transition);
}

.portfolio-grid p:hover{
transform:translateY(-8px);
box-shadow:0 30px 70px rgba(0,0,0,.2);
}

.portfolio-grid img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.18);
transition:transform .4s ease;
}

.portfolio-grid img:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 35px 80px rgba(0,0,0,.35);
}

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

.cta{
margin-top:100px;
padding:80px 20px;
text-align:center;
color:#fff;
background:linear-gradient(135deg,#ff5a1f,#ff7a18);
border-radius:30px;
position:relative;
overflow:hidden;
}

.cta::before{
content:"";
position:absolute;
width:400px;
height:400px;
background:radial-gradient(circle,#ffffff40,transparent);
top:-120px;
left:-120px;
filter:blur(80px);
pointer-events:none;
}

.cta h2{
font-size:36px;
margin-bottom:25px;
}

.cta .btn{
background:#fff;
color:#ff5a1f !important;
padding:18px 40px;
border-radius:14px;
font-weight:700;
box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.cta .btn:hover{
transform:translateY(-4px);
box-shadow:0 25px 60px rgba(0,0,0,.3);
}

.cta-note{
margin-top:18px;
opacity:.9;
font-size:15px;
}

/* ================= SLIDER ================= */

.slick-dots li button:before{
font-size:10px;
color:#ff6a00;
opacity:.5;
}

.slick-dots li.slick-active button:before{
opacity:1;
color:#ff6a00;
}

/* ================= ANIMATION ================= */

@keyframes fadeUp{
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0)}
}

/* ================= GLOBAL ================= */

img{
max-width:100%;
height:auto;
}

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

@media (max-width:1024px){

.hero{
padding:120px 40px;
margin:30px 20px;
}

.hero-grid{
grid-template-columns:1fr;
gap:50px;
text-align:center;
}

.hero h1{font-size:48px;}

.hero p{margin:auto;}

.hero-image img{
max-width:420px;
margin:auto;
}

.bento{
grid-template-columns:1fr 1fr;
gap:22px;
}

.large{
grid-row:auto;
grid-column:span 2;
}

.service-grid{
grid-template-columns:repeat(2,1fr);
}

.portfolio-grid{
grid-template-columns:repeat(2,1fr);
}

.cta{
padding:70px 30px;
}

.cta h2{font-size:30px;}
}

@media (max-width:768px){

.hero{
padding:80px 24px;
margin:20px;
border-radius:22px;
}

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

.hero p{
font-size:16px;
max-width:100%;
}

.bento{
grid-template-columns:1fr;
gap:18px;
margin:80px 0;
}

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

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

.cta{
padding:60px 20px;
border-radius:22px;
}

.cta h2{font-size:26px;}
}

@media (max-width:480px){

.hero{
padding:70px 20px;
}

.hero h1{font-size:30px;}

.hero p{font-size:15px;}

.btn{
padding:12px 22px;
font-size:14px;
}

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

/* ================= EXTRA ================= */

.faq-number{
display:inline-block;
width:32px;
height:32px;
background:#6ad0ff;
color:#fff;
text-align:center;
line-height:32px;
border-radius:8px;
margin-right:10px;
font-weight:700;
}

.product-gallery{
max-width:600px;
}

.product-gallery .main-image img{
width:100%;
border-radius:8px;
}

.thumbnail-list{
display:flex;
gap:8px;
margin-top:10px;
}

.thumbnail-list img{
width:70px;
cursor:pointer;
border:2px solid transparent;
}

.thumbnail-list img:hover{
border-color:#0073aa;
}