/* ==========================================================
   DR.EOPI - PC VIP BOOKING BUTTON + POPUP
   ========================================================== */

/* Replace circular booking icon with a premium horizontal CTA */
.desktop-contact-rail .quick-booking-vip{
  width:236px;
  min-height:66px;
  border:1px solid rgba(231,203,154,.45);
  border-radius:18px;
  padding:10px 13px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 24px;
  align-items:center;
  gap:10px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(135deg,#2d654b 0%,#214b38 56%,#163d2c 100%);
  box-shadow:0 13px 32px rgba(21,65,45,.28),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.desktop-contact-rail .quick-booking-vip:hover{
  transform:translateY(-3px);
  box-shadow:0 17px 38px rgba(21,65,45,.34),inset 0 1px 0 rgba(255,255,255,.16);
  filter:saturate(1.05);
}
.quick-booking-icon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#f0d5a0,#c99350);
  color:#264936;
  font:900 19px Arial,Helvetica,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.quick-booking-copy{display:flex;flex-direction:column;min-width:0}
.quick-booking-copy strong{font:850 14px/1.15 Arial,Helvetica,sans-serif;color:#fff}
.quick-booking-copy small{margin-top:4px;font:600 9.5px/1.25 Arial,Helvetica,sans-serif;color:#d7e6de;white-space:normal}
.quick-booking-arrow{font-size:19px;color:#f0d4a0}

/* Popup */
.global-booking-modal{
  position:fixed;inset:0;z-index:11000;
  display:none;align-items:center;justify-content:center;
  padding:22px;
}
.global-booking-modal.open{display:flex}
.global-booking-backdrop{
  position:absolute;inset:0;background:rgba(8,25,17,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.global-booking-dialog{
  position:relative;z-index:1;
  width:min(720px,100%);
  max-height:min(90vh,830px);
  overflow:auto;
  border-radius:24px;
  padding:30px;
  background:
    radial-gradient(circle at 100% 0,rgba(232,205,158,.18),transparent 30%),
    #fff;
  border:1px solid rgba(36,77,58,.12);
  box-shadow:0 32px 90px rgba(0,0,0,.28);
  animation:globalBookingIn .34s cubic-bezier(.22,1,.36,1);
}
@keyframes globalBookingIn{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:none}
}
.global-booking-close{
  position:absolute;right:17px;top:17px;
  width:42px;height:42px;border-radius:12px;
  border:1px solid #dae3dd;background:#fff;color:#214b38;
  font:300 30px/1 Arial,Helvetica,sans-serif;cursor:pointer;
}
.global-booking-head{padding:2px 58px 18px 0;border-bottom:1px solid #edf0ed;margin-bottom:18px}
.global-booking-kicker{display:block;color:#a7783f;font-size:10px;font-weight:850;letter-spacing:.16em}
.global-booking-head h3{margin:5px 0 7px;font-size:29px;color:#243a2f}
.global-booking-head p{margin:0;color:#718078;font-size:13px;line-height:1.6}
.global-booking-form{display:grid;gap:13px}
.global-booking-grid{display:grid;gap:13px}
.global-booking-grid.two{grid-template-columns:1fr 1fr}
.global-booking-form label{font-size:12px;font-weight:800;color:#34463d}
.global-booking-form input,
.global-booking-form select,
.global-booking-form textarea{
  width:100%;margin-top:6px;
  border:1px solid #d9e1dc;border-radius:11px;
  background:#fbfcfb;color:#2d4036;
  padding:12px 13px;font:inherit;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.global-booking-form input,
.global-booking-form select{height:47px}
.global-booking-form textarea{resize:vertical;min-height:105px}
.global-booking-form input:focus,
.global-booking-form select:focus,
.global-booking-form textarea:focus{
  border-color:#316c51;background:#fff;
  box-shadow:0 0 0 3px rgba(49,108,81,.09)
}
.global-booking-submit{
  height:50px;border:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#2d654b,#173f2d);
  color:#fff;font:850 14px Arial,Helvetica,sans-serif;
  cursor:pointer;box-shadow:0 10px 22px rgba(31,78,55,.16);
}
.global-booking-submit:hover{filter:brightness(1.05);transform:translateY(-1px)}
.global-booking-foot{
  margin-top:14px;padding-top:13px;border-top:1px solid #edf0ed;
  color:#758179;font-size:10.5px;text-align:center;
}
body.global-booking-open{overflow:hidden}

@media(max-width:900px){
  /* Requested VIP button is PC-only; mobile continues to use bottom toolbar. */
  .desktop-contact-rail .quick-booking-vip{display:none!important}
}
@media(max-width:620px){
  .global-booking-modal{padding:12px}
  .global-booking-dialog{padding:22px 15px;border-radius:18px}
  .global-booking-grid.two{grid-template-columns:1fr}
  .global-booking-head h3{font-size:24px}
}


/* ==========================================================
   FIX: REMOVE HOME BOOKING BLOCK / MOBILE POPUP / BACKTOP RIGHT
   ========================================================== */

/* Mobile Đặt lịch uses button but keeps same visual as toolbar link */
@media(max-width:900px){
  .mobile-bottom-tools .mobile-booking-popup-btn{
    min-height:52px;
    border:0;
    border-radius:13px;
    background:#244d3a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font:inherit;
    cursor:pointer;
    width:100%;
  }
  .mobile-bottom-tools .mobile-booking-popup-btn b{
    font-weight:800;
  }

  /* Popup works on mobile too */
  .global-booking-modal{
    padding:12px;
  }
}

/* Keep Back To Top on the bottom-right even when contact/booking rail is on left */
@media(min-width:901px){
  .desktop-contact-rail .quick-icon.backtop{
    position:fixed !important;
    right:18px !important;
    left:auto !important;
    bottom:22px !important;
    z-index:190 !important;
  }

  .desktop-contact-rail .quick-icon.backtop em{
    left:auto !important;
    right:64px !important;
    transform:translateY(-50%) translateX(5px) !important;
  }

  .desktop-contact-rail .quick-icon.backtop:hover em{
    transform:translateY(-50%) translateX(0) !important;
  }

  .desktop-contact-rail .quick-icon.backtop em::after{
    left:auto !important;
    right:-5px !important;
    border-width:5px 0 5px 5px !important;
    border-color:transparent transparent transparent #202a25 !important;
  }
}