/*
Theme Name: Miavillalagi Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/********************************** BO GÓC HÌNH ẢNH  *******************************/
.img-inner,
.box-image {
  border-radius: 12px;
  overflow: hidden;
}

.img-inner img,
.box-image img,
.entry-content img {
  border-radius: 12px;
}

.section-bg img,
.section-bg-overlay,
.section-bg-overlay.absolute.fill,
.absolute.fill,
.banner img,
.slider img,
.flickity-slider img,
#logo img,
.logo img,
.header-logo,
.header-logo-dark,
.icon img,
svg {
  border-radius: 0 !important;
}
/**********************************LỚP PHỦ SHADOW TRÊN HEADER MAIN *******************************/
.header-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    pointer-events: none;  /*Để không ảnh hưởng đến nội dung bên dưới */    
}
/********************************** NÚT GOLD ĐẶT PHÒNG HEADER MAIN *******************************/
.header-button-1 .header-button a.button {
  font-weight:500;
  background: linear-gradient(
    180deg,
    #c79512 0%,
    #f7e47d 45%,
    #d9ad2b 70%,
    #a87908 100%
  ) !important;

  color: #000000 !important;
  border: 1px solid transparent !important;
  transition: all 0.25s ease;
}

.header-button-1 .header-button a.button span {
  color: #000000 !important;
  transition: color 0.25s ease;
}

.header-button-1 .header-button a.button:hover,
.header-button-1 .header-button a.button:hover span,
.header-button-1 .header-button a.button:focus,
.header-button-1 .header-button a.button:focus span {
  color: #000000 !important;
  border-color: transparent !important;
}

/******************************************* CSS FORM ĐẶT PHÒNG ******************************/
.villa-booking-horizontal {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.villa-booking-horizontal .booking-field,
.villa-booking-horizontal .booking-submit {
  flex: 1;
}

.villa-booking-horizontal input[type="date"],
.villa-booking-horizontal input[type="tel"] {
  width: 100%;
  height: 48px;
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 0 14px;
  font-size: 15px;
}

.villa-booking-horizontal input[type="submit"] {
  width: 100%;
  height: 48px;
  border-radius: 6px;
  border: none;
  background: #028768;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.villa-booking-horizontal input[type="submit"]:hover {
  background: #026f56;
}

@media (max-width: 768px) {
  .villa-booking-horizontal {
    flex-direction: column;
  }

  .villa-booking-horizontal .booking-field,
  .villa-booking-horizontal .booking-submit {
    width: 100%;
  }
}

/*********************************************************   NÚT BUTTON BODY **************************************************/
.button {
  font-weight: 500;
  letter-spacing: 0.2px;
}
/************************************************ FORM KIỂM TRA VILLA **********************************************/
.villa-check-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: whitesmoke;
  padding: 18px 20px;
  border-radius: 12px;
  box-sizing: border-box;
}
/* Cột input */
.villa-check-form .villa-form-field {
  flex: 1;
}
/* Cột nút */
.villa-check-form .villa-form-submit {
  flex: 0 0 150px;
}
/* Xóa khoảng trắng mặc định của Contact Form 7 */
.villa-check-form p {
  margin: 0;
}
/* Input chung */
.villa-check-form input[type="date"],
.villa-check-form input[type="tel"] {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}
/* Placeholder */
.villa-check-form input::placeholder {
  color: #777777;
}
/* Chỉ thêm icon cho trường số điện thoại */
.villa-check-form .icon-phone {
  position: relative;
}
.villa-check-form .icon-phone input[type="tel"] {
  padding-left: 42px;
}
.villa-check-form .icon-phone::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-color: #3f3f3f;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.24 1.01l-2.21 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.24 1.01l-2.21 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Nút gửi */
.villa-check-form input[type="submit"].villa-submit {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 18px;

  border: 1px solid transparent;
  border-radius: 15px;
  background:
  linear-gradient(
    180deg,
    #b97c0f 0%,
    #d9ad2b 28%,
    #fff3a6 48%,
    #f7e47d 56%,
    #d9ad2b 72%,
    #8f5f08 100%
  ) padding-box,
  linear-gradient(
    180deg,
    #fff6bd 0%,
    #c79512 45%,
    #8f5f08 100%
  ) border-box !important;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  line-height: 46px;
  cursor: pointer;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(95, 62, 10, 0.25);

  transition: all 0.25s ease;
}

/* Hover nút gửi*/
.villa-check-form input[type="submit"].villa-submit:hover {
  background:
    linear-gradient(
      180deg,
      #fff8cc 0%,
      #f0d26b 38%,
      #d4a23a 68%,
      #9b6b1a 100%
    ) padding-box,
    linear-gradient(
      180deg,
      #fffbe0 0%,
      #e0b84a 45%,
      #9b6b1a 100%
    ) border-box;

  color: #000000;
  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(95, 62, 10, 0.25);
}
/* Spinner Contact Form 7 */
.villa-check-form .wpcf7-spinner {
  position: absolute;
}
/* Thông báo sau khi gửi */
.wpcf7 form .wpcf7-response-output {
  margin: 12px 0 0;
}
/* Mobile */
@media (max-width: 768px) {
  .villa-check-form {
    flex-direction: column;
    padding: 16px;
    gap: 10px;
  }
  .villa-check-form .villa-form-field,
  .villa-check-form .villa-form-submit {
    width: 100%;
    flex: none;
  }
  .villa-check-form input[type="date"],
  .villa-check-form input[type="tel"],
  .villa-check-form input[type="submit"].villa-submit {
    height: 48px;
  }
}


/**************************************** HIỆU ỨNG ÁNH SÁNG LƯỚT TRÊN LOGO **********************************************/
#logo a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}

#logo img {
  position: relative;
  z-index: 1;
  display: block;
}

#logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 230, 150, 0) 35%,
    rgba(255, 245, 200, 0.45) 46%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 245, 200, 0.45) 54%,
    rgba(255, 230, 150, 0) 65%,
    transparent 100%
  );

  background-size: 220% 220%;
  background-position: -120% center;

  filter: blur(5px);
  opacity: 0;

  -webkit-mask-image: url("/wp-content/uploads/2026/05/LOGO-GOLD-MIA-VILLA99.webp");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("/wp-content/uploads/2026/05/LOGO-GOLD-MIA-VILLA99.webp");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  animation: logo-shine-mask 3s ease-in-out infinite;
}

@keyframes logo-shine-mask {
  0% {
    background-position: -120% center;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    background-position: 120% center;
    opacity: 0;
  }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}