/* Trang đặt vé online (module Vexere) – theo màu Petro */
.vx-page { background: #F5F8FC; }
.vx-page h1, .vx-page h2 { margin-top: 0; }
.vx-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.vx-tabs::-webkit-scrollbar { display: none; }
.vx-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.15rem; border-radius: 999px; border: 1.5px solid #CFDDEE; background: #fff; color: var(--pb-navy); font-weight: 700; text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.vx-tab:hover { border-color: var(--pb-blue); color: var(--pb-blue); }
.vx-tab.active { background: var(--pb-blue); border-color: var(--pb-blue); color: #fff; }

.vx-search { padding: 1.25rem; border-top: 4px solid var(--pb-cta); margin-bottom: 1.5rem; position: relative; z-index: 5; }
.vx-info { color: var(--pb-navy); font-weight: 700; margin-bottom: .5rem; }
.vx-info:empty { display: none; }
.vx-form { display: grid; grid-template-columns: 1fr auto 1fr 1fr auto; gap: .75rem; align-items: start; }
.vx-field { position: relative; min-width: 0; }
.vx-field > label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-muted, #6B7A90); line-height: 1.2rem; margin-bottom: .35rem; }
.vx-input { position: relative; }
.vx-input > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--pb-cta); pointer-events: none; z-index: 1; }
.vx-input input { width: 100%; height: 48px; padding: .5rem .9rem .5rem 2.4rem; border: 1.5px solid #CFDDEE; border-radius: 12px; background: #fff; color: var(--pb-navy); font-size: 1rem; font-weight: 600; outline: 0; transition: border-color .2s, box-shadow .2s; }
.vx-input input:focus { border-color: var(--pb-blue); box-shadow: 0 0 0 4px rgba(0, 74, 153, .1); }
.vx-input input.vx-err { border-color: #D93025; box-shadow: 0 0 0 4px rgba(217, 48, 37, .12); }
#datepicker { cursor: pointer; }
.vx-swap { width: 44px; height: 44px; margin-top: calc(1.55rem + 2px); border-radius: 50%; border: 1.5px solid #CFDDEE; background: #fff; color: var(--pb-blue); display: flex; align-items: center; justify-content: center; transition: transform .3s, border-color .2s; }
.vx-swap:hover { border-color: var(--pb-blue); transform: rotate(180deg); }
.vx-quick { display: flex; gap: .4rem; margin-top: .4rem; }
.vx-quick button { flex: 1; border: 0; border-radius: 999px; padding: .3rem .6rem; font-size: .8rem; font-weight: 700; background: #FFF1E8; color: var(--pb-cta); }
.vx-quick button:hover { background: var(--pb-cta); color: #fff; }
.vx-submit { height: 48px; padding: 0 1.6rem; white-space: nowrap; }
.vx-form > .vx-submit { align-self: start; margin-top: 1.55rem; }
.vx-warn { margin: 1rem 0 0; padding: .6rem .9rem; border-radius: 10px; background: #FFF6E0; color: #7A5A00; font-size: .88rem; }
.vx-warn i { margin-right: .35rem; }

/* danh sách gợi ý của file autocomplete Vexere */
.autocomplete-items-from, .autocomplete-items-to { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #DCE6F3; border-radius: 14px; box-shadow: 0 18px 40px rgba(10, 37, 64, .18); padding: 6px; }
.autocomplete-items-from h6, .autocomplete-items-to h6 { font-size: .72rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pb-muted, #6B7A90); margin: 8px 8px 4px !important; }
.autocomplete-items-from div[name], .autocomplete-items-to div[name] { padding: .55rem .75rem !important; border-radius: 10px; cursor: pointer; color: var(--pb-navy); font-weight: 600; }
.autocomplete-items-from div[name]:hover, .autocomplete-items-to div[name]:hover, .autocomplete-active { background: #EEF4FB !important; color: var(--pb-blue) !important; }

/* lịch chọn ngày jQuery UI */
.ui-datepicker { z-index: 1060 !important; padding: .5rem; border: 1px solid #DCE6F3 !important; border-radius: 14px; box-shadow: 0 18px 40px rgba(10, 37, 64, .18); font-family: inherit; }
.ui-datepicker .ui-datepicker-header { background: var(--pb-blue); border: 0; border-radius: 10px; color: #fff; }
.ui-datepicker .ui-state-default { border: 0; border-radius: 8px; background: #F2F6FC; text-align: center; color: var(--pb-navy); }
.ui-datepicker .ui-state-hover { background: #E1ECF8; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight { background: var(--pb-cta) !important; color: #fff !important; }

/* khung widget */
.vx-widget-wrap { position: relative; min-height: 160px; }
.vx-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--pb-muted, #6B7A90); font-weight: 600; }
#vexereSearchWidget { font-family: inherit; }
#vexereSearchWidget img { max-width: 100%; height: auto; }
.vx-help { margin: 1.5rem 0 0; text-align: center; color: var(--pb-muted, #6B7A90); }
.vx-help i { color: var(--pb-blue); margin-right: .35rem; }
.vx-help a { font-weight: 700; }

.vx-off { max-width: 640px; margin: 0 auto; }
.vx-off-ic { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--pb-orange, #F26B21), var(--pb-cta)); }

@media (max-width: 991.98px) {
  .vx-form { grid-template-columns: 1fr auto 1fr; }
  .vx-date { grid-column: 1 / 3; }
  .vx-form > .vx-submit { margin-top: 1.55rem; }
}
@media (max-width: 575.98px) {
  .vx-search { padding: 1rem; }
  .vx-form { grid-template-columns: 1fr; gap: .6rem; }
  .vx-form { position: relative; }
  .vx-swap { position: absolute; right: 0; top: calc(1.55rem + 48px + .6rem - 6px); margin: 0; z-index: 2; width: 32px; height: 32px; font-size: .9rem; transform: rotate(90deg); }
  .vx-swap:hover { transform: rotate(270deg); }
  .vx-date { grid-column: auto; }
  .vx-form > .vx-submit { margin-top: .3rem; width: 100%; }
  .vx-tab { padding: .5rem .9rem; font-size: .9rem; }
}