/* ═══════════════════════════════════════════════════════════════
dat-ve-tau-hoa.css — Trang Đặt Vé Tàu Hoả (Đồng bộ chuẩn Vé Máy Bay)
Route: /dat-ve-tau-hoa
═══════════════════════════════════════════════════════════════ */
/* ─── Page Wrapper ─── */
.fb-page {
background: linear-gradient(180deg, #fdeef6 0, #fff8fc 260px, #ffffff 560px);
min-height: 90vh;
padding: 14px 0 72px;
font-family: inherit;
color: #1f2937;
}
.fb-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 16px;
}
/* ─── Header ─── */
.fb-header {
text-align: center;
margin-bottom: 14px;
}
.fb-header-bar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
margin-bottom: 4px;
}
.fb-header-bar .fb-back-link {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #1a1a1a;
font-weight: 600;
text-decoration: none;
transition: color 0.15s;
}
.fb-header-bar .fb-back-link:hover {
color: var(--c-primary, #ed007f);
}
.fb-header-bar .fb-title {
margin: 0;
font-size: 27px;
font-weight: 800;
color: #1B448E;
letter-spacing: 0.3px;
}
.fb-subtitle {
font-size: 14px;
color: #666;
margin-bottom: 0;
text-align: center;
}
/* Subtitle / note hướng dẫn riêng trong card nội dung */
.fb-card-subtitle {
font-size: 13px;
color: #6b7280;
margin: -4px 0 14px;
line-height: 1.5;
text-align: left;
}
/* ─── Login promo banner (chuẩn vé máy bay) ─── */
.fb-login-promo {
background: linear-gradient(135deg, #fdf0f7 0%, #fce7f3 100%);
border: 1px dashed var(--c-primary, #ed007f);
border-radius: 14px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
margin-bottom: 20px;
}
.fb-login-promo svg {
color: var(--c-primary, #ed007f);
flex-shrink: 0;
}
.fb-login-promo-text {
flex: 1;
font-size: 13px;
color: #555;
line-height: 1.45;
}
.fb-login-promo-text b {
color: var(--c-primary, #ed007f);
font-weight: 700;
}
.fb-login-promo a {
color: var(--c-primary, #ed007f);
font-weight: 700;
text-decoration: underline;
margin-left: 4px;
}
/* ─── Empty state ─── */
.fb-empty {
background: #fff;
border: 2px dashed #e0e0e0;
border-radius: 12px;
padding: 60px 20px;
text-align: center;
color: #888;
}
.fb-empty svg {
color: var(--c-primary, #ed007f);
opacity: 0.7;
margin-bottom: 12px;
}
.fb-empty h2 {
font-size: 18px;
color: #333;
margin: 0 0 8px;
}
.fb-empty p {
font-size: 14px;
margin: 0 0 16px;
}
.fb-empty a {
display: inline-block;
background: var(--c-primary, #ed007f);
color: #fff;
padding: 10px 22px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
/* ─── Grid 2 cột ─── */
.fb-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 22px;
align-items: start;
}
.fb-main {
min-width: 0;
}
.fb-aside {
position: sticky;
top: 20px;
}
/* Nút Xem vé / Thu gọn trong đầu mục Chuyến tàu: chỉ hiện trên desktop khi sidebar đang dính */
.dvt-sec-toggle {
display: none;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid #dbe3ef;
border-radius: 999px;
background: #fff;
color: #2D65B8;
font-family: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.dvt-sec-toggle:hover {
background: #f1f5fb;
}
.dvt-sec-toggle i {
font-size: 10px;
transition: transform .2s ease;
}
.dvt-sec-toggle[aria-expanded="true"] i {
transform: rotate(180deg);
}
.dvt-sec-toggle[aria-expanded="true"] .dvt-sec-toggle-more,
.dvt-sec-toggle[aria-expanded="false"] .dvt-sec-toggle-less {
display: none;
}
/* Desktop: sidebar dính dưới header fixed (100px, header-redesign.css). Khi đã dính (.is-stuck do
dat-ve-tau-hoa.js gắn) thì .is-collapsed ẩn chặng + danh sách vé, chỉ giữ dòng "Số vé đã chọn",
để khối tổng tiền + nút Xác nhận luôn nằm trong màn hình. Cuộn về đầu trang → mở đầy đủ. */
@media (min-width: 901px) {
/* Template #vnt-container có overflow:hidden (style_minimize.css) → thành khung cuộn riêng, phá
position:sticky của .fb-aside (sidebar không chạy theo màn hình). overflow-x: clip vẫn cắt tràn ngang
nhưng KHÔNG tạo khung cuộn — cùng cách search-global-v2.css / hotel-detail-api.css. Chỉ trang có #dvtForm. */
body:has(#dvtForm) #vnt-container {
overflow-x: clip;
overflow-y: visible;
}
.fb-aside {
top: 116px;
}
.fb-aside.is-stuck .dvt-sec-toggle {
display: inline-flex;
}
.fb-aside.is-collapsed .fb-flight-section-body .fb-leg,
.fb-aside.is-collapsed .fb-flight-section-body .dvt-side-items,
.fb-aside.is-collapsed .fb-flight-section-body .dvt-side-action-wrap {
display: none;
}
}
/* ─── Card Section (chuẩn bo 18px, shadow nhẹ) ─── */
.fb-card {
background: #fff;
border: 1px solid #edeff3;
border-radius: 18px;
box-shadow: 0 3px 16px rgba(17, 24, 39, 0.06);
padding: 22px 24px 24px;
margin-bottom: 18px;
}
.fb-card h3 {
font-size: 16px;
font-weight: 800;
color: #1B448E;
text-transform: uppercase;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px dashed #eee;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.3px;
}
.fb-card h3 .fb-card-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: #1B448E;
color: #ffffff;
font-size: 12px;
font-weight: 800;
}
/* ─── Form Inputs ─── */
.fb-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 12px;
}
.fb-row-1 {
grid-template-columns: 1fr;
}
/* minmax(0, 1fr): cột không bị nội dung dài (tên đối tượng) đẩy rộng tràn khung */
.fb-row-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fb-row[hidden],
.fb-sharing-baby-row[hidden] {
display: none !important;
}
.fb-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
/* Ô Đối tượng dùng dropdown tự dựng (dlv-select): viền/bo góc/chữ khớp các ô input của form */
.fb-field .dlvsel-btn {
border-color: #e3e6ea;
border-radius: 11px;
color: #111;
font-weight: 400;
}
/* Danh sách: chữ 13px, mỗi đối tượng 1 dòng; rộng theo nội dung (không hẹp hơn ô), neo mép phải
để ô ở cột cuối không tràn ra ngoài form; cao đủ 6 đối tượng + 2 tiêu đề nhóm, không phải cuộn */
.fb-field .dlvsel-list {
left: auto;
right: 0;
width: max-content;
min-width: 100%;
max-width: min(340px, calc(100vw - 32px));
max-height: 340px;
border-radius: 12px;
}
.fb-field .dlvsel-opt {
padding: 8px 10px;
font-size: 13px;
line-height: 1.35;
white-space: nowrap;
}
.fb-field .dlvsel-group-label {
padding: 7px 10px 3px;
font-size: 11px;
}
.fb-field label {
font-size: 13px;
color: #374151;
font-weight: 600;
}
.fb-field label .req {
color: var(--c-primary, #ed007f);
}
.fb-field input,
.fb-field select {
height: 42px;
border: 1.5px solid #e3e6ea;
border-radius: 11px;
padding: 0 12px;
font-size: 14px;
font-family: inherit;
background: #fff;
color: #111;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.fb-field input:focus,
.fb-field select:focus {
outline: none;
border-color: var(--c-primary, #ed007f);
box-shadow: 0 0 0 3px rgba(237, 0, 127, 0.12);
}
.fb-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
cursor: pointer;
}
.fb-hint {
font-size: 11.5px;
color: #888;
line-height: 1.4;
}
.fb-phone-wrap {
display: flex;
width: 100%;
}
.fb-phone-num {
width: 100%;
}
/* ─── Dropdown Ngày - Tháng - Năm (Kiểu Việt Nam) ─── */
.dvt-dob-group {
display: flex;
gap: 8px;
width: 100%;
}
.dvt-dob-group[hidden] {
display: none !important;
}
.dvt-dob-group .dvt-dob-select {
height: 42px;
border: 1.5px solid #e3e6ea;
border-radius: 11px;
padding: 0 24px 0 10px;
font-size: 13.5px;
font-family: inherit;
background-color: #fff;
color: #111;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 13px;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.dvt-dob-group .dvt-dob-select:focus {
outline: none;
border-color: var(--c-primary, #ed007f);
box-shadow: 0 0 0 3px rgba(237, 0, 127, 0.12);
}
.dvt-dob-group .dvt-dob-day {
flex: 1;
min-width: 0;
}
.dvt-dob-group .dvt-dob-month {
flex: 1.35;
min-width: 0;
}
.dvt-dob-group .dvt-dob-year {
flex: 1.2;
min-width: 0;
}
/* ─── Ô kích hoạt chọn Ngày sinh (Trigger Input) ─── */
.dvt-dob-input-wrap {
position: relative;
width: 100%;
}
.dvt-dob-input-wrap[hidden],
.dvt-dob-input-wrap.dvt-hidden {
display: none !important;
}
.dvt-dob-display-input {
width: 100%;
height: 42px;
border: 1.5px solid #e3e6ea;
border-radius: 11px;
padding: 0 36px 0 12px;
font-size: 13.5px;
font-family: inherit;
background-color: #fff;
color: #111;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.dvt-dob-display-input:focus,
.dvt-dob-display-input:hover {
outline: none;
border-color: var(--c-primary, #ed007f);
box-shadow: 0 0 0 3px rgba(237, 0, 127, 0.12);
}
.dvt-dob-cal-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
font-size: 15px;
}
/* ─── Popup chọn Ngày tháng năm sinh (childVerifyPopover đối tác ĐSVN) ─── */
.dvt-child-verify-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
backdrop-filter: blur(2px);
transition: opacity 0.2s ease;
}
.dvt-child-verify-modal-overlay.dvt-modal-hidden {
display: none !important;
}
.dvt-child-verify-dialog {
width: 100%;
max-width: 520px;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
/* KHÔNG overflow:hidden — danh sách dlv-select ở ô ngày sinh tràn ra ngoài dialog sẽ bị cắt. */
animation: dvtPopoverZoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dvtPopoverZoomIn {
from {
opacity: 0;
transform: scale(0.96) translateY(-8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.dvt-child-verify-content .popover-title {
background: #f8fafc;
border-radius: 14px 14px 0 0;
border-bottom: 1px solid #e2e8f0;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.dvt-child-verify-content .popover-title label {
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin: 0;
cursor: default;
}
.dvt-child-verify-close {
background: transparent;
border: none;
font-size: 24px;
line-height: 1;
color: #64748b;
cursor: pointer;
padding: 2px 6px;
border-radius: 6px;
transition: all 0.15s;
}
.dvt-child-verify-close:hover {
color: #0f172a;
background: #e2e8f0;
}
.dvt-child-verify-content .popover-content {
padding: 18px 20px 20px;
font-size: 13.5px;
color: #334155;
line-height: 1.55;
}
.dvt-child-verify-desc {
margin: 0 0 12px 0;
color: #475569;
}
.dvt-child-verify-desc.dvt-desc-hidden {
display: none !important;
}
.dvt-child-verify-warning {
background: #fffbeb;
border: 1px solid #fef3c7;
border-left: 3.5px solid #f59e0b;
color: #b45309;
padding: 10px 14px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
margin: 0 0 16px 0;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.45;
}
.dvt-child-verify-warning i {
font-size: 14px;
color: #f59e0b;
margin-top: 2px;
flex-shrink: 0;
}
.birthday-fields {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.birthday-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.birthday-field > span {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: .04em;
}
.birthday-fields .dlvsel-btn {
border-color: #e2e8f0;
background: #f8fafc;
color: #0f172a;
font-weight: 600;
}
.birthday-fields .dlvsel-btn:hover {
border-color: #cbd5e1;
background: #fff;
}
.birthday-fields .dlvsel.is-open .dlvsel-btn {
background: #fff;
}
.birthday-fields .dlvsel-list {
max-height: 220px;
}
.birthday-fields .form-control {
width: 100%;
height: 42px;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
padding: 0 24px 0 10px;
font-size: 14px;
font-family: inherit;
background-color: #fff;
color: #0f172a;
cursor: pointer;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 13px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.birthday-fields .form-control:focus {
outline: none;
border-color: var(--c-primary, #ed007f);
box-shadow: 0 0 0 3px rgba(237, 0, 127, 0.12);
}
.dvt-child-verify-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
.dvt-btn-child-cancel {
padding: 9px 22px;
border: 1.5px solid #cbd5e1;
background: #fff;
color: #475569;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-family: inherit;
transition: all 0.15s;
}
.dvt-btn-child-cancel:hover {
background: #f1f5f9;
color: #0f172a;
border-color: #94a3b8;
}
.dvt-btn-child-confirm {
padding: 9px 26px;
border: none;
background: var(--c-primary, #ed007f);
color: #fff;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-family: inherit;
transition: all 0.15s;
box-shadow: 0 2px 8px rgba(237, 0, 127, 0.28);
}
.dvt-btn-child-confirm:hover {
background: #d60072;
color: #fff;
box-shadow: 0 4px 12px rgba(237, 0, 127, 0.35);
}
@media (max-width: 480px) {
.dvt-child-verify-dialog {
max-width: 100%;
margin: 0 8px;
}
.birthday-fields {
gap: 6px;
}
.birthday-fields .dlvsel-btn {
padding: 0 26px 0 10px;
}
.birthday-fields .dlvsel-caret {
right: 10px;
}
.birthday-fields .form-control {
font-size: 13px;
padding: 0 18px 0 6px;
background-position: right 4px center;
background-size: 11px;
}
.dvt-child-verify-content .popover-content {
padding: 14px 14px 16px;
}
}
.dvt-doan-vien-dialog {
max-width: 460px;
}
.dvt-policy-lead {
font-weight: 600;
color: #1e293b;
margin: 0 0 8px 0;
}
.dvt-policy-list {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.6;
color: #475569;
margin-bottom: 14px;
}
.dvt-dob-change-link {
color: var(--c-primary, #ed007f);
text-decoration: underline;
cursor: pointer;
font-weight: 500;
}
.dvt-dob-change-link:hover {
color: #d60072;
}
/* ─── Passenger block list ─── */
.fb-pax-block {
background: #fff;
border: 1px solid #edeff3;
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 12px;
transition: border-color 0.15s;
}
.fb-pax-block:last-child {
margin-bottom: 0;
}
.fb-pax-block:hover {
border-color: #f0c5dc;
}
.fb-pax-name {
font-size: 14px;
font-weight: 700;
color: #111;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.fb-pax-name .fb-card-num {
width: 20px;
height: 20px;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1f5f9;
color: #475569;
font-weight: 700;
}
.fb-pax-meta-price {
font-size: 12.5px;
font-weight: 700;
color: #0f172a;
margin-left: auto;
}
.dvt-pax-count-badge {
font-size: 13px;
font-weight: 600;
color: #6b7280;
text-transform: none;
letter-spacing: 0;
}
/* ═══════════════════════════════════════════════════════════════
Phương thức thanh toán: 4 Payoo pay_type cards
═══════════════════════════════════════════════════════════════ */
.tt-pm-list {
border: 1px solid #e5e5e5;
border-radius: 12px;
overflow: hidden;
margin-top: 6px;
}
.tt-pm-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
background: #fff;
border-bottom: 1px solid #eee;
transition: background 0.12s;
position: relative;
margin: 0;
}
.tt-pm-item:last-child {
border-bottom: 0;
}
.tt-pm-item:hover {
background: #fafafa;
}
.tt-pm-item.selected {
background: #fdf0f6;
}
.tt-pm-item input[type=radio] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tt-pm-ico {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.tt-pm-ico svg {
width: 44px;
height: 44px;
display: block;
}
.tt-pm-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tt-pm-name {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
.tt-pm-item.selected .tt-pm-name {
color: var(--c-primary, #ed007f);
font-weight: 700;
}
.tt-pm-sub {
font-size: 12px;
color: #888;
}
.tt-pm-radio {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid #d0d0d0;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.tt-pm-item.selected .tt-pm-radio {
border-color: var(--c-primary, #ed007f);
}
.tt-pm-item.selected .tt-pm-radio::after {
content: '';
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--c-primary, #ed007f);
}
.tt-card-form-note {
font-size: 11.5px;
color: #666;
margin-top: 14px;
padding: 9px 12px;
background: #fff8e1;
border-left: 3px solid #f59e0b;
border-radius: 6px;
line-height: 1.5;
}
.tt-terms {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 14px;
padding: 14px 16px;
background: #fafbfc;
border-radius: 10px;
font-size: 13px;
color: #555;
line-height: 1.5;
border: 1px solid #eef2f6;
}
.tt-terms input {
width: 18px;
height: 18px;
margin-top: 1px;
accent-color: var(--c-primary, #ed007f);
flex-shrink: 0;
cursor: pointer;
}
.tt-terms a {
color: var(--c-primary, #ed007f);
font-weight: 600;
text-decoration: none;
}
.tt-terms a:hover {
text-decoration: underline;
}
/* ═══════════════════════════════════════════════════════════════
Sidebar Summary: Card nổi, header gradient, leg route
═══════════════════════════════════════════════════════════════ */
.fb-summary {
background: #fff;
border: 1px solid #edeff3;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.10);
overflow: hidden;
}
.fb-summary-head {
background: linear-gradient(135deg, #2D65B8, #1B448E);
padding: 15px 18px;
text-align: center;
}
.fb-summary-head-title {
font-size: 16px;
font-weight: 800;
color: #fff;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.fb-flight-section-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
color: #1e293b;
border-bottom: 1px solid #e5e7eb;
}
.fb-flight-section-head svg.fb-plane {
color: #475569;
flex-shrink: 0;
}
.fb-flight-section-head .fb-section-label {
flex: 1;
font-size: 15px;
font-weight: 700;
color: #1e293b;
}
.fb-flight-section-body {
padding: 10px 14px;
}
.fb-leg {
padding: 8px 10px;
background: #f8fafc;
border: 1px solid #edf2f7;
border-radius: 8px;
margin-bottom: 6px;
position: relative;
}
.fb-leg:last-of-type {
margin-bottom: 8px;
}
.fb-leg-date-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
padding-right: 56px;
}
.fb-leg-num {
width: 18px;
height: 18px;
background: #f1f5f9;
color: #475569;
font-size: 11px;
font-weight: 800;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fb-leg-date-text {
font-size: 12px;
color: #475569;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fb-leg-route {
font-size: 13.5px;
font-weight: 700;
color: #0f172a;
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 6px;
line-height: 1.3;
}
.fb-leg-route .fb-route-arrow {
color: #94a3b8;
width: 13px;
height: 10px;
flex-shrink: 0;
}
.fb-leg-airline {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: #94a3b8;
line-height: 1.2;
}
.fb-leg-airline-name {
font-weight: 500;
font-size: 11px;
color: #94a3b8;
}
.fb-leg-airline-num {
position: absolute;
top: 7px;
right: 10px;
font-size: 11px;
color: #fff;
font-weight: 800;
font-family: 'SF Mono', Consolas, monospace;
letter-spacing: 0.4px;
background: #1B448E;
padding: 2px 7px;
border-radius: 5px;
white-space: nowrap;
line-height: 1.2;
}
.fb-summary-meta {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0;
border-bottom: 1px dashed #eee;
}
.fb-summary-meta-row {
display: flex;
justify-content: space-between;
font-size: 13px;
}
.fb-summary-meta-label {
color: #666;
font-weight: 500;
}
.fb-summary-meta-value {
color: #222;
font-weight: 700;
}
.dvt-side-items {
padding: 10px 0 6px;
}
.fb-summary-price-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #333;
padding: 6px 0;
gap: 8px;
border-bottom: 1px dashed #f5f5f5;
}
.fb-summary-price-row:last-child {
border-bottom: none;
}
.dvt-item-desc {
display: flex;
flex-direction: column;
gap: 2px;
}
.dvt-item-desc b {
font-size: 13px;
color: #222;
}
.dvt-item-sub {
font-size: 11px;
color: #888;
}
.fb-summary-price-row > b {
color: #0f172a;
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
}
/* Total + Breakdown Rows + Submit Button */
.fb-summary-total {
display: block;
padding: 14px 18px;
border-top: 1px solid #e5e7eb;
background: #fafafa;
}
.fb-summary-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #4b5563;
margin-bottom: 7px;
}
.fb-summary-total-sublabel {
font-weight: 500;
}
.fb-summary-total-subval {
font-weight: 600;
color: #1f2937;
}
.fb-summary-total-subval.dvt-promo-val {
color: #059669;
font-weight: 700;
}
.fb-summary-total-subval.dvt-fee-val {
color: #ea580c; /* khoản cộng (phí, phụ thu): cam, dấu + */
font-weight: 700;
}
.dvt-side-insurance-hint {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: #059669;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 6px;
padding: 6px 9px;
margin: -2px 0 8px 0;
line-height: 1.35;
}
.dvt-side-insurance-hint i {
font-size: 12px;
flex-shrink: 0;
color: #10b981;
}
.dvt-cf-insurance-hint {
margin: 4px 0 10px 0;
}
.fb-summary-total-divider {
height: 1px;
background: #e5e7eb;
margin: 8px 0 10px;
}
.fb-summary-total-main {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.fb-summary-total-label {
font-size: 14px;
font-weight: 700;
color: #222;
text-transform: uppercase;
}
.fb-summary-total-price {
font-size: 24px;
font-weight: 800;
color: var(--c-primary, #ed007f);
}
.fb-summary-submit-wrap {
padding: 0 18px 18px;
}
.fb-summary-submit {
width: 100%;
height: 52px !important;
background: var(--c-primary, #ed007f) !important;
color: #fff;
border: 0 !important;
border-radius: 14px !important;
font-size: 16px !important;
font-weight: 800 !important;
cursor: pointer;
font-family: inherit;
transition: filter 0.15s, background-color 0.15s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(237, 0, 127, 0.35) !important;
}
.fb-summary-submit:hover:not(:disabled) {
filter: brightness(1.06);
}
.fb-summary-submit:disabled {
opacity: .6;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════
Mã giảm giá / Voucher (chuẩn giao diện vé máy bay)
═══════════════════════════════════════════════════════════════ */
.tt-vc-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid #f0d9e7;
border-radius: 12px;
background: #fff;
}
.tt-vc-trigger-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.tt-vc-trigger-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #f1f5f9;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tt-vc-trigger-text {
min-width: 0;
}
.tt-vc-trigger-title {
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tt-vc-trigger-desc {
font-size: 12px;
color: #888;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tt-vc-open-btn {
background: none;
border: none;
color: var(--c-primary, #ed007f);
font-weight: 700;
font-size: 14px;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.tt-vc-open-btn:hover {
text-decoration: underline;
}
/* Modal nhập / chọn mã */
.tt-vc-modal {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.tt-vc-modal-box {
background: #fff;
border-radius: 14px;
max-width: 520px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.tt-vc-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #eee;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
}
.tt-vc-close-btn {
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: #999;
cursor: pointer;
padding: 0 4px;
}
.tt-vc-close-btn:hover {
color: #333;
}
.tt-vc-modal-body {
padding: 18px 20px;
overflow-y: auto;
}
.tt-vc-modal-label {
font-size: 13px;
font-weight: 600;
color: #444;
margin-bottom: 8px;
}
.tt-vc-manual-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.tt-vc-modal-input {
flex: 1;
padding: 12px 14px;
border: 1.5px solid #d1d5db;
border-radius: 10px;
font-size: 14px;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.4px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.tt-vc-modal-input:focus {
border-color: var(--c-primary, #ed007f);
box-shadow: 0 0 0 3px rgba(237, 0, 127, 0.15);
}
.tt-vc-modal-apply-btn {
padding: 0 22px;
background: var(--c-primary, #ed007f);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: filter 0.15s;
}
.tt-vc-modal-apply-btn:hover:not(:disabled) {
filter: brightness(1.08);
}
.tt-vc-modal-apply-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.tt-vc-modal-status {
margin: 12px 0 4px;
font-size: 13px;
line-height: 1.5;
}
.tt-vc-list-head {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid #f0f0f0;
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
}
.tt-vc-list-desc {
font-size: 12px;
color: #888;
margin: 2px 0 12px;
}
.tt-vc-list-empty {
text-align: center;
color: #999;
font-size: 13px;
padding: 24px 0;
}
.tt-vc-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid #eee;
border-radius: 10px;
background: #fff;
cursor: pointer;
font-family: inherit;
margin-bottom: 8px;
text-align: left;
transition: all 0.15s;
}
.tt-vc-item:hover {
border-color: var(--c-primary, #ed007f);
background: #fdf0f6;
}
.tt-vc-item-l {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tt-vc-item-code {
font-size: 14px;
font-weight: 700;
color: var(--c-primary, #ed007f);
}
.tt-vc-item-name {
font-size: 12px;
color: #666;
}
.tt-vc-item-disc {
font-size: 14px;
font-weight: 700;
color: #16a34a;
white-space: nowrap;
}
.tt-vc-modal-foot {
padding: 14px 20px;
border-top: 1px solid #eee;
text-align: right;
}
.tt-vc-done-btn {
padding: 10px 24px;
background: #fff;
border: 1.5px solid #d0d0d0;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
font-family: inherit;
color: #444;
}
.tt-vc-done-btn:hover {
border-color: #999;
}
/* Hộp voucher đã áp dụng thành công */
.tt-vc-applied {
margin-top: 10px;
padding: 12px 14px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 10px;
font-size: 13px;
color: #166534;
}
.tt-vc-applied-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.tt-vc-applied-code {
font-family: 'SF Mono', monospace;
font-size: 14px;
color: #15803d;
}
.tt-vc-applied-name {
color: #3f6f4d;
margin-left: 4px;
}
.tt-vc-remove-btn {
background: none;
border: none;
color: #dc2626;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
font-family: inherit;
padding: 0;
}
.tt-vc-remove-btn:hover {
color: #b91c1c;
}
.tt-vc-applied-amt-row {
margin-top: 4px;
font-size: 13px;
font-weight: 700;
color: #15803d;
}
/* Sidebar voucher discount row */
.dvt-side-promo-row {
display: none;
padding: 10px 0 6px;
border-top: 1px dashed #eee;
font-size: 13px;
}
/* Sidebar voucher input box */
.dvt-side-voucher-box {
padding: 14px 18px 16px;
background: #fafafa;
border-top: 1px solid #eee;
}
.dvt-side-voucher-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #374151;
margin-bottom: 8px;
}
.dvt-side-voucher-title svg {
color: #64748b;
}
.dvt-side-voucher-input-group {
display: flex;
gap: 8px;
align-items: stretch;
}
.dvt-side-voucher-input {
flex: 1;
min-width: 0;
padding: 9px 12px;
border: 1.5px solid #d1d5db;
border-radius: 9px;
font-size: 13px;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.4px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
background: #fff;
}
.dvt-side-voucher-input:focus {
border-color: var(--c-primary, #ed007f);
box-shadow: 0 0 0 3px rgba(237, 0, 127, 0.12);
}
.dvt-side-voucher-btn {
padding: 0 16px;
background: var(--c-primary, #ed007f);
color: #fff;
border: none;
border-radius: 9px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: filter 0.15s;
}
.dvt-side-voucher-btn:hover:not(:disabled) {
filter: brightness(1.08);
}
.dvt-side-voucher-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.dvt-side-voucher-links {
margin-top: 6px;
display: flex;
justify-content: flex-end;
}
.dvt-side-voucher-link {
font-size: 12px;
color: #64748b;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.dvt-side-voucher-link:hover {
color: var(--c-primary, #ed007f);
}
.dvt-side-voucher-msg {
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
}
/* ═══════════════════════════════════════════════════════════════
Responsive Mobile
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.fb-grid {
grid-template-columns: 1fr;
}
.fb-aside {
position: static;
margin-top: 16px;
}
.fb-row,
.fb-row-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.fb-page {
padding: 12px 0 84px;
}
.fb-wrap {
padding: 0 10px;
}
.fb-title {
font-size: 20px;
}
.fb-header-bar {
display: block;
min-height: 0;
margin-bottom: 2px;
}
.fb-header-bar .fb-back-link {
position: static;
transform: none;
margin: 0 0 8px;
}
.fb-card {
border-radius: 14px;
padding: 16px 15px 18px;
margin-bottom: 14px;
}
.fb-summary {
border-radius: 14px;
}
.fb-summary-total-price {
font-size: 22px;
}
.fb-summary-submit {
height: 50px;
}
.tt-pm-item {
padding: 12px 14px;
gap: 12px;
}
.tt-pm-name {
font-size: 14px;
}
}
/* ─── Floating Side Timer Widget (Cố định ở GIỮA CẠNH MÀN HÌNH - Chuẩn Vé xe khách) ─── */
.floating-timer-widget,
.dvt-floating-timer {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #ffffff;
border-radius: 16px 0 0 16px;
box-shadow: -4px 6px 20px rgba(0,0,0,.18);
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px 12px 12px;
cursor: pointer;
z-index: 9999;
border: 1.5px solid #cbd5e1;
border-right: none;
transition: transform .2s, box-shadow .2s, background-color .3s, border-color .3s;
}
.dvt-timer-close-btn {
position: absolute;
top: -7px;
left: -7px;
width: 22px;
height: 22px;
background: #ef4444;
color: #ffffff;
border: 1.5px solid #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
z-index: 10;
transition: transform 0.15s, background-color 0.15s;
padding: 0;
}
.dvt-timer-close-btn:hover {
background: #dc2626;
transform: scale(1.15);
}
/* Đang chờ /release trả về: khoá nút X */
.dvt-timer-close-btn.is-busy,
.dvt-timer-close-btn:disabled {
background: #94a3b8;
cursor: wait;
transform: none;
}
.floating-timer-widget:hover,
.dvt-floating-timer:hover {
transform: translateY(-50%) translateX(-4px);
box-shadow: -6px 8px 25px rgba(237,0,127,.3);
}
.floating-timer-widget .ft-icon,
.dvt-floating-timer .ft-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--c-primary, #ed007f);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
transition: background-color .3s;
}
.floating-timer-widget .ft-content,
.dvt-floating-timer .ft-content {
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.floating-timer-widget .ft-title,
.dvt-floating-timer .ft-title {
font-size: 0.75rem;
color: #6b7280;
line-height: 1.2;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.floating-timer-widget .ft-seats,
.dvt-floating-timer .ft-seats {
font-size: 0.78rem;
color: #374151;
font-weight: 600;
line-height: 1.2;
}
.floating-timer-widget .ft-time,
.dvt-floating-timer .ft-time {
font-size: 0.95rem;
font-weight: 800;
color: #d97706;
line-height: 1.2;
letter-spacing: 0.03em;
}
/* State Urgent (< 2 phút) */
.dvt-floating-timer.dvt-timer-urgent,
.floating-timer-widget.dvt-timer-urgent {
border-color: #ef4444;
background: #fef2f2;
animation: dvtPulseUrgent 1.2s infinite;
}
.dvt-floating-timer.dvt-timer-urgent .ft-icon,
.floating-timer-widget.dvt-timer-urgent .ft-icon {
background: #ef4444;
}
.dvt-floating-timer.dvt-timer-urgent .ft-time,
.floating-timer-widget.dvt-timer-urgent .ft-time {
color: #dc2626;
}
@keyframes dvtPulseUrgent {
0% { box-shadow: -4px 0 0 0 rgba(239, 68, 68, 0.4); }
70% { box-shadow: -4px 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: -4px 0 0 0 rgba(239, 68, 68, 0); }
}
/* Highlight hiệu ứng cuộn tới nút thanh toán */
.dvt-btn-highlight {
animation: dvtBtnFlash 1.5s ease-in-out;
}
@keyframes dvtBtnFlash {
0%, 100% { transform: scale(1); box-shadow: none; }
50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(237, 0, 127, 0.6); }
}
/* Responsive (< 768px) */
@media (max-width: 767px) {
/* Tab dọc gọn, bám giữa cạnh phải: chỉ icon + thời gian */
.floating-timer-widget,
.dvt-floating-timer {
top: 50%;
bottom: auto;
right: 0;
transform: translateY(-50%);
flex-direction: column;
padding: 8px 5px 8px 6px;
border-radius: 14px 0 0 14px;
background: rgba(15, 23, 42, .92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1.5px solid rgba(237, 0, 127, .8);
border-right: none;
box-shadow: -3px 4px 14px rgba(0, 0, 0, 0.25);
color: #ffffff;
gap: 5px;
}
.floating-timer-widget:hover,
.dvt-floating-timer:hover {
transform: translateY(-50%);
}
.dvt-timer-close-btn {
top: -8px;
left: -6px;
width: 18px;
height: 18px;
font-size: 12px;
}
.floating-timer-widget .ft-icon,
.dvt-floating-timer .ft-icon {
width: 26px;
height: 26px;
font-size: 0.8rem;
background: var(--c-primary, #ed007f);
}
.floating-timer-widget .ft-title,
.dvt-floating-timer .ft-title,
.floating-timer-widget .ft-seats,
.dvt-floating-timer .ft-seats {
display: none;
}
.floating-timer-widget .ft-time,
.dvt-floating-timer .ft-time {
font-size: 0.72rem;
color: #fbbf24;
font-weight: 800;
background: rgba(255, 255, 255, .12);
padding: 2px 5px;
border-radius: 8px;
font-variant-numeric: tabular-nums;
}
}
/* Badge giá sau khi áp dụng giảm giá đối tượng */
.fb-pax-meta-price {
font-size: 13px;
font-weight: 600;
color: var(--c-primary, #ed007f);
margin-left: 8px;
}
/* ─── POPUP MODAL XÁC NHẬN THÔNG TIN ĐẶT VÉ TÀU HOẢ ─── */
.dvt-confirm-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10500;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.dvt-confirm-modal .vexe-confirm-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(4px);
}
.dvt-confirm-modal .vexe-confirm-modal-box {
position: relative;
width: 100%;
max-width: 560px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden;
z-index: 2;
animation: dvtConfirmModalScale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dvtConfirmModalScale {
from {
opacity: 0;
transform: scale(0.94) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.dvt-confirm-modal .vexe-confirm-modal-head {
padding: 16px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
}
.dvt-confirm-modal .vexe-confirm-modal-head .modal-title {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
display: flex;
align-items: center;
gap: 8px;
}
.dvt-confirm-modal .vexe-confirm-modal-head .modal-title i {
color: var(--c-primary, #ed007f);
}
.dvt-confirm-modal .vexe-confirm-modal-head .modal-close-btn {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
color: #64748b;
cursor: pointer;
padding: 0 4px;
transition: color 0.15s ease;
}
.dvt-confirm-modal .vexe-confirm-modal-head .modal-close-btn:hover {
color: #0f172a;
}
.dvt-confirm-modal .vexe-confirm-modal-body {
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.dvt-confirm-modal .confirm-alert-note {
background: #fff1f2;
border: 1px solid #fecdd3;
color: #9f1239;
border-radius: 12px;
padding: 10px 14px;
font-size: 0.84rem;
display: flex;
align-items: flex-start;
gap: 8px;
}
.dvt-confirm-modal .confirm-alert-note i {
color: var(--c-primary, #ed007f);
font-size: 1rem;
margin-top: 2px;
flex-shrink: 0;
}
.dvt-confirm-modal .confirm-section {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px;
}
.dvt-confirm-modal .confirm-section .section-title {
font-size: 0.92rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.dvt-confirm-modal .confirm-section .section-title i {
color: var(--c-primary, #ed007f);
}
.dvt-confirm-modal .confirm-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.dvt-confirm-modal .confirm-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
color: #475569;
}
.dvt-confirm-modal .confirm-item .item-val {
font-weight: 700;
color: #0f172a;
}
.dvt-confirm-modal .confirm-item.highlight-item {
background: #ffffff;
border: 1.5px dashed var(--c-primary, #ed007f);
padding: 8px 12px;
border-radius: 10px;
}
.dvt-confirm-modal .confirm-item.note-item {
background: #fff8f6;
border: 1px dashed #fcd34d;
padding: 8px 12px;
border-radius: 8px;
}
.dvt-confirm-modal .confirm-passengers-box {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #cbd5e1;
}
.dvt-confirm-modal .passengers-box-title {
font-size: 0.82rem;
font-weight: 700;
color: #475569;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.dvt-confirm-modal .passengers-box-title i {
color: var(--c-primary, #ed007f);
}
.dvt-confirm-modal .passengers-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dvt-confirm-modal .passenger-chip {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 5px 10px;
font-size: 0.8rem;
color: #334155;
display: inline-flex;
align-items: center;
gap: 4px;
}
.dvt-confirm-modal .passenger-chip .p-seat {
font-weight: 800;
color: var(--c-primary, #ed007f);
}
.dvt-confirm-modal .passenger-chip .p-phone {
color: #64748b;
font-size: 0.76rem;
}
.dvt-confirm-modal .confirm-trip-box {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 12px;
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 8px;
}
.dvt-confirm-modal .confirm-trip-box .trip-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.dvt-confirm-modal .confirm-trip-box .trip-tag {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
}
.dvt-confirm-modal .confirm-trip-box .trip-tag.outbound {
background: #f1f5f9;
color: #334155;
}
.dvt-confirm-modal .confirm-trip-box .trip-date {
font-size: 0.8rem;
font-weight: 700;
color: #475569;
}
.dvt-confirm-modal .confirm-trip-box .trip-route-title {
font-weight: 800;
font-size: 0.95rem;
color: #0f172a;
}
.dvt-confirm-modal .confirm-trip-box .trip-info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
font-size: 0.86rem;
color: #475569;
padding-top: 4px;
border-top: 1px dashed #e2e8f0;
}
.dvt-confirm-modal .confirm-trip-box .trip-info-row .lbl {
white-space: nowrap;
flex-shrink: 0;
}
.dvt-confirm-modal .confirm-trip-box .trip-info-row .val {
word-break: break-word;
}
.dvt-confirm-modal .confirm-trip-box .trip-point-row {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.84rem;
color: #334155;
}
.dvt-confirm-modal .confirm-trip-box .trip-point-row i.icon-pick {
color: var(--c-primary, #ed007f);
margin-top: 3px;
}
.dvt-confirm-modal .confirm-trip-box .trip-point-row i.icon-drop {
color: #10b981;
margin-top: 3px;
}
.dvt-confirm-modal .confirm-section.summary-section {
background: #fff1f2;
border-color: #fecdd3;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.dvt-confirm-modal .confirm-pay-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
}
.dvt-confirm-modal .confirm-pay-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
color: #475569;
}
.dvt-confirm-modal .confirm-pay-row.discount-row {
background: #f0fdf4;
border: 1px dashed #a7f3d0;
padding: 6px 10px;
border-radius: 8px;
}
.dvt-confirm-modal .confirm-pay-row.total-row {
font-size: 1rem;
font-weight: 700;
color: #0f172a;
padding-top: 8px;
border-top: 1px solid #fecdd3;
}
.dvt-confirm-modal .confirm-pay-row .total-price {
font-size: 1.25rem;
font-weight: 800;
color: var(--c-primary, #ed007f);
}
.dvt-confirm-modal .vexe-confirm-modal-foot {
padding: 16px 20px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 12px;
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-edit-info {
background: #ffffff;
border: 1.5px solid #cbd5e1;
color: #475569;
padding: 10px 18px;
border-radius: 12px;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-edit-info:hover {
background: #f1f5f9;
border-color: #94a3b8;
color: #0f172a;
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-submit-final-modal {
flex: 1;
background: var(--c-primary, #ed007f);
color: #ffffff;
border: none;
padding: 12px 20px;
border-radius: 12px;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(237, 0, 127, 0.35);
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-submit-final-modal:hover:not(:disabled) {
background: #d60072;
transform: translateY(-1px);
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-submit-final-modal:disabled {
opacity: 0.65;
cursor: not-allowed;
}
@media (max-width: 576px) {
.dvt-confirm-modal {
padding: 10px;
}
.dvt-confirm-modal .vexe-confirm-modal-box {
border-radius: 16px;
max-height: 94vh;
}
.dvt-confirm-modal .vexe-confirm-modal-head {
padding: 12px 16px;
}
.dvt-confirm-modal .vexe-confirm-modal-head .modal-title {
font-size: 1rem;
}
.dvt-confirm-modal .vexe-confirm-modal-body {
padding: 14px;
gap: 12px;
}
.dvt-confirm-modal .vexe-confirm-modal-foot {
padding: 12px 14px;
gap: 8px;
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-edit-info {
padding: 9px 12px;
font-size: 0.82rem;
}
.dvt-confirm-modal .vexe-confirm-modal-foot .btn-submit-final-modal {
padding: 10px 14px;
font-size: 0.88rem;
}
}
.dvt-btn-copy-pax1 {
margin-left: auto;
background: #fff1f2;
border: 1px solid #fecdd3;
color: var(--c-primary, #ed007f);
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
white-space: nowrap;
}
.dvt-btn-copy-pax1:hover {
background: #ffe4e6;
border-color: #fda4af;
}
/* ─── Zero Inline CSS Cleanups ─── */
#dvtTimerBanner,
#dvtEmpty,
#dvtForm,
#dvtInvoiceBox,
#dvtAdultTicketRow,
#ttVcModal,
#ttVoucherStatus,
#ttVoucherApplied,
#dvtSideLeg1,
#dvtSideVoucherMsg,
#dvtSideOriginalRow,
#dvtSidePaxDiscountContainer,
#dvtSidePromoRow,
#dvtSideFeeRow,
#dvtConfirmModal,
#dvtCfContactNoteRow,
#dvtCfAdultTicketRow,
#dvtCfInvoiceBox,
#dvtCfReturnTripBox,
#dvtCfOriginalRow,
#dvtCfPromoContainer,
#dvtCfPaxDiscountContainer,
#dvtCfDiscountRow,
#dvtCfFeeRow {
display: none;
}
#dvtCfPromoContainer {
flex-direction: column;
gap: 8px;
}
.dvt-cf-pax-km-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: #ecfdf5;
color: #059669;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
margin-left: 6px;
border: 1px solid #a7f3d0;
vertical-align: middle;
}
.dvt-checkbox-divider {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
}
.dvt-checkbox-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #1e293b;
cursor: pointer;
font-weight: 600;
}
.dvt-checkbox-input {
width: 18px;
height: 18px;
accent-color: #ed007f;
}
.dvt-invoice-box {
margin-top: 12px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.dvt-row-mb {
margin-bottom: 12px;
}
.dvt-invoice-label {
font-weight: 600;
font-size: 13px;
color: #334155;
}
.dvt-disclaimer-box {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 14px;
font-size: 13px;
color: #1e3a8a;
line-height: 1.5;
}
.dvt-disclaimer-title {
font-weight: 700;
margin-bottom: 4px;
color: #1d4ed8;
display: flex;
align-items: center;
gap: 6px;
}
.dvt-disclaimer-list {
margin: 4px 0 0 18px;
padding: 0;
list-style: disc;
}
.dvt-adult-ticket-row {
margin-top: 16px;
padding: 12px 16px;
background: #fff7ed;
border: 1px solid #ffedd5;
border-radius: 10px;
}
.dvt-adult-ticket-label {
color: #c2410c;
font-weight: 700;
}
.dvt-text-uppercase {
text-transform: uppercase;
}
.dvt-adult-ticket-hint {
color: #9a3412;
}
.dvt-mt-10 {
margin-top: 10px;
}
.dvt-mt-12 {
margin-top: 12px;
}
.dvt-side-leg-return {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
}
.dvt-promo-code-text {
color: var(--c-primary, #ed007f);
font-weight: 600;
}
.dvt-promo-discount-val {
color: #059669;
font-weight: 700;
}
.dvt-fee-hint-text {
color: #64748b;
font-weight: normal;
}
.dvt-fee-val-text {
color: #ea580c;
font-weight: 700;
}
.dvt-cf-alert-note {
background: #fff7ed;
border-color: #ffedd5;
color: #9a3412;
}
.dvt-cf-alert-icon {
color: #ea580c;
}
.dvt-text-primary {
color: var(--c-primary, #ed007f);
}
.dvt-cf-adult-row {
background: #fff7ed;
border-color: #ffedd5;
}
.dvt-cf-adult-label {
color: #c2410c;
font-weight: 700;
}
.dvt-cf-adult-val {
color: #9a3412;
}
.dvt-cf-invoice-box {
margin-top: 10px;
padding: 10px 12px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 10px;
font-size: 0.84rem;
}
.dvt-cf-invoice-title {
font-weight: 700;
color: #0f172a;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.dvt-cf-invoice-icon {
color: #0284c7;
}
.dvt-cf-invoice-details {
color: #334155;
line-height: 1.5;
}
.dvt-passengers-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.dvt-cf-return-trip-box {
margin-top: 12px;
}
.dvt-trip-tag-return {
background: #e2e8f0;
color: #1e293b;
}
.dvt-cf-discount-val {
color: #059669;
}
.dvt-cf-fee-val {
color: #ea580c;
}
.dvt-cart-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: #f8fafc;
border-radius: 8px;
margin-bottom: 6px;
font-size: 13px;
border: 1px solid #f1f5f9;
}
.dvt-cart-item-row > span {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
flex: 1;
min-width: 0;
margin-right: 8px;
}
.dvt-cart-item-row > span > b {
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1.3;
}
.dvt-cart-item-row > span .td-cart-tag-time {
margin-left: 0;
margin-top: 2px;
}
.dvt-cart-item-row b.dvt-item-price {
color: #1e293b;
white-space: nowrap;
flex-shrink: 0;
}
/* Quy ước bảng giá vé tàu: khoản CỘNG (phụ thu chặng dài, phí dịch vụ, phí cổng) = cam + dấu "+";
khoản TRỪ (khuyến mại, giảm đối tượng, mã giảm giá) = xanh + dấu "-" */
.dvt-item-surcharge {
font-size: 11px;
font-weight: 600;
color: #ea580c;
}
.dvt-surcharge-row .fb-summary-total-subval {
color: #ea580c;
font-weight: 700;
}
.dvt-confirm-modal .confirm-pay-row.plus-row {
color: #ea580c;
background: #fff7ed;
border: 1px dashed #fdba74;
padding: 6px 10px;
border-radius: 8px;
}
.dvt-confirm-modal .confirm-pay-row.plus-row > strong {
color: #ea580c;
}
.dvt-surcharge-row[hidden] {
display: none;
}
/* Leg blocks for round trip in #dvtCartItems */
.dvt-side-leg-block {
margin-bottom: 12px;
}
.dvt-side-leg-block:last-child {
margin-bottom: 0;
}
.dvt-side-leg-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
padding: 2px 2px 4px;
border-bottom: 1px dashed #e2e8f0;
}
.dvt-side-leg-header .dvt-side-leg-title {
font-size: 12px;
font-weight: 600;
color: #64748b;
}
.dvt-side-leg-items {
display: flex;
flex-direction: column;
gap: 4px;
}
.td-cart-tag-dir {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
background: #e0f2fe;
color: #0369a1;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
}
.td-cart-tag-dir.ret {
background: #fce7f3;
color: #be185d;
}
/* Modal Overlay & Scrollbar */
.dvt-timer-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.65);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
backdrop-filter: blur(4px);
}
/* SweetAlert2 mở từ trong các modal vé tàu (999999, vd "Bỏ ghế đã chọn?") phải nổi lên trên để bấm được;
vẫn dưới overlay "Đang xử lý" (.dvt-processing-overlay 9999999).
!important có lý do: bundle chung pages/comp-dlv-swal.css đặt `.swal2-container { z-index: 100050 !important }`
(< 999999 của modal) -> cần !important + specificity cao hơn (body .swal2-container) để thắng.
File này chỉ load ở trang vé tàu nên không ảnh hưởng popup trang khác. */
body .swal2-container {
z-index: 1000000 !important;
}
#dvtTimerDetailModal, #dvtTimerDetailModal * {
-ms-overflow-style: none;
scrollbar-width: none;
}
#dvtTimerDetailModal::-webkit-scrollbar, #dvtTimerDetailModal *::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Modal Dialog — header gradient + thẻ đếm ngược nổi + khối Chiều đi / Chiều về */
.dvt-timer-modal-dialog {
--dvt-out: var(--c-primary, #ed007f);
--dvt-ret: #4f46e5;
background: #f4f6fb;
border-radius: 24px;
max-width: 500px;
width: 100%;
padding: 0 0 20px;
box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.45);
position: relative;
text-align: left;
max-height: 90vh;
overflow-y: auto;
animation: dvtModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dvtModalIn {
from { transform: translateY(16px) scale(0.98); opacity: 0; }
to { transform: none; opacity: 1; }
}
.dvt-timer-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 20px;
color: #ffffff;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: background 0.15s ease;
}
.dvt-timer-modal-close:hover {
background: rgba(255, 255, 255, 0.32);
}
/* Mobile: modal chi tiết giữ chỗ full màn hình, nút đóng luôn hiển thị khi cuộn */
@media (max-width: 767px) {
.dvt-timer-modal-overlay {
padding: 0;
align-items: stretch;
}
.dvt-timer-modal-dialog {
max-width: none;
height: 100%;
max-height: none;
border-radius: 0;
padding-bottom: 0;
}
#dvtTimerDetailModal .dvt-side-items-scroll {
max-height: none;
}
.dvt-timer-modal-close {
position: fixed;
top: calc(10px + env(safe-area-inset-top, 0px));
right: 10px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dvt-timer-modal-header {
padding-top: calc(20px + env(safe-area-inset-top, 0px));
}
}
.dvt-timer-modal-header {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 60px 58px 22px;
background:
radial-gradient(120% 140% at 100% 0%, rgba(237, 0, 127, 0.55) 0%, transparent 55%),
linear-gradient(135deg, #0f2550 0%, #1B448E 60%, #2563eb 100%);
color: #ffffff;
}
.dvt-timer-modal-icon {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fbbf24;
font-size: 19px;
flex-shrink: 0;
}
.dvt-timer-modal-title {
font-size: 17px;
font-weight: 800;
color: #ffffff;
margin: 0;
line-height: 1.25;
}
.dvt-timer-modal-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
}
/* Thẻ đếm ngược nổi đè lên header */
.dvt-timer-modal-banner {
position: relative;
margin: -42px 18px 14px;
background: #ffffff;
border-radius: 18px;
padding: 14px 16px;
text-align: center;
box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.35);
border: 1px solid #eef2f7;
}
.dvt-timer-modal-banner.urgent {
background: #fff1f2;
border-color: #fecaca;
animation: dvtPulseUrgent 1.2s infinite;
}
.dvt-timer-modal-banner-label {
font-size: 11px;
color: #64748b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.dvt-timer-modal-banner.urgent .dvt-timer-modal-banner-label {
color: #991b1b;
}
.dvt-timer-modal-time {
font-size: 36px;
font-weight: 800;
color: var(--c-primary, #ed007f);
letter-spacing: 1px;
line-height: 1.1;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.dvt-timer-modal-banner.urgent .dvt-timer-modal-time {
color: #dc2626;
}
.dvt-timer-modal-urgent-msg {
font-size: 12px;
color: #dc2626;
font-weight: 600;
margin-top: 4px;
}
/* Các khối nội dung bên dưới: thẻ trắng có lề hai bên */
.dvt-timer-modal-dialog > .dvt-timer-modal-meta,
.dvt-timer-modal-dialog > .dvt-modal-contact-box,
.dvt-timer-modal-dialog > div:not([class]),
.dvt-timer-modal-dialog > .dvt-modal-pricing-box {
margin-left: 18px;
margin-right: 18px;
}
/* Trip Meta Box */
.dvt-timer-modal-meta {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 16px;
padding: 12px 14px;
margin-bottom: 14px;
}
.dvt-timer-modal-meta-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.dvt-timer-modal-train-code {
font-weight: 800;
color: #0f172a;
font-size: 14px;
}
.dvt-timer-modal-vnr-badge {
font-size: 11px;
background: #eef2ff;
color: #3730a3;
padding: 3px 9px;
border-radius: 999px;
font-weight: 700;
white-space: nowrap;
}
.dvt-timer-modal-route {
font-size: 14px;
color: #1e293b;
font-weight: 700;
margin-bottom: 4px;
}
.dvt-timer-modal-date {
font-size: 12px;
color: #64748b;
}
/* Khối Chiều đi / Chiều về: thẻ có dải màu bên trái (đi: hồng, về: tím) */
.dvt-timer-modal-dialog .dvt-side-leg-block {
position: relative;
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 16px;
padding: 0;
margin: 0 0 10px !important;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dvt-timer-modal-dialog .dvt-side-leg-block::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--dvt-out);
}
.dvt-timer-modal-dialog .dvt-side-ret-block::before {
background: var(--dvt-ret);
}
.dvt-timer-modal-dialog .dvt-side-leg-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
padding: 10px 14px 10px 16px;
margin: 0;
background: #fdf2f8;
border-bottom: 1px solid #fce7f3;
}
.dvt-timer-modal-dialog .dvt-side-ret-block .dvt-side-leg-header {
background: #eef2ff;
border-bottom-color: #e0e7ff;
}
.dvt-timer-modal-dialog .dvt-side-leg-header .td-cart-tag-dir {
background: var(--dvt-out);
color: #ffffff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
margin: 0;
}
.dvt-timer-modal-dialog .dvt-side-ret-block .td-cart-tag-dir {
background: var(--dvt-ret);
}
.dvt-timer-modal-dialog .dvt-side-leg-title {
font-size: 13px;
font-weight: 800;
color: #0f172a;
}
.dvt-timer-modal-dialog .dvt-side-leg-sub {
flex-basis: 100%;
font-size: 12px;
color: #475569;
font-weight: 600;
}
.dvt-timer-modal-dialog .dvt-side-leg-items {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 12px 6px 16px;
}
.dvt-timer-modal-dialog .dvt-cart-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 0;
margin: 0;
background: none;
border: 0;
border-bottom: 1px dashed #e2e8f0;
border-radius: 0;
font-size: 13px;
}
.dvt-timer-modal-dialog .dvt-cart-item-row:last-child {
border-bottom: 0;
}
.dvt-timer-modal-dialog .dvt-cart-item-row > span > b::before {
content: '\f6c0';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 11px;
color: #94a3b8;
margin-right: 6px;
}
.dvt-timer-modal-dialog .dvt-modal-pax-card {
margin: 6px 0;
}
/* Trang đặt vé, vé một chiều: hàng ghế nằm thẳng trong danh sách, không có khối chiều */
.dvt-timer-modal-dialog .dvt-side-items-scroll > .dvt-cart-item-row {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 6px;
}
/* Passenger Card in Modal */
.dvt-modal-pax-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 8px;
font-size: 13px;
}
.dvt-modal-pax-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.dvt-side-items-scroll {
max-height: 260px;
overflow-y: auto;
padding-right: 2px;
}
.dvt-modal-user-icon {
color: #64748b;
margin-right: 6px;
}
.dvt-modal-pax-type-badge {
font-size: 11px;
color: #64748b;
background: #e2e8f0;
padding: 1px 6px;
border-radius: 8px;
margin-left: 4px;
}
.dvt-modal-pax-price {
color: #0f172a;
font-weight: 700;
}
.dvt-modal-pax-bottom {
font-size: 12px;
color: #475569;
display: flex;
justify-content: space-between;
align-items: center;
}
.dvt-modal-pax-seat {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dvt-modal-chair-icon {
color: #64748b;
}
/* Contact Info Box */
.dvt-modal-contact-box {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 16px;
padding: 12px 14px;
margin-bottom: 14px;
font-size: 12.5px;
color: #334155;
}
.dvt-modal-contact-box.empty {
background: #f8fafc;
border: 1px dashed #cbd5e1;
color: #94a3b8;
}
.dvt-modal-contact-title {
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
}
/* Pricing Breakdown Box */
.dvt-modal-pricing-box {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 16px;
padding: 12px 14px;
margin-bottom: 16px;
}
.dvt-modal-pricing-row {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 13px;
color: #475569;
margin-bottom: 6px;
}
.dvt-modal-pricing-row.discount {
color: #16a34a;
}
.dvt-modal-pricing-row.fee {
color: #ea580c;
}
.dvt-modal-pricing-box .dvt-modal-insurance-hint {
margin: 6px 0 8px 0;
}
.dvt-modal-pricing-total {
border-top: 1px dashed #cbd5e1;
margin-top: 8px;
padding-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dvt-modal-pricing-box > .dvt-modal-pricing-total:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.dvt-modal-pricing-total-label {
font-weight: 700;
font-size: 14px;
color: #0f172a;
}
/* Ghi chú nhỏ dưới nhãn tổng (vd "6 vé · chưa gồm phí dịch vụ") để nhãn chính không rớt hàng */
.dvt-modal-pricing-total-sub {
display: block;
margin-top: 2px;
font-size: 11.5px;
font-weight: 500;
color: #64748b;
}
.dvt-modal-pricing-total-val {
font-size: 22px;
font-weight: 800;
color: var(--c-primary, #ed007f);
font-variant-numeric: tabular-nums;
}
.dvt-modal-seats-empty {
font-size: 13px;
color: #64748b;
text-align: center;
padding: 12px;
}
/* Action Button — dính đáy khi cuộn */
.dvt-modal-action-btn {
position: sticky;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 36px);
margin: 0 18px;
padding: 15px;
background: linear-gradient(135deg, var(--c-primary, #ed007f) 0%, #c9006b 100%);
color: #fff;
font-weight: 700;
font-size: 15px;
border: none;
border-radius: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
box-shadow: 0 10px 22px -8px rgba(237, 0, 127, 0.6);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dvt-modal-action-btn:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 14px 26px -8px rgba(237, 0, 127, 0.65);
}
@media (max-width: 767px) {
.dvt-modal-action-btn {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
}
/* Desktop: modal rộng 2 cột — trái: danh sách vé Chiều đi / Chiều về (cuộn riêng),
phải: đồng hồ, thông tin chuyến, người đặt, tổng tiền, nút tiếp tục */
@media (min-width: 900px) {
.dvt-timer-modal-dialog {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
/* Hàng cuối 1fr nhận phần cao dư của cột trái, để các thẻ cột phải không bị giãn cách */
grid-template-rows: auto repeat(5, min-content) 1fr;
column-gap: 18px;
max-width: 920px;
max-height: 86vh;
overflow-y: auto; /* cột phải quá dài (nhiều dòng giảm giá) vẫn cuộn tới được nút */
padding-bottom: 20px;
}
.dvt-timer-modal-header {
grid-column: 1 / -1;
padding: 18px 64px 18px 22px;
margin-bottom: 18px;
}
.dvt-timer-modal-dialog > .dvt-timer-modal-banner,
.dvt-timer-modal-dialog > .dvt-timer-modal-meta,
.dvt-timer-modal-dialog > .dvt-modal-contact-box,
.dvt-timer-modal-dialog > .dvt-modal-pricing-box,
.dvt-timer-modal-dialog > .dvt-modal-action-btn {
grid-column: 2;
margin-left: 0;
margin-right: 22px;
}
.dvt-timer-modal-banner {
margin-top: 0;
box-shadow: none;
}
.dvt-timer-modal-dialog > div:not([class]) {
grid-column: 1;
grid-row: 2 / -1;
margin: 0 0 0 22px !important;
max-height: calc(86vh - 120px);
overflow-y: auto;
padding-right: 4px;
}
#dvtTimerDetailModal .dvt-side-items-scroll {
max-height: none;
overflow: visible;
}
.dvt-modal-action-btn {
position: static;
width: auto;
}
}
/* ─── Nút X nhỏ xóa ghế & Nút Chọn lại / Chọn thêm ghế (DLV Style) ─── */
.dvt-cart-item-right {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.dvt-btn-del-seat,
.fb-btn-del-pax {
width: 22px;
height: 22px;
min-width: 22px;
border-radius: 50%;
background: #f1f5f9;
border: 1px solid #e2e8f0;
color: #94a3b8;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0;
transition: all 0.2s ease;
flex-shrink: 0;
}
.dvt-btn-del-seat:hover,
.fb-btn-del-pax:hover {
background: #ffe4e6;
border-color: #fda4af;
color: #e11d48;
transform: scale(1.1);
}
.dvt-modal-pax-top-right {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.dvt-pax-seat-box {
background: #f8fafc;
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Form hành khách khứ hồi: mỗi chiều 1 khung (ghế + khuyến mại), viền trái xanh = đi, hồng = về
(cùng tông với badge ĐI/VỀ .td-cart-tag-dir); hộp khuyến mại bên trong bỏ viền trái */
.dvt-pax-legs {
display: flex;
flex-direction: column;
gap: 12px;
}
.dvt-pax-leg {
padding: 8px;
border: 1px solid #e2e8f0;
border-left: 4px solid #0284c7;
border-radius: 10px;
background: #ffffff;
}
.dvt-pax-leg.is-out .dvt-pax-seat-box {
background: #f0f9ff;
border-color: #e0f2fe;
}
.dvt-pax-leg.is-ret {
border-left-color: var(--c-primary, #ed007f);
}
.dvt-pax-leg.is-ret .dvt-pax-seat-box {
background: #fdf2f8;
border-color: #fce7f3;
}
.dvt-pax-legs .dvt-pax-leg .dvt-promo-choice-box {
border-left: 1px solid #fce7f3;
}
.dvt-pax-legs .dvt-pax-leg .dvt-promo-choice-box.opted-out {
border-left-color: #e2e8f0;
}
.dvt-pax-seat-right {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.dvt-pax-seat-one {
font-weight: 700;
color: #1e293b;
}
.dvt-pax-seat-one i {
color: #64748b;
}
.dvt-pax-seat-train {
display: none; /* chỉ mobile dùng làm dòng đầu của ô ghế */
}
.dvt-pax-header-wrap {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 8px;
}
.dvt-pax-header-wrap h3 {
margin: 0;
}
.dvt-btn-add-more-seats {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #1B448E;
color: #f8fafc;
border-radius: 18px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.dvt-btn-add-more-seats:hover {
background: #f1f5f9;
color: #1B448E;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.dvt-side-action-wrap {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #e2e8f0;
}
.dvt-side-btn-change-seats {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 8px 14px;
background: #f8fafc;
border: 1.5px dashed #cbd5e1;
color: #475569;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
box-sizing: border-box;
}
.dvt-side-btn-change-seats:hover {
background: #f1f5f9;
border-color: #94a3b8;
color: #1e293b;
border-style: solid;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.dvt-modal-btn-add-seats {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #475569;
text-decoration: none;
background: #f1f5f9;
border: 1px solid #e2e8f0;
padding: 4px 10px;
border-radius: 12px;
transition: all 0.2s ease;
}
.dvt-modal-btn-add-seats:hover {
background: #e2e8f0;
color: #1e293b;
}
/* ==========================================================================
KHUYẾN MẠI XA NGÀY & ĐIỀU KIỆN ĐỔI / TRẢ VÉ TÀU ĐSVN
========================================================================== */
.dvt-promo-time-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: #059669; /* text-success */
background: #ecfdf5;
border: 1px solid #a7f3d0;
padding: 3px 8px;
border-radius: 6px;
margin-top: 4px;
line-height: 1.4;
}
.dvt-refund-condition-note {
display: flex;
align-items: flex-start;
gap: 5px;
font-size: 11.5px;
font-weight: 500;
color: #64748b;
line-height: 1.45;
}
.dvt-refund-condition-note i {
color: #94a3b8;
font-size: 12px;
margin-top: 2px;
flex-shrink: 0;
}
.dvt-refund-policy-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
color: var(--c-primary, #ed007f);
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
}
.dvt-refund-policy-link:hover {
color: #c20068;
text-decoration: none;
}
.dvt-cart-item-promo-box {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11px;
}
/* Dòng Khuyến mại xa ngày trên Sidebar Order Summary */
.dvt-side-promo-time-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-size: 13px;
}
.dvt-promo-time-val {
color: #059669;
font-weight: 700;
}
/* POPUP MODAL ĐIỀU KIỆN ĐỔI / TRẢ / HỦY VÉ ĐSVN */
.dvt-refund-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.65);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
backdrop-filter: blur(4px);
box-sizing: border-box;
}
.dvt-refund-modal-dialog {
background: #ffffff;
width: 100%;
max-width: 620px;
max-height: 85vh;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
animation: dvtModalFadeIn 0.2s ease-out;
}
.dvt-refund-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: #fff;
border-bottom: 1px solid #334155;
}
.dvt-refund-modal-title {
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
color: #f8fafc;
}
.dvt-refund-modal-title i {
color: #38bdf8;
font-size: 16px;
}
.dvt-refund-modal-close {
background: transparent;
border: none;
color: #94a3b8;
font-size: 26px;
line-height: 1;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.15s ease;
}
.dvt-refund-modal-close:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
.dvt-refund-modal-body {
padding: 20px 22px;
overflow-y: auto;
flex: 1;
}
.dvt-refund-modal-ticket-info {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: #1e293b;
}
.dvt-refund-condition-banner {
background: #fffbeb;
border: 1px solid #fde68a;
border-left: 4px solid #f59e0b;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 16px;
}
.dvt-refund-condition-banner-title {
font-size: 13px;
font-weight: 700;
color: #92400e;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.dvt-refund-condition-banner-text {
font-size: 12.5px;
color: #78350f;
line-height: 1.5;
}
.dvt-refund-policy-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.dvt-refund-policy-card {
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dvt-refund-policy-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.dvt-refund-fee-badge {
font-size: 12px;
font-weight: 700;
color: #b91c1c;
background: #fee2e2;
padding: 3px 10px;
border-radius: 12px;
}
.dvt-refund-perm-tags {
display: flex;
gap: 6px;
}
.dvt-perm-tag {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
}
.dvt-perm-tag.prohibited {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
}
.dvt-perm-tag.allowed {
background: #ecfdf5;
color: #059669;
border: 1px solid #a7f3d0;
}
.dvt-refund-time-range {
font-size: 12px;
color: #64748b;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 5px;
}
.dvt-refund-desc {
font-size: 12.5px;
color: #334155;
line-height: 1.55;
}
.dvt-refund-modal-foot {
padding: 14px 22px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: flex-end;
}
.dvt-refund-modal-btn-ok {
background: var(--c-primary, #ed007f);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s ease;
}
.dvt-refund-modal-btn-ok:hover {
opacity: 0.9;
}
/* ═══════════════════════════════════════════════════════════════
Chọn / Bỏ chọn Hình thức Khuyến mại Xa Ngày (Chuẩn ĐSVN)
═══════════════════════════════════════════════════════════════ */
.dvt-promo-choice-box {
margin-top: 8px;
padding: 10px 12px;
background: #fdfafb;
border: 1px solid #fce7f3;
border-left: 3px solid var(--c-primary, #ed007f);
border-radius: 8px;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.dvt-promo-choice-box.opted-out {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-left: 3px solid #cbd5e1;
}
.dvt-promo-choice-status {
font-size: 12.5px;
font-weight: 600;
color: #1e293b;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.dvt-promo-choice-status .dvt-promo-title-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
color: #1e293b;
font-weight: 700;
}
.dvt-promo-choice-status .dvt-promo-icon {
color: var(--c-primary, #ed007f);
font-size: 13px;
}
.dvt-promo-choice-status .dvt-promo-name {
color: #0f172a;
font-size: 12.5px;
font-weight: 700;
}
.dvt-promo-badge-pkg {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
padding: 1px 6px;
border-radius: 4px;
margin-left: 4px;
vertical-align: middle;
}
.dvt-promo-badge-discount {
display: inline-flex;
align-items: center;
font-size: 11.5px;
font-weight: 800;
color: var(--c-primary, #ed007f);
background: #fdf2f8;
border: 1px solid #fbcfe8;
padding: 2px 8px;
border-radius: 12px;
letter-spacing: 0.2px;
margin-left: auto;
}
.dvt-promo-choice-status.no-promo {
color: #64748b;
font-size: 12px;
font-weight: 600;
justify-content: flex-start;
}
.dvt-promo-choice-status.no-promo i {
color: #94a3b8;
}
.dvt-promo-choice-box .dvt-refund-condition-note {
display: flex;
align-items: flex-start;
gap: 5px;
font-size: 11.5px;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
padding: 0;
margin: 0;
line-height: 1.45;
}
.dvt-promo-choice-box .dvt-refund-condition-note i {
color: #94a3b8;
font-size: 11.5px;
margin-top: 2px;
flex-shrink: 0;
}
.dvt-promo-links-wrap {
display: flex;
align-items: center;
border-top: 1px dashed #fce7f3;
padding-top: 5px;
margin-top: 2px;
}
.dvt-promo-choice-box.opted-out .dvt-promo-links-wrap {
border-top-color: #f1f5f9;
}
.dvt-refund-policy-link .dvt-arrow-icon {
font-size: 9.5px;
color: var(--c-primary, #ed007f);
transition: transform 0.2s ease;
margin-left: 2px;
}
.dvt-refund-policy-link:hover .dvt-arrow-icon {
transform: translateX(3px);
}
/* Modal Selector Khuyến Mại theo mẫu ĐSVN */
.dvt-refund-promo-selector {
margin-bottom: 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #ffffff;
overflow: hidden;
}
.dvt-refund-promo-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.15s ease;
}
.dvt-refund-promo-option:last-child {
border-bottom: none;
}
.dvt-refund-promo-option:hover {
background: #f8fafc;
}
.dvt-refund-promo-option.selected {
background: #fdf2f8;
border-color: #fbcfe8;
}
.dvt-refund-promo-option input[type="radio"] {
margin-top: 3px;
accent-color: var(--c-primary, #ed007f);
cursor: pointer;
}
.dvt-refund-promo-option-content {
flex: 1;
}
.dvt-refund-promo-option-title {
font-size: 13.5px;
font-weight: 700;
color: #1e293b;
margin-bottom: 3px;
}
.dvt-refund-promo-option-desc {
font-size: 12px;
color: #64748b;
line-height: 1.45;
}
/* ─── Compact Khuyến Mại trên Sidebar (#dvtCartItems & #dvtSidePromoTimeRow) ─── */
.dvt-side-km-badge-wrap {
display: none !important;
}
.dvt-side-km-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 600;
color: #047857;
background: #ecfdf5;
border: 1px solid #a7f3d0;
padding: 2px 7px;
border-radius: 5px;
white-space: nowrap;
}
.dvt-side-km-badge b {
color: #047857;
font-weight: 700;
}
.dvt-side-km-badge.optout {
color: #64748b;
background: #f1f5f9;
border-color: #cbd5e1;
}
.dvt-side-km-btn {
width: 20px;
height: 20px;
min-width: 20px;
border-radius: 4px;
background: #fdf2f8;
border: 1px solid #fbcfe8;
color: var(--c-primary, #ed007f);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 10.5px;
padding: 0;
transition: all 0.15s ease;
flex-shrink: 0;
}
.dvt-side-km-btn:hover {
background: var(--c-primary, #ed007f);
color: #ffffff;
border-color: var(--c-primary, #ed007f);
transform: scale(1.08);
}
.dvt-side-summary-km-btn {
margin-left: 4px;
vertical-align: middle;
}
/* ─── Modal Form Chọn Chương Trình Khuyến Mại (Chuẩn selectKhuyenMaiForm ĐSVN) ─── */
.dvt-refund-modal-dialog.dvt-km-modal-dialog {
max-width: 680px;
width: 100%;
}
.select-khuyen-mai {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
}
.select-khuyen-mai .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.select-khuyen-mai .modal-title {
font-size: 19px;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.select-khuyen-mai .modal-body {
padding: 16px 20px 4px 20px;
max-height: 70vh;
overflow-y: auto;
background: #ffffff;
}
.dvt-km-seat-bar {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 14px;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: #1e293b;
}
.dvt-km-seat-bar b {
color: var(--c-primary, #ed007f);
}
.select-khuyen-mai .panel-group {
margin-bottom: 16px;
}
.select-khuyen-mai .panel {
border-radius: 6px;
margin-bottom: 14px;
overflow: hidden;
background: #ffffff;
border: 1px solid #cbd5e1;
transition: all 0.2s ease;
}
.select-khuyen-mai .panel-info {
border-color: #fbcfe8;
box-shadow: 0 1px 6px rgba(237, 0, 127, 0.12);
}
.select-khuyen-mai .panel-default {
border-color: #e2e8f0;
}
.select-khuyen-mai .panel-heading {
padding: 12px 14px;
background: #f8fafc;
border-bottom: 1px solid transparent;
min-height: 80px;
display: flex;
align-items: center;
}
.select-khuyen-mai .panel-info > .panel-heading {
background-color: #fff1f8;
border-bottom: 1px solid #fbcfe8;
color: #9d174d;
}
.select-khuyen-mai .panel-default > .panel-heading {
background-color: #f8fafc;
border-bottom: 1px solid #e2e8f0;
color: #334155;
}
.select-khuyen-mai .panel-title {
margin: 0;
font-size: 13.5px;
line-height: 1.45;
font-weight: 500;
width: 100%;
}
.select-khuyen-mai .accordion-toggle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
text-decoration: none;
color: inherit;
cursor: pointer;
user-select: none;
width: 100%;
}
.select-khuyen-mai .dvt-km-heading-content {
flex: 1;
min-width: 0;
font-size: 13.5px;
line-height: 1.5;
color: #1e293b;
}
.select-khuyen-mai .panel-info .dvt-km-heading-content {
color: #9d174d;
}
.select-khuyen-mai .dvt-km-title-name {
font-weight: 700;
font-size: 13.5px;
color: var(--c-primary, #ed007f);
margin-right: 4px;
}
.select-khuyen-mai .panel-default .dvt-km-title-name {
color: #475569;
}
.select-khuyen-mai .pull-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.select-khuyen-mai .dvt-km-choice-row {
margin-bottom: 0;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 6px;
border-radius: 4px;
transition: all 0.15s ease;
}
.select-khuyen-mai .dvt-km-choice-row:hover {
background: rgba(237, 0, 127, 0.05);
}
.select-khuyen-mai .dvt-km-check-icon {
font-style: normal;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
}
.select-khuyen-mai .dvt-km-check-text {
font-family: inherit !important;
text-transform: none !important;
font-style: normal !important;
font-variant: normal !important;
font-size: 13px;
font-weight: 500;
color: #334155;
cursor: pointer;
line-height: 1.4;
}
.select-khuyen-mai .panel-info .dvt-km-opt-select .dvt-km-check-text {
color: var(--c-primary, #ed007f);
font-weight: 600;
}
.select-khuyen-mai .text-primary {
color: var(--c-primary, #ed007f) !important;
}
.select-khuyen-mai .text-muted {
color: #94a3b8 !important;
}
@media (max-width: 768px) {
.select-khuyen-mai .panel-heading {
min-height: 100px;
padding: 10px 12px;
}
.select-khuyen-mai .accordion-toggle {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.select-khuyen-mai .pull-right {
width: 100%;
border-top: 1px dashed #e2e8f0;
padding-top: 8px;
}
.select-khuyen-mai .panel-body {
padding: 8px 6px;
}
}
.select-khuyen-mai .panel-collapse {
display: none;
}
.select-khuyen-mai .panel-collapse.in {
display: block;
}
.select-khuyen-mai .panel-body {
padding: 14px 16px;
background: #ffffff;
}
.select-khuyen-mai .table-bordered {
width: 100%;
border-collapse: collapse;
margin-bottom: 14px;
font-size: 12.5px;
background: #ffffff;
}
.select-khuyen-mai .table-bordered th,
.select-khuyen-mai .table-bordered td {
border: 1px solid #e2e8f0;
padding: 8px 10px;
text-align: left;
vertical-align: top;
color: #334155;
line-height: 1.45;
}
.select-khuyen-mai .table-bordered thead th {
background: #f8fafc;
font-weight: 700;
color: #475569;
font-size: 12px;
}
.select-khuyen-mai .col-km-idx {
width: 5%;
}
.select-khuyen-mai .col-km-desc {
width: 45%;
}
.select-khuyen-mai .col-km-adjust {
width: 25%;
}
.select-khuyen-mai .col-km-note {
width: 25%;
}
.select-khuyen-mai .alert-km-empty {
margin: 15px 0;
}
.select-khuyen-mai .list-group {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #fecaca;
border-radius: 6px;
overflow: hidden;
font-size: 12.5px;
}
.select-khuyen-mai .list-group-item {
padding: 8px 12px;
border-bottom: 1px solid #fee2e2;
background: #ffffff;
color: #334155;
line-height: 1.45;
}
.select-khuyen-mai .list-group-item:last-child {
border-bottom: none;
}
.select-khuyen-mai .list-group-item-danger {
background: #fff7ed;
color: #ea580c !important;
font-weight: 700;
border-bottom: 1px solid #ffedd5;
display: flex;
align-items: center;
gap: 6px;
}
.select-khuyen-mai .list-group-item-danger strong {
color: #ea580c !important;
}
.select-khuyen-mai .modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
.select-khuyen-mai .modal-footer .btn {
padding: 9px 20px;
border-radius: 6px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-transform: none !important;
font-style: normal !important;
text-decoration: none !important;
text-shadow: none !important;
white-space: nowrap;
line-height: 1.4;
outline: none !important;
}
/* Nút Đóng (btn-default) */
.select-khuyen-mai .modal-footer .btn-default,
.select-khuyen-mai .modal-footer #dvtKmCancelBtn {
background-color: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #334155 !important;
text-transform: none !important;
opacity: 1 !important;
}
.select-khuyen-mai .modal-footer .btn-default:hover,
.select-khuyen-mai .modal-footer .btn-default:focus,
.select-khuyen-mai .modal-footer .btn-default:active,
.select-khuyen-mai .modal-footer #dvtKmCancelBtn:hover,
.select-khuyen-mai .modal-footer #dvtKmCancelBtn:focus,
.select-khuyen-mai .modal-footer #dvtKmCancelBtn:active {
background-color: #f1f5f9 !important;
border-color: #94a3b8 !important;
color: #0f172a !important;
text-transform: none !important;
opacity: 1 !important;
}
/* Nút Submit (btn-primary - Áp dụng KM / Không sử dụng KM) */
#dvtKmSubmitBtn,
.select-khuyen-mai #dvtKmSubmitBtn,
.select-khuyen-mai .btn-primary,
.select-khuyen-mai .modal-footer .btn-primary,
.select-khuyen-mai .modal-footer #dvtKmSubmitBtn {
background: #ed007f !important;
background: var(--c-primary, #ed007f) !important;
background-color: #ed007f !important;
background-color: var(--c-primary, #ed007f) !important;
border: 1px solid #ed007f !important;
border-color: #ed007f !important;
border-color: var(--c-primary, #ed007f) !important;
color: #ffffff !important;
text-transform: none !important;
opacity: 1 !important;
}
#dvtKmSubmitBtn:hover,
#dvtKmSubmitBtn:focus,
#dvtKmSubmitBtn:active,
.select-khuyen-mai #dvtKmSubmitBtn:hover,
.select-khuyen-mai #dvtKmSubmitBtn:focus,
.select-khuyen-mai #dvtKmSubmitBtn:active,
.select-khuyen-mai .btn-primary:hover,
.select-khuyen-mai .btn-primary:focus,
.select-khuyen-mai .btn-primary:active,
.select-khuyen-mai .modal-footer .btn-primary:hover,
.select-khuyen-mai .modal-footer .btn-primary:focus,
.select-khuyen-mai .modal-footer .btn-primary:active,
.select-khuyen-mai .modal-footer #dvtKmSubmitBtn:hover,
.select-khuyen-mai .modal-footer #dvtKmSubmitBtn:focus,
.select-khuyen-mai .modal-footer #dvtKmSubmitBtn:active {
background: #d80074 !important;
background-color: #d80074 !important;
border: 1px solid #d80074 !important;
border-color: #d80074 !important;
color: #ffffff !important;
text-transform: none !important;
opacity: 1 !important;
box-shadow: 0 4px 12px rgba(237, 0, 127, 0.35) !important;
}
.select-khuyen-mai .et-money {
color: #ea580c !important;
font-weight: 700;
}
/* ─── FULL-SCREEN PROCESSING LOADING OVERLAY (XUẤT VÉ TÀU ĐSVN) ─── */
body.dvt-body-locked {
overflow: hidden !important;
touch-action: none !important;
}
.dvt-processing-overlay {
position: fixed;
inset: 0;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dvt-processing-overlay.dvt-active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.dvt-processing-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dvt-processing-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 420px;
padding: 36px 28px 22px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
background: radial-gradient(120% 60% at 50% 0%, #fff0f7 0%, #ffffff 60%);
border-radius: 24px;
box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
transform: translateY(16px) scale(0.96);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Dải màu thương hiệu trên đỉnh card */
.dvt-processing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-primary, #ed007f), #f43f5e, #fb923c);
}
.dvt-processing-overlay.dvt-active .dvt-processing-card {
transform: none;
}
/* Animation đầu tàu chạy trên đường ray */
.dvt-processing-animation-wrap {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.dvt-processing-train-icon {
position: relative;
width: 76px;
height: 76px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary, #ed007f) 0%, #f43f5e 100%);
color: #ffffff;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(237, 0, 127, 0.35);
}
/* Vòng sóng lan toả quanh icon */
.dvt-processing-train-icon::before,
.dvt-processing-train-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(237, 0, 127, 0.35);
animation: dvtRipple 2s cubic-bezier(0, 0.4, 0.6, 1) infinite;
}
.dvt-processing-train-icon::after {
animation-delay: 1s;
}
/* Rung nhẹ như tàu đang chạy */
.dvt-processing-train-icon i {
animation: dvtTrainRumble 0.5s ease-in-out infinite alternate;
}
@keyframes dvtRipple {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
@keyframes dvtTrainRumble {
0% { transform: translateY(0); }
100% { transform: translateY(-2px); }
}
/* Đường ray: 2 thanh ray + tà vẹt trượt sang trái */
.dvt-processing-track {
position: relative;
width: 160px;
height: 12px;
margin-top: 14px;
overflow: hidden;
border-top: 2px solid #cbd5e1;
border-bottom: 2px solid #cbd5e1;
box-sizing: border-box;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.dvt-track-tie {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 5px;
background: #94a3b8;
border-radius: 1px;
animation: dvtTieSlide 1.5s linear infinite;
}
.dvt-track-tie:nth-child(2) { animation-delay: -0.3s; }
.dvt-track-tie:nth-child(3) { animation-delay: -0.6s; }
.dvt-track-tie:nth-child(4) { animation-delay: -0.9s; }
.dvt-track-tie:nth-child(5) { animation-delay: -1.2s; }
@keyframes dvtTieSlide {
0% { left: 100%; }
100% { left: -5px; }
}
/* Tiêu đề & Mô tả */
.dvt-processing-title {
font-size: 20px;
font-weight: 800;
color: #0f172a;
margin: 0 0 6px;
line-height: 1.35;
}
.dvt-processing-desc {
font-size: 14px;
color: #64748b;
line-height: 1.55;
margin: 0 0 20px;
}
/* Thanh tiến độ không xác định */
.dvt-processing-progress-track {
position: relative;
height: 6px;
width: 100%;
background: #fce7f3;
border-radius: 999px;
overflow: hidden;
margin-bottom: 20px;
}
.dvt-processing-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: linear-gradient(90deg, var(--c-primary, #ed007f), #f43f5e, #fb923c);
border-radius: 999px;
animation: dvtProgressSlide 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes dvtProgressSlide {
0% { transform: translateX(-100%); }
100% { transform: translateX(250%); }
}
/* Hộp cảnh báo không rời trang */
.dvt-processing-warning-box {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 18px;
padding: 12px 14px;
text-align: left;
background: #fffbeb;
border: 1px solid #fde68a;
border-left: 4px solid #f59e0b;
border-radius: 12px;
box-sizing: border-box;
}
.dvt-processing-warning-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: #fef3c7;
color: #d97706;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.dvt-processing-warning-text {
flex: 1;
min-width: 0;
}
.dvt-processing-warning-heading {
color: #92400e;
font-size: 12.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 2px;
}
.dvt-processing-warning-msg {
color: #78350f;
font-size: 13px;
line-height: 1.5;
}
.dvt-processing-warning-msg strong {
color: #b45309;
}
/* Footer bảo mật */
.dvt-processing-footer-info {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding-top: 14px;
border-top: 1px dashed #e2e8f0;
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.dvt-processing-footer-info i {
font-size: 13px;
color: #10b981;
}
@media (max-width: 576px) {
.dvt-processing-card {
padding: 28px 18px 18px;
border-radius: 20px;
}
.dvt-processing-train-icon {
width: 64px;
height: 64px;
font-size: 27px;
}
.dvt-processing-title {
font-size: 17px;
}
.dvt-processing-desc {
font-size: 13px;
margin-bottom: 16px;
}
.dvt-processing-progress-track {
margin-bottom: 16px;
}
.dvt-processing-warning-box {
padding: 10px 12px;
gap: 10px;
margin-bottom: 14px;
}
.dvt-processing-warning-heading {
font-size: 11.5px;
}
.dvt-processing-warning-msg {
font-size: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.dvt-processing-train-icon::before,
.dvt-processing-train-icon::after,
.dvt-processing-train-icon i,
.dvt-track-tie {
animation: none;
}
.dvt-processing-progress-bar {
animation-duration: 3s;
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE: thanh tổng tiền + "Xác nhận" dính đáy (cùng mẫu .fb-mob-foot vé máy bay);
bấm vùng tổng tiền → sidebar "Tóm tắt chuyến đi" thành màn chi tiết full màn trượt từ phải.
Nút Zalo/chat tự nâng lên trên thanh nhờ --dlv-fab-lift (chat-widget-subiz.js).
═══════════════════════════════════════════════════════════════ */
.dvt-mob-foot,
.dvt-sum-x {
display: none;
}
@media (max-width: 767px) {
body {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.dvt-mob-foot {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
align-items: center;
gap: 12px;
padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
background: #fff;
box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
.dvt-mob-foot-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
border: 0;
background: transparent;
text-align: left;
font-family: inherit;
cursor: pointer;
}
.dvt-mob-foot-lbl {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #666;
}
.dvt-mob-foot-more {
color: #2D65B8;
font-weight: 700;
}
.dvt-mob-foot-more i {
font-size: 10px;
}
.dvt-mob-foot-total {
font-size: 19px;
font-weight: 800;
line-height: 1.2;
color: var(--c-primary, #ed007f);
}
.dvt-mob-pay {
flex: 0 0 auto;
padding: 13px 26px;
background: var(--c-primary, #ed007f);
color: #fff;
border: 0;
border-radius: 10px;
font-family: inherit;
font-size: 16px;
font-weight: 800;
cursor: pointer;
}
/* Sidebar → màn chi tiết full màn; visibility để lúc đóng không tab/đọc được nội dung ngoài màn */
.fb-aside {
position: fixed;
inset: 0;
height: 100dvh;
margin: 0;
z-index: 10060; /* trên thanh đáy + đồng hồ giữ chỗ, dưới các modal xác nhận/voucher (≥ 10500 đã tính ở trên) */
background: #fff;
overflow-y: auto;
transform: translateX(100%);
visibility: hidden;
transition: transform .28s ease, visibility .28s;
}
body.dvt-sum-open {
overflow: hidden;
}
body.dvt-sum-open .fb-aside {
transform: none;
visibility: visible;
}
.fb-aside .fb-summary {
min-height: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible; /* overflow:hidden gốc sẽ chặn sticky của header */
}
.fb-aside .fb-summary-head {
position: sticky;
top: 0;
z-index: 2;
}
.dvt-sum-x {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
/* Nút Xác nhận gốc chỉ ẩn khỏi mắt — thanh đáy gọi .click() lên nó */
.fb-aside .fb-summary-submit-wrap {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.fb-aside {
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE (≤767px): gọn bố cục form — tiêu đề không gãy giữa chừng, nút không rơi xuống dòng lẻ,
placeholder không bị cắt chữ, chữ trong