/* ====================================
RESPONSIVE CSS - GLOBAL
Hoạt động cho toàn bộ website
==================================== */

*{
box-sizing:border-box;
}

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

/* ====================================
LAPTOP NHỎ
==================================== */
i
@media (max-width:1200px){

.container{
padding:0 20px;
}

.wifi-slider{
padding:0 40px;
}

}

/* ====================================
TABLET
==================================== */

@media (max-width:1024px){

.header{
padding:10px 20px;
}

.menu{
gap:15px;
}

.wifi-slider{
padding:0 30px;
}

.wifi-box{
min-width:50%;
padding:15px;
}

.wifi-card{
padding:20px;
}

.wifi-card h3{
font-size:20px;
}

.price{
font-size:20px;
}

}

/* ====================================
TABLET DỌC
==================================== */

@media (max-width:768px){

.header{
flex-direction:column;
align-items:center;
gap:10px;
}

.logo img{
height:50px;
}

.menu{
flex-direction:column;
align-items:center;
gap:10px;
}

.wifi-slider{
padding:0 20px;
}

.wifi-box{
min-width:100%;
padding:15px;
}

.wifi-card{
padding:20px;
}

.wifi-card h3{
font-size:18px;
}

.price{
font-size:18px;
}

.wifi-box ul{
font-size:14px;
}

.slide-btn{
width:40px;
height:40px;
font-size:18px;
}

}

/* ====================================
MOBILE
==================================== */

@media (max-width:600px){

.header{
flex-direction:column;
gap:10px;
}

.menu{
flex-direction:column;
gap:8px;
}

.menu a{
font-size:15px;
}

.wifi-title{
font-size:24px;
text-align:center;
}

.wifi-card{
padding:15px;
}

.wifi-card h3{
font-size:18px;
}

.price{
font-size:18px;
}

.wifi-box ul{
font-size:14px;
}

.slide-btn{
width:35px;
height:35px;
font-size:16px;
}

}

/* ====================================
MOBILE NHỎ
==================================== */

@media (max-width:480px){

.logo img{
height:40px;
}

.menu a{
font-size:14px;
}

.wifi-title{
font-size:22px;
}

.wifi-card{
padding:12px;
}

.wifi-card h3{
font-size:16px;
}

.price{
font-size:16px;
}

.wifi-box ul{
font-size:13px;
}

.slide-btn{
width:30px;
height:30px;
font-size:14px;
}

}

/* ====================================
SIÊU NHỎ
==================================== */

@media (max-width:360px){

.wifi-title{
font-size:20px;
}

.menu a{
font-size:13px;
}

.price{
font-size:15px;
}

}

/* FIX WIFI CARD MOBILE */

@media (max-width:768px){

.wifi-box{
min-width:100% !important;
width:100%;
padding:10px;
}

.wifi-card{
width:100%;
padding:20px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.wifi-card img{
width:100%;
height:auto;
border-radius:10px;
}

.wifi-card ul{
padding-left:18px;
}

}

/* MOBILE NHỎ */

@media (max-width:480px){

.wifi-card{
padding:15px;
}

.wifi-card h3{
font-size:18px;
}

.price{
font-size:18px;
}

.wifi-card ul{
font-size:14px;
}

}

/* ================= TABLET ================= */

@media (max-width:1024px){

.wifi-box,
.camera-box,
.tv-box{
min-width:50% !important;
width:50%;
padding:15px;
}

}

/* ================= MOBILE ================= */

@media (max-width:768px){

.wifi-box,
.camera-box,
.tv-box{
min-width:100% !important;
width:100%;
padding:10px;
}

.wifi-card,
.camera-card,
.tv-card{
width:100%;
padding:20px;
border-radius:12px;
box-sizing:border-box;
}

.wifi-card img,
.camera-card img,
.tv-card img{
width:100%;
height:auto;
border-radius:10px;
}

.wifi-card ul,
.camera-card ul,
.tv-card ul{
padding-left:18px;
}

}

/* ================= MOBILE NHỎ ================= */

@media (max-width:480px){

.wifi-card,
.camera-card,
.tv-card{
padding:15px;
}

.wifi-card h3,
.camera-card h3,
.tv-card h3{
font-size:18px;
}

.price{
font-size:18px;
}

.wifi-card ul,
.camera-card ul,
.tv-card ul{
font-size:14px;
}

}