/* Xoay Xoay — popup đặt lịch, thiết kế V7. Không ảnh hưởng phần còn lại của website. */
body.booking-is-open { overflow: hidden; }
.booking-overlay[hidden], .booking-form-view[hidden], .booking-success[hidden], .booking-alert[hidden] { display: none!important; }
.booking-overlay { position: fixed; z-index: 200; inset: 0; padding: 20px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.booking-backdrop { position: absolute; z-index: -1; inset: 0; background: rgba(8,47,104,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.booking-dialog { position: relative; width: min(100%,1080px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #afcde9 transparent; border: 1.5px solid rgba(255,255,255,.78); border-radius: 31px; background: #fff; box-shadow: 0 30px 90px rgba(6,46,100,.23); animation: booking-arrive .36s var(--ease) both; }
@keyframes booking-arrive { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
.booking-layout { display: grid; grid-template-columns: minmax(320px,38%) minmax(0,1fr); min-height: 680px; }
.booking-brand-panel { position: relative; isolation: isolate; overflow: hidden; min-height: 680px; background: linear-gradient(160deg,#3188dc 0%,#1764bc 100%); }
.booking-brand-panel h2 { position: relative; z-index: 3; margin: 0; padding: 72px 25px 0 37px; color: #fff; font: 800 clamp(50px,5.2vw,74px)/1.02 var(--display); letter-spacing: -.055em; }
.booking-brand-line { position: absolute; z-index: 1; left: -18%; bottom: -34px; width: 137%; height: 54%; opacity: .72; pointer-events: none; }
.booking-brand-line path { fill: none; stroke: #a9d2fc; stroke-width: 19; stroke-linecap: round; }
.booking-brand-mascot { position: absolute; z-index: 2; width: 84%; height: auto; max-height: 53%; object-fit: contain; left: 7%; bottom: 34px; filter: drop-shadow(0 14px 17px rgba(7,61,138,.08)); }
.booking-content { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 64px 43px 40px 54px; background: #fff; }
.booking-close { position: absolute; z-index: 10; top: 23px; right: 24px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f0f5fb; color: #507dac; transition: background .2s, transform .2s; }
.booking-close:hover { background: #e5f1ff; transform: rotate(90deg); }
.booking-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.booking-heading { margin: 0 0 28px; }
.booking-heading h2, .booking-success h2 { margin: 0 0 12px; color: #0750a3; font: 800 clamp(41px,4.2vw,58px)/1.06 var(--display); letter-spacing: -.052em; }
.booking-heading h2 span, .booking-success h2 span { color: #397cc6; }
.booking-heading > p:last-child { max-width: 510px; margin: 0; color: #6583a6; font-size: 13px; line-height: 1.75; }
.booking-form { padding: 0; }
.booking-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px 24px; }
.booking-field { min-width: 0; }
.booking-field-wide { grid-column: 1 / -1; }
.booking-field label { display: block; margin-bottom: 6px; color: #0a4e9e; font-size: 12px; line-height: 1.5; font-weight: 700; }
.booking-field label > span:not(.booking-optional) { color: #0a4e9e; }
.booking-optional { margin-left: 4px; color: #859cba; font-size: 11px; font-weight: 500; }
.booking-input { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid #b7cbe4; transition: border-color .2s,box-shadow .2s; }
.booking-input:focus-within { border-color: #0b62c3; box-shadow: 0 1px 0 #0b62c3; }
.booking-input:has([aria-invalid="true"]) { border-bottom-color: #dc696b; }
.booking-input-icon { display: block; flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: #618abd; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.booking-input input, .booking-input select, .booking-input textarea { display: block; flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; margin: 0; padding: 10px 0 8px; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: #154e93; font: 500 12.5px/1.5 var(--font); }
.booking-input input::placeholder, .booking-input textarea::placeholder { color: #9eb2cd; font-weight: 400; opacity: 1; }
.booking-input select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 26px; }
.booking-select-wrap::after { content: ""; position: absolute; right: 5px; top: 17px; width: 7px; height: 7px; border: solid #5d85b8; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); pointer-events: none; }
.booking-input textarea { min-height: 44px; max-height: 110px; resize: vertical; }
.booking-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.booking-alert { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #f0ccc6; border-radius: 10px; background: #fff6f5; color: #a44036; font-size: 11px; line-height: 1.65; }
.booking-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; }
.booking-privacy { display: flex; align-items: center; gap: 8px; max-width: 230px; margin: 0; color: #7792b2; font-size: 10px; line-height: 1.65; }
.booking-privacy svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: #0b63c6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.booking-submit, .booking-done { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 54px; padding: 12px 24px; border: 0; border-radius: 999px; background: #0c62c8; color: white; box-shadow: 0 9px 21px rgba(26,92,183,.13); font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .2s,transform .25s var(--ease),box-shadow .25s; }
.booking-submit:hover:not(:disabled), .booking-done:hover { background: #0753af; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(26,92,183,.2); }
.booking-submit:disabled { cursor: wait; opacity: .67; }
.booking-submit-arrow { display: inline-block; flex: 0 0 auto; font-size: 21px; font-weight: 400; line-height: 1; }
.booking-bottom-note { margin: 14px 0 0; color: #8ba2bd; font-size: 9px; line-height: 1.7; }
.booking-success { padding: 35px 6px; text-align: center; }
.booking-success-mark { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 21px; border-radius: 50%; background: #e8f8ef; }
.booking-success-mark svg { width: 51px; height: 51px; fill: none; stroke: #20a276; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.booking-success-mark svg circle { stroke-width: 1.5; }
.booking-eyebrow { justify-content: center; color: #397cc6; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.booking-success h2 { max-width: 470px; margin: 12px auto 16px; font-size: clamp(35px,3.8vw,51px); }
.booking-success > p:not(.booking-eyebrow) { max-width: 450px; margin: 0 auto 25px; color: #6886a8; font-size: 13px; line-height: 1.85; }
@media(max-width:950px) and (min-width:761px) {
  .booking-dialog { width: min(100%,900px); }
  .booking-layout { grid-template-columns: minmax(255px,34%) minmax(0,1fr); }
  .booking-brand-panel h2 { padding-left: 24px; font-size: clamp(44px,5.5vw,60px); }
  .booking-content { padding: 65px 29px 32px; }
  .booking-heading h2 { font-size: clamp(37px,4.5vw,48px); }
  .booking-grid { gap: 19px 17px; }
  .booking-privacy { max-width: 185px; }
  .booking-submit { padding-inline: 19px; font-size: 11px; }
}
@media(max-width:760px) {
  .booking-overlay { padding: 0; align-items: flex-end; }
  .booking-dialog { width: 100%; max-height: 96dvh; border-radius: 28px 28px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom,0px); }
  .booking-layout { display: flex; flex-direction: column; min-height: 0; }
  .booking-brand-panel { min-height: 154px; max-height: 154px; flex: 0 0 154px; }
  .booking-brand-panel h2 { padding: 27px 22px 0; font-size: clamp(32px,8.5vw,43px); letter-spacing: -.055em; }
  .booking-brand-mascot { left: auto; right: 21px; bottom: -15px; width: 145px; max-height: 152px; }
  .booking-brand-line { left: 10%; bottom: -45px; width: 105%; height: 80%; opacity: .55; }
  .booking-content { padding: 27px 24px 27px; }
  .booking-close { top: -137px; right: 16px; width: 38px; height: 38px; background: rgba(255,255,255,.24); color: white; }
  .booking-close:hover { background: rgba(255,255,255,.35); }
  .booking-heading { margin-bottom: 23px; }
  .booking-heading h2 { font-size: clamp(34px,8vw,43px); margin-bottom: 7px; }
  .booking-heading > p:last-child { font-size: 12px; line-height: 1.68; }
  .booking-grid { grid-template-columns: 1fr; row-gap: 17px; }
  .booking-field-wide { grid-column: auto; }
  .booking-field label { margin-bottom: 2px; }
  .booking-input, .booking-input input, .booking-input select, .booking-input textarea { min-height: 42px; }
  .booking-form-footer { flex-direction: column; align-items: stretch; gap: 15px; margin-top: 23px; }
  .booking-privacy { max-width: none; }
  .booking-submit { width: 100%; justify-content: center; }
  .booking-bottom-note { text-align: center; font-size: 9px; }
  .booking-success { padding: 41px 0 25px; }
}
@media(max-width:375px) {
  .booking-brand-panel h2 { font-size: 31px; }
  .booking-brand-mascot { width: 128px; right: 13px; }
  .booking-content { padding-inline: 18px; }
  .booking-heading h2 { font-size: 33px; }
}
@media(prefers-reduced-motion:reduce) {
  .booking-dialog { animation: none; }
}