/* V34 - Popup đặt lịch theo phong cách preview-booking.html */
.booking-modal .booking-preview-style-popup{
  width:min(96vw,1080px);
  height:min(92vh,760px);
  max-height:760px;
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  border-radius:34px;
  background:rgba(255,255,255,.96);
  box-shadow:0 38px 120px rgba(0,18,49,.52),inset 0 1px 0 #fff;
}
.booking-popup-intro{
  position:relative;
  isolation:isolate;
  min-width:0;
  padding:30px 26px 24px;
  color:#fff;
  background:radial-gradient(circle at 100% 0,rgba(58,209,235,.42),transparent 32%),linear-gradient(155deg,#052d68 0%,#0758ad 58%,#0876c4 100%);
  overflow:hidden;
}
.booking-popup-intro:before,.booking-popup-intro:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;z-index:-1}
.booking-popup-intro:before{width:260px;height:260px;right:-125px;top:-105px;box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.022)}
.booking-popup-intro:after{width:160px;height:160px;left:-100px;bottom:-65px}
.booking-popup-intro-glow{position:absolute;width:180px;height:180px;left:50%;top:195px;border-radius:50%;background:rgba(65,218,238,.25);filter:blur(34px);transform:translateX(-50%);z-index:-1;animation:bookingPopupGlow 3.6s ease-in-out infinite}
.booking-popup-kicker{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:#9deaff;font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.booking-popup-kicker span{width:24px;height:2px;border-radius:999px;background:#8fe8ff}
.booking-popup-intro h2{margin:0;color:#fff;font-size:clamp(1.55rem,2.7vw,2.2rem);line-height:1.13;letter-spacing:-.045em}
.booking-popup-intro h2 em{color:#9eeaff;font-style:normal}
.booking-popup-description{margin:14px 0 0;color:#d9efff;font-size:.73rem;line-height:1.7}
.booking-popup-mascot-wrap{position:relative;height:165px;margin:7px 0 1px;display:grid;place-items:center}
.booking-popup-mascot{position:relative;z-index:2;width:165px;height:165px;object-fit:contain;animation:bookingPopupMascotFloat 3.4s ease-in-out infinite;filter:drop-shadow(0 18px 18px rgba(0,20,60,.28))}
.booking-popup-mascot-ring{position:absolute;width:136px;height:136px;border:1px solid rgba(171,237,255,.38);border-radius:50%;box-shadow:0 0 0 18px rgba(105,223,244,.07),0 0 0 36px rgba(105,223,244,.035);animation:bookingPopupRing 4.5s linear infinite}
.booking-popup-mascot-badge{position:absolute;right:10px;bottom:24px;z-index:3;padding:6px 9px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(3,49,106,.78);color:#fff;font-size:.55rem;font-weight:900;box-shadow:0 8px 22px rgba(0,22,61,.28);backdrop-filter:blur(8px);animation:bookingPopupBadge 2.8s ease-in-out infinite}
.booking-popup-steps{list-style:none;margin:3px 0 0;padding:0;display:grid;gap:7px}
.booking-popup-steps li{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.075);backdrop-filter:blur(8px);transition:transform .2s ease,background .2s ease}
.booking-popup-steps li:hover{transform:translateX(4px);background:rgba(255,255,255,.12)}
.booking-popup-steps li>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#fff;color:#0758ad;font-size:.7rem;font-weight:950;box-shadow:0 6px 14px rgba(0,35,83,.16)}
.booking-popup-steps div{display:flex;flex-direction:column}.booking-popup-steps strong{color:#fff;font-size:.69rem}.booking-popup-steps small{color:#bfe7ff;font-size:.57rem;margin-top:1px}
.booking-popup-trust-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.booking-popup-trust-row span{display:inline-flex;align-items:center;gap:5px;color:#d7f2ff;font-size:.55rem;font-weight:750}.booking-popup-trust-row b{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);color:#8ff2d0;font-size:.58rem}
.booking-popup-form-side{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,249,254,.96))}
.booking-modal .booking-preview-style-popup .booking-modal-header{position:relative;flex:0 0 auto;padding:14px 18px 12px;border-bottom:0;color:inherit;background:linear-gradient(180deg,#fff,#fbfdff)}
.booking-modal .booking-preview-style-popup .booking-modal-brand{gap:11px;padding-right:118px}
.booking-popup-form-icon{flex:0 0 auto;width:43px;height:43px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(145deg,#1478df,#0754aa);box-shadow:0 9px 20px rgba(11,95,196,.25);animation:bookingPopupIconPulse 2.8s ease-in-out infinite}
.booking-popup-form-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.booking-modal .booking-preview-style-popup .booking-modal-kicker{color:#0b68c5;font-size:.6rem}
.booking-modal .booking-preview-style-popup .booking-modal-kicker i{background:#20b77e;box-shadow:0 0 0 4px rgba(32,183,126,.12)}
.booking-modal .booking-preview-style-popup .booking-modal-header h2{color:#123b67;font-size:1.22rem;margin-top:3px}
.booking-modal .booking-preview-style-popup .booking-modal-header p{color:#6f8398;font-size:.67rem}.booking-modal .booking-preview-style-popup .booking-modal-header p b{color:#df3347}
.booking-popup-step-label{position:absolute;right:67px;top:42px;padding:5px 8px;border-radius:999px;background:#eef7ff;color:#0b62b9;font-size:.56rem;font-weight:900}
.booking-modal .booking-preview-style-popup .booking-modal-close{top:13px;right:14px;width:42px;height:42px;color:#0b62b9;border:1px solid #cfe4f5;background:#f2f9ff}
.booking-modal .booking-preview-style-popup .booking-modal-close:hover{color:#fff;background:#0b68c5}
.booking-modal .booking-preview-style-popup .booking-modal-notice{flex:0 0 auto;padding:8px 18px;gap:9px;background:linear-gradient(90deg,#eaf7ff,#f7fcff);border-top:1px solid #e5f0f7}
.booking-modal .booking-preview-style-popup .booking-modal-notice-icon{width:32px;height:32px;border-radius:10px;font-size:.58rem}
.booking-modal .booking-preview-style-popup .booking-modal-notice p{font-size:.65rem}
.booking-modal .booking-preview-style-popup .booking-form{min-height:0;display:flex;flex:1 1 auto;flex-direction:column}
.booking-modal .booking-preview-style-popup .booking-form-scroll{min-height:0;overflow:auto;padding:12px 18px 8px;background:transparent}
.booking-modal .booking-preview-style-popup .booking-form-security{margin-bottom:10px;padding:8px 10px}.booking-modal .booking-preview-style-popup .booking-form-security p{font-size:.62rem}
.booking-modal .booking-preview-style-popup .booking-form-grid{gap:8px 11px}.booking-modal .booking-preview-style-popup .booking-field{gap:3px}.booking-modal .booking-preview-style-popup .booking-field>span:first-child{font-size:.66rem}
.booking-modal .booking-preview-style-popup .booking-field input,.booking-modal .booking-preview-style-popup .booking-field select,.booking-modal .booking-preview-style-popup .booking-field textarea{min-height:40px;border-radius:11px;padding:8px 10px;font-size:.73rem}.booking-modal .booking-preview-style-popup .booking-field textarea{min-height:58px}
.booking-modal .booking-preview-style-popup .booking-consent{margin-top:9px;padding:9px 10px}.booking-modal .booking-preview-style-popup .booking-consent span{font-size:.62rem}
.booking-modal .booking-preview-style-popup .booking-form-footer{flex:0 0 auto;padding:9px 13px;background:#fff}.booking-modal .booking-preview-style-popup .booking-modal-help strong{font-size:.68rem}.booking-modal .booking-preview-style-popup .booking-modal-help span{font-size:.59rem}
.booking-modal .booking-preview-style-popup .booking-submit{min-height:42px;border-radius:12px;background:linear-gradient(135deg,#0759ad,#0d79d9);position:relative;overflow:hidden}.booking-modal .booking-preview-style-popup .booking-submit:before{content:"";position:absolute;top:-60%;left:-65%;width:38%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(20deg);animation:bookingPopupSubmitShine 3.1s ease-in-out infinite}
.booking-modal .booking-preview-style-popup .booking-success{position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,#fff,#eaf6ff);z-index:5}
@keyframes bookingPopupGlow{0%,100%{opacity:.55;transform:translateX(-50%) scale(.92)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
@keyframes bookingPopupMascotFloat{0%,100%{transform:translateY(3px) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes bookingPopupRing{0%{transform:rotate(0) scale(.96);opacity:.55}50%{transform:rotate(180deg) scale(1.05);opacity:1}100%{transform:rotate(360deg) scale(.96);opacity:.55}}
@keyframes bookingPopupBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bookingPopupIconPulse{0%,100%{transform:scale(1);box-shadow:0 9px 20px rgba(11,95,196,.25)}50%{transform:scale(1.05);box-shadow:0 0 0 7px rgba(36,150,235,.1),0 12px 24px rgba(11,95,196,.32)}}
@keyframes bookingPopupSubmitShine{0%,62%{left:-65%;opacity:0}72%{opacity:1}100%{left:145%;opacity:0}}
@media(max-width:820px){
  .booking-modal .booking-preview-style-popup{width:100%;height:96dvh;max-height:none;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);border-radius:24px 24px 0 0}
  .booking-popup-intro{padding:12px 14px 10px;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"mascot title" "mascot desc";gap:2px 12px;align-items:center}
  .booking-popup-kicker,.booking-popup-steps,.booking-popup-trust-row,.booking-popup-intro-glow{display:none}
  .booking-popup-intro h2{grid-area:title;font-size:1.05rem}.booking-popup-description{grid-area:desc;margin:2px 0 0;font-size:.6rem;line-height:1.45}
  .booking-popup-mascot-wrap{grid-area:mascot;height:72px;margin:0}.booking-popup-mascot{width:76px;height:76px}.booking-popup-mascot-ring{width:62px;height:62px;box-shadow:0 0 0 9px rgba(105,223,244,.07)}.booking-popup-mascot-badge{display:none}
  .booking-modal .booking-preview-style-popup .booking-modal-header{padding:10px 12px 9px}.booking-popup-form-icon{width:39px;height:39px}.booking-modal .booking-preview-style-popup .booking-modal-header h2{font-size:1.05rem}.booking-modal .booking-preview-style-popup .booking-modal-header p{display:none}.booking-popup-step-label{right:62px;top:31px}
  .booking-modal .booking-preview-style-popup .booking-modal-close{top:8px;right:9px;width:40px;height:40px}
  .booking-modal .booking-preview-style-popup .booking-modal-notice{padding:7px 12px}.booking-modal .booking-preview-style-popup .booking-form-scroll{padding:9px 12px 7px}.booking-modal .booking-preview-style-popup .booking-form-grid{grid-template-columns:1fr;gap:6px}.booking-modal .booking-preview-style-popup .booking-field-wide{grid-column:auto}.booking-modal .booking-preview-style-popup .booking-form-footer{padding:8px 10px}
}
@media(max-width:480px){.booking-popup-intro{grid-template-columns:60px 1fr}.booking-popup-mascot-wrap{height:60px}.booking-popup-mascot{width:66px;height:66px}.booking-popup-mascot-ring{width:54px;height:54px}.booking-popup-intro h2{font-size:.95rem}.booking-popup-description{font-size:.56rem}.booking-modal .booking-preview-style-popup .booking-modal-help{display:none}.booking-modal .booking-preview-style-popup .booking-modal-actions{width:100%;grid-template-columns:.8fr 1.2fr}}
@media(prefers-reduced-motion:reduce){.booking-popup-intro-glow,.booking-popup-mascot,.booking-popup-mascot-ring,.booking-popup-mascot-badge,.booking-popup-form-icon,.booking-modal .booking-preview-style-popup .booking-submit:before{animation:none!important}}


/* V35 — Tự mở sau 7 giây, chuyển động mở popup mềm và chuyên nghiệp */
.booking-modal{
  transition:opacity .52s cubic-bezier(.22,.7,.2,1),visibility .52s linear;
}
.booking-modal .booking-modal-backdrop{
  opacity:0;
  background:
    radial-gradient(circle at 50% 45%,rgba(23,121,213,.18),transparent 38%),
    linear-gradient(135deg,rgba(2,20,45,.9),rgba(5,43,86,.82));
  backdrop-filter:blur(0);
  transition:opacity .58s ease,backdrop-filter .7s ease;
}
.booking-modal.is-open .booking-modal-backdrop{
  opacity:1;
  backdrop-filter:blur(11px);
}
.booking-modal .booking-preview-style-popup{
  opacity:0;
  transform:translateY(42px) scale(.94);
  filter:blur(7px) saturate(.92);
  transform-origin:center 58%;
  transition:
    opacity .48s ease,
    transform .68s cubic-bezier(.16,1,.3,1),
    filter .58s ease,
    box-shadow .7s ease;
  box-shadow:0 18px 52px rgba(0,18,49,.24),inset 0 1px 0 #fff;
}
.booking-modal.is-open .booking-preview-style-popup{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0) saturate(1);
  box-shadow:0 42px 130px rgba(0,18,49,.55),inset 0 1px 0 #fff;
}
.booking-modal .booking-popup-intro::before,
.booking-modal .booking-popup-intro::after{
  opacity:0;
  transform:scale(.82);
  transition:opacity .7s ease .2s,transform 1s cubic-bezier(.16,1,.3,1) .2s;
}
.booking-modal.is-open .booking-popup-intro::before,
.booking-modal.is-open .booking-popup-intro::after{
  opacity:1;
  transform:scale(1);
}
.booking-modal .booking-popup-kicker,
.booking-modal .booking-popup-intro h2,
.booking-modal .booking-popup-description,
.booking-modal .booking-popup-mascot-wrap,
.booking-modal .booking-popup-steps,
.booking-modal .booking-popup-trust-row{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .42s ease,transform .58s cubic-bezier(.16,1,.3,1);
}
.booking-modal.is-open .booking-popup-kicker{opacity:1;transform:none;transition-delay:.16s}
.booking-modal.is-open .booking-popup-intro h2{opacity:1;transform:none;transition-delay:.22s}
.booking-modal.is-open .booking-popup-description{opacity:1;transform:none;transition-delay:.28s}
.booking-modal.is-open .booking-popup-mascot-wrap{opacity:1;transform:none;transition-delay:.34s}
.booking-modal.is-open .booking-popup-steps{opacity:1;transform:none;transition-delay:.4s}
.booking-modal.is-open .booking-popup-trust-row{opacity:1;transform:none;transition-delay:.46s}
.booking-modal .booking-popup-form-side{
  opacity:0;
  transform:translateX(22px);
  transition:opacity .5s ease .18s,transform .65s cubic-bezier(.16,1,.3,1) .18s;
}
.booking-modal.is-open .booking-popup-form-side{
  opacity:1;
  transform:translateX(0);
}
.booking-modal .booking-modal-close{
  opacity:0;
  transform:rotate(-18deg) scale(.82);
  transition:opacity .35s ease .42s,transform .5s cubic-bezier(.16,1,.3,1) .42s,background .18s ease,color .18s ease;
}
.booking-modal.is-open .booking-modal-close{
  opacity:1;
  transform:rotate(0) scale(1);
}
.booking-modal.is-open .booking-popup-form-icon{
  animation:bookingPopupIconEntrance .72s cubic-bezier(.16,1,.3,1) .34s both,bookingPopupIconPulse 2.8s ease-in-out 1.1s infinite;
}
@keyframes bookingPopupIconEntrance{
  from{opacity:0;transform:translateY(10px) scale(.72) rotate(-8deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@media(max-width:768px){
  .booking-modal .booking-preview-style-popup{
    transform:translateY(58px) scale(.97);
    transform-origin:center bottom;
  }
  .booking-modal.is-open .booking-preview-style-popup{transform:translateY(0) scale(1)}
  .booking-modal .booking-popup-form-side{transform:translateY(16px)}
  .booking-modal.is-open .booking-popup-form-side{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .booking-modal,
  .booking-modal .booking-modal-backdrop,
  .booking-modal .booking-preview-style-popup,
  .booking-modal .booking-popup-intro::before,
  .booking-modal .booking-popup-intro::after,
  .booking-modal .booking-popup-kicker,
  .booking-modal .booking-popup-intro h2,
  .booking-modal .booking-popup-description,
  .booking-modal .booking-popup-mascot-wrap,
  .booking-modal .booking-popup-steps,
  .booking-modal .booking-popup-trust-row,
  .booking-modal .booking-popup-form-side,
  .booking-modal .booking-modal-close{
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    transform:none!important;
    filter:none!important;
  }
}