*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;line-height:1.6;background:#1c4064;color:#fff;}
h2{color:#f8c302;margin-bottom:15px;text-align:center;}

/* HEADER */
.header{
    background:url('phong7.jpg') center/cover no-repeat;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    flex-direction:column;
    position:relative;
}
.header-content h1{font-size:3rem;text-shadow:2px 2px 6px #000;}
.header-content p{font-size:1.2rem;text-shadow:1px 1px 4px #000;}
.open-booking-btn{padding:12px 25px;font-size:16px;background:#ff6600;border:none;color:#fff;border-radius:6px;cursor:pointer;}
.open-booking-btn:hover{background:#e65c00;}

/* SLIDESHOW */
.slideshow-container{max-width:1000px;margin:20px auto;position:relative;}
.mySlides{display:none;position:relative;}
.mySlides img{width:100%;border-radius:15px;}
.slide-title{
    position:absolute;bottom:20px;left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.6);
    color:white;padding:8px 12px;border-radius:5px;font-size:1.2rem;
}

/* MODAL */
.modal{display:none;position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);}
.modal-content{
    background:#111;
    margin:5% auto;padding:20px;border-radius:10px;
    width:90%;max-width:400px;color:#fff;
}
.modal-content label{margin-top:10px;font-size:1rem;}
.modal-content input{width:100%;padding:8px;margin-bottom:10px;border-radius:5px;border:none;}
.modal-content button{padding:10px;background:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;width:100%;}
.modal-content button:hover{background:#218838;}
.close{position:absolute;top:10px;right:15px;font-size:24px;cursor:pointer;}

/* CUSTOM ALERT */
.custom-alert{display:none;position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#4CAF50;color:#fff;padding:15px 20px;border-radius:8px;z-index:10000;box-shadow:0 4px 8px rgba(0,0,0,0.2);}
.custom-alert button{background:#fff;color:#4CAF50;border:none;margin-left:10px;padding:5px 8px;border-radius:5px;cursor:pointer;}

/* MAP */
.map-section{padding:20px;text-align:center;}
#map{height:400px;width:95%;margin:auto;border-radius:10px;}

/* FIXED BUTTONS */
.fixed-call,
.fixed-zalo {
  position: fixed;
  right: 20px;             /* sát mép phải */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  color: #fff;
  z-index: 999;
  text-decoration: none;
}

/* Call ở trên cùng */
.fixed-call {
  top: 20px;
  background: #038f24;
}

/* Zalo dưới Call */
.fixed-zalo {
  top: 100px;              /* cách nút trên 80px (70px + 10px khoảng cách) */
  background: #075E54;
}
.fixed-zalo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.fixed-pickup {
    background: #efd41f;
  display: block;
  width: 40%;
  padding: 12px;
  border: none;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #fcfcfc;
  max-width: 250px;
  margin: 15px auto;
}

@media(max-with:768px){
  .fixed-pickup {
    width: 80%;            /* nút rộng hơn trên mobile */
    font-size: 16px;       /* chữ to hơn chút */
    padding: 14px;
  }
}



/* MEDIA QUERY */
@media(max-width:768px){
    .header-content h1{font-size:2rem;}
    .header-content p{font-size:1rem;}
    .slide-title{font-size:1rem;bottom:10px;}
    .modal-content{width:95%;}
    .open-booking-btn{padding:10px 20px;font-size:14px;}
    .fixed-call,.fixed-zalo{width:40px;height:40px;font-size:20px;}
}
@media(max-width:480px){
    .header-content h1{font-size:1.5rem;}
    .header-content p{font-size:0.9rem;}
    .slide-title{font-size:0.9rem;}
    .open-booking-btn{padding:8px 15px;font-size:12px;}
}