:root {
    --tr-primary: var(--c-primary, #ed007f);
    --tr-primary-hover: #c9006b;
    --tr-primary-light: #fdf2f7;
    --tr-text-dark: #1f2937;
    --tr-text-muted: #6b7280;
    --tr-border: #e5e7eb;
    --tr-bg-light: #f9fafb;
    --tr-white: #ffffff;
    --tr-seat-avail: #ffffff;
    --tr-seat-avail-border: #9ca3af;
    --tr-seat-selected: #ed007f;
    --tr-seat-booked: #e5e7eb;
    --tr-seat-booked-text: #9ca3af;
    --tr-radius-sm: 6px;
    --tr-radius-md: 10px;
    --tr-radius-lg: 16px;
    --tr-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --tr-shadow-md: 0 4px 14px rgba(0,0,0,0.08);
}

.td-page {
    font-family: inherit;
    background-color: #f3f4f6;
    color: var(--tr-text-dark);
    min-height: 100vh;
    padding-bottom: 120px;
}

/* ─── 1. Header Bar Summary ────────────────────────── */
.td-header-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--tr-border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.td-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.td-btn-back {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid var(--tr-border);
    padding: 8px 14px;
    border-radius: var(--tr-radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.td-back-txt-short {
    display: none;
}
.td-btn-back:hover {
    background: var(--tr-primary);
    border-color: var(--tr-primary);
    color: #ffffff;
}

.td-trip-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.td-badge-train {
    background: #1B448E;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--tr-radius-sm);
    letter-spacing: 0.5px;
}
.td-trip-route {
    font-size: 16px;
    color: var(--tr-text-dark);
}
.td-trip-date {
    font-size: 12px;
    color: var(--tr-text-muted);
}
.td-route-arrow {
    color: var(--tr-primary, #ed007f);
    margin: 0 6px;
}
.td-pnr-code {
    color: var(--tr-primary, #ed007f);
    font-weight: 700;
    font-size: 11.5px;
    background: #fff0f6;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fbcfe8;
}
.td-guide-box {
    font-size: 13px;
    color: #4b5563;
    background: var(--tr-primary-light);
    border: 1px solid rgba(237,0,127,0.2);
    padding: 6px 12px;
    border-radius: var(--tr-radius-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── 2. Main Container ────────────────────────────── */
.td-container {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 15px;
}
.td-booking-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.td-section-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--tr-border);
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
    padding: 20px;
    transition: box-shadow 0.2s ease;
}
.td-card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.td-title-sub {
    font-size: 13px;
    color: var(--tr-text-muted);
    font-weight: 400;
}
.step-badge {
    background: linear-gradient(135deg, var(--tr-primary, #ed007f) 0%, #c9006b 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(237, 0, 127, 0.25);
    text-transform: uppercase;
}

/* ─── Thanh Đoàn Tàu Nhiều Toa (Scrollable Train Track) ─── */
.td-carriages-scroll {
    --td-wheel: radial-gradient(circle, #1e293b 0 2px, #64748b 2.5px 4px, #334155 4.5px 5px, transparent 5.5px);
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    padding: 18px 18px 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
}
.td-carriages-scroll::-webkit-scrollbar {
    height: 6px;
}
.td-carriages-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.td-carriages-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.td-carriages-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--tr-primary, #ed007f);
}
.td-train-engine {
    flex: 0 0 auto;
    position: relative;
    background:
        linear-gradient(180deg, transparent 64%, #fbbf24 64% 69%, transparent 69%),
        linear-gradient(160deg, #2563eb 0%, #1B448E 50%, #0f2550 100%);
    color: #ffffff;
    border-radius: 48px 12px 12px 16px / 40px 12px 12px 16px;
    padding: 12px 18px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    box-shadow: 0 8px 18px -6px rgba(27, 68, 142, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.td-train-engine i {
    font-size: 20px;
    color: #fbbf24;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.td-carriage-tab {
    flex: 0 0 auto;
    min-width: 140px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    user-select: none;
    position: relative;
}
.td-carriage-tab.active {
    background: linear-gradient(180deg, #ffffff 0%, #fff0f7 100%);
    border-color: var(--tr-primary, #ed007f);
    color: var(--tr-primary, #ed007f);
}

/* Desktop: mui toa, bánh xe, khớp nối — mobile (≤768px) có layout dọc riêng */
@media (min-width: 769px) {
    /* Ray tàu (thanh ray + tà vẹt) cuộn theo nội dung nhờ background-attachment: local */
    .td-carriages-scroll {
        background:
            linear-gradient(#94a3b8, #94a3b8) left bottom 14px / 100% 3px no-repeat local,
            repeating-linear-gradient(90deg, #d6dde7 0 6px, transparent 6px 18px) left bottom 9px / 100% 12px no-repeat local,
            linear-gradient(180deg, #eef4ff 0%, #f8fafc 70%) local;
    }
    .td-carriage-tab {
        box-shadow: inset 0 5px 0 #cbd5e1, 0 4px 10px -4px rgba(15, 23, 42, 0.12);
    }
    .td-carriage-tab:hover {
        border-color: #f9a8d4;
        box-shadow: inset 0 5px 0 #f9a8d4, 0 10px 20px -8px rgba(237, 0, 127, 0.25);
    }
    .td-carriage-tab.active {
        box-shadow: inset 0 5px 0 var(--tr-primary, #ed007f), 0 0 0 4px rgba(237, 0, 127, 0.12), 0 12px 24px -10px rgba(237, 0, 127, 0.45);
    }
    /* Bánh xe: 2 cặp bogie đặt trên ray */
    .td-train-engine::after,
    .td-carriage-tab::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -13px;
        height: 11px;
        background:
            var(--td-wheel) 0 0 / 11px 11px no-repeat,
            var(--td-wheel) 13px 0 / 11px 11px no-repeat,
            var(--td-wheel) right 13px top 0 / 11px 11px no-repeat,
            var(--td-wheel) right 0 top 0 / 11px 11px no-repeat;
        pointer-events: none;
    }
    /* Khớp nối với toa / đầu máy phía trước */
    .td-carriage-tab::before {
        content: '';
        position: absolute;
        left: -17px;
        bottom: 12px;
        width: 18px;
        height: 4px;
        background: #94a3b8;
        border-radius: 2px;
        box-shadow: 0 0 0 1.5px #e2e8f0;
    }
}
.td-carriage-num {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}
.td-carriage-tab.active .td-carriage-num {
    color: var(--tr-primary, #ed007f);
}
.td-carriage-type {
    font-size: 11px;
    color: #64748b;
    margin: 2px 0 4px;
    font-weight: 500;
}
.td-carriage-tab.active .td-carriage-type {
    color: #881337;
}
.td-carriage-type-short {
    display: none;
}
/* Toa công ty hợp tác ĐSVN (Sông Lam, VicSapaTrain...): tên + logo công ty */
.td-carriage-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #1b448e;
    line-height: 1.2;
    max-width: 100%;
}
.td-carriage-partner-logo {
    height: 16px;
    width: auto;
    max-width: 48px;
    object-fit: contain;
    flex-shrink: 0;
}
.td-carriage-partner-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-carriage-empty-alert {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #e11d48;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 10px 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.td-carriage-empty-alert i {
    font-size: 16px;
    flex-shrink: 0;
}

/* ─── Seat Legend & Price Badges (1 Hàng Ngang) ─── */
.td-seat-legend {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    background: #ffffff;
    padding: 10px 16px 12px;
    border-radius: var(--tr-radius-sm);
    border: 1px solid var(--tr-border);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #e2e8f0;
}
.td-seat-legend::-webkit-scrollbar {
    height: 6px;
}
.td-seat-legend::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 4px;
}
.td-seat-legend::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.td-seat-legend::-webkit-scrollbar-thumb:hover {
    background: var(--tr-primary, #ed007f);
}
.td-legend-group {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.td-legend-sep {
    width: 1px;
    height: 18px;
    background: #cbd5e1;
    flex-shrink: 0;
    margin: 0 4px;
}
.td-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tr-text-dark);
}
.td-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.td-legend-box.avail {
    background: #ffffff;
    border: 1px solid var(--tr-seat-avail-border);
}
.td-legend-box.selected {
    background: var(--tr-seat-selected);
}
.td-legend-box.booked {
    background: var(--tr-seat-booked);
    border: 1px solid #d1d5db;
}
.td-legend-box.held {
    background: #fef3c7;
    border: 1px solid #f59e0b;
}
.td-legend-box.locked {
    background: #fee2e2;
    border: 1px solid #ef4444;
}
.td-legend-box.longer-route {
    background: #dcfce7;
    border: 1px solid #16a34a;
}

.td-price-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.td-price-legend-title {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.td-pl-item {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.06);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.td-pl-item.badge-t1 {
    background: #dbeafe;
    color: #1e40af;
}
.td-pl-item.badge-t2 {
    background: #fef3c7;
    color: #92400e;
}
.td-pl-item.badge-t3 {
    background: #f3e8ff;
    color: #6b21a8;
}
.td-pl-item.badge-nml {
    background: #f1f5f9;
    color: #334155;
}
.td-pl-item.badge-gp {
    background: #fce7f3;
    color: #9d174d;
}
.td-seat-avail-count {
    color: #10b981;
    font-weight: 600;
    margin-left: 2px;
}

/* ─── Layout Của Từng Toa Xe ──────────────────────── */
.td-carriage-layout {
    background: #f8fafc;
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius-md);
    padding: 20px;
    overflow-x: auto;
    position: relative;
}
/* Cơ chế đồng bộ ngầm không khóa giao diện (Non-blocking background sync như dsvn.vn / vnticketonline) */
.td-carriage-layout.td-carriage-loading .td-floor-wrapper,
.td-carriage-layout.td-carriage-loading .td-coach-body {
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
}
.td-carriage-loading-overlay {
    display: none !important;
    pointer-events: none !important;
}
/* Đang chờ /carriage-seats từ ĐSVN: phủ mờ + chặn click ghế cho đến khi có seatId/ticketId thật
   (JS: setCarriageLoading trong train-detail.js). Áp cho toa ngồi/giường desktop, giường mobile, toa 2 tầng. */
.td-coach-body.td-seat-loading,
.td-mobile-cabins-list.td-seat-loading,
.td-2floor-plan-body.td-seat-loading {
    position: relative;
}
.td-seat-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.7);
    border-radius: inherit;
    cursor: progress;
}
.td-seat-loading::before {
    content: "Đang tải sơ đồ chỗ từ ĐSVN...";
    position: absolute;
    top: 50%;
    /* Toa ngồi rộng 950px cuộn ngang trên mobile: giữ nhãn trong khung nhìn thay vì giữa toa */
    left: min(50%, calc(50vw - 24px));
    z-index: 21;
    transform: translate(-50%, -50%);
    padding: 10px 16px 10px 40px;
    border-radius: 999px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='%23fbcfe8' stroke-width='3'/><path d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23ed007f' stroke-width='3' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/></path></svg>") no-repeat 14px center / 18px 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    color: var(--tr-primary, #ed007f);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
.td-layout-head {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--tr-primary);
    border-radius: var(--tr-radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.td-layout-head i {
    color: var(--tr-primary);
    font-size: 15px;
    background: #fff0f7;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.td-lh-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.td-lh-title {
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}
.td-lh-desc {
    color: var(--tr-text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
/* Toa công ty hợp tác: công ty khai thác + đối tượng được bán, ngay dưới tiêu đề sơ đồ toa */
.td-partner-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: -8px 0 16px;
    padding: 8px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--tr-radius-sm);
    font-size: 13px;
    color: #1e3a8a;
}
.td-partner-note .td-carriage-partner-logo {
    height: 22px;
    max-width: 72px;
}
.td-partner-note-pax {
    font-weight: 700;
    color: #b45309;
}
/* Nút xem ảnh toa (carriages[].images): ảnh đầu + số ảnh ở cuối thanh tiêu đề sơ đồ toa, bấm mở slide fslightbox */
.td-carriage-photos-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 12px 4px 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #1B448E;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.td-carriage-photos-btn:hover,
.td-carriage-photos-btn:focus-visible {
    border-color: var(--tr-primary);
    color: var(--tr-primary);
    box-shadow: 0 2px 8px rgba(237, 0, 127, 0.12);
}
.td-carriage-photos-btn img {
    display: block;
    width: 44px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
}
/* .td-layout-head i đang vẽ icon tiêu đề thành ô vuông 28px: trả icon trong nút về cỡ chữ */
.td-carriage-photos-btn i {
    width: auto;
    height: auto;
    background: none;
    font-size: 12.5px;
    color: inherit;
}

/* ─── Khung Thân Toa Tàu ĐSVN (Coach Body & Blueprint Layout) ─── */
.td-coach-container {
    background: #ffffff;
    border: 2px solid #94a3b8;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    overflow-x: auto;
}
.td-coach-inner-scroll {
    width: max-content;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.td-coach-body {
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-width: 950px;
    width: 100%;
    position: relative;
    padding-bottom: 6px;
    box-sizing: border-box;
}

/* Hai đầu toa (Đầu vào - WC - Nước sôi - Đầu ra) */
.td-coach-end {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 10px 8px;
    width: 68px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.td-coach-front {
    border-left: 4px solid #1B448E;
}
.td-coach-rear {
    border-right: 4px solid #1B448E;
}
.td-coach-door, .td-coach-facility {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: #1B448E;
    text-align: center;
}
.td-coach-door i, .td-coach-facility i {
    font-size: 16px;
    color: #1B448E;
}

.td-carriage-layout,
.td-coach-container,
.td-coach-seating-grid {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #e2e8f0;
}
.td-carriage-layout::-webkit-scrollbar,
.td-coach-container::-webkit-scrollbar,
.td-coach-seating-grid::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.td-carriage-layout::-webkit-scrollbar-track,
.td-coach-container::-webkit-scrollbar-track,
.td-coach-seating-grid::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 4px;
}
.td-carriage-layout::-webkit-scrollbar-thumb,
.td-coach-container::-webkit-scrollbar-thumb,
.td-coach-seating-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.td-carriage-layout::-webkit-scrollbar-thumb:hover,
.td-coach-container::-webkit-scrollbar-thumb:hover,
.td-coach-seating-grid::-webkit-scrollbar-thumb:hover {
    background: var(--tr-primary, #ed007f);
}

/* Thân Toa Ghế Ngồi Mềm (16 Hàng dọc liên tiếp, lối đi ở giữa) */
.td-coach-seating-grid {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    padding: 4px 0 10px;
    box-sizing: border-box;
}
.td-coach-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    flex: 0 0 56px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    box-sizing: border-box;
}
.td-coach-row .td-seat-item {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
}
.td-coach-row-header {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    padding-bottom: 4px;
    border-bottom: 1.5px dashed #cbd5e1;
}
.td-coach-aisle-node {
    height: 14px;
    background: repeating-linear-gradient(90deg, #e2e8f0, #e2e8f0 4px, transparent 4px, transparent 8px);
    border-radius: 2px;
    margin: 2px 0;
}
.td-seat-placeholder {
    min-height: 52px;
    height: auto;
    visibility: hidden;
    pointer-events: none;
}

/* Toa ngồi (desktop): cả thân toa cùng 2 đầu toa cuộn chung trong .td-coach-container như toa 2 tầng.
   Khối ghế không tự cuộn / không đệm trên-dưới nữa, nên đáy ghế thẳng hàng đáy cột Cửa vào / Cửa ra. */
@media (min-width: 769px) {
    .td-coach-floor-container > .td-coach-body {
        width: max-content;
        min-width: 100%;
    }
    .td-coach-floor-container .td-coach-seating-grid {
        overflow-x: visible;
        padding: 0;
    }
}

/* ─── Toa đặc biệt vẽ theo layoutId ĐSVN (train_detail.php: dlv_train_layout_columns) ───
   Khung riêng .td-lc-* (không dùng class toa ngồi mềm) để rule mobile xoay toa thành dọc không áp vào:
   mọi màn hình giữ bố cục ngang như ĐSVN, màn hẹp cuộn ngang (như toa 2 tầng).
   Style chung với toa 2 tầng / đầu toa: nền #f1f5f9, viền #cbd5e1, nhãn hồng in hoa, icon xanh #1B448E */
.td-carriage-layout[hidden] {
    display: none;
}
.td-lc-container {
    background: #ffffff;
    border: 2px solid #94a3b8;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #e2e8f0;
}
.td-lc-body {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    min-width: 100%;
    position: relative;
    box-sizing: border-box;
}
.td-lc-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 68px;
    flex-shrink: 0;
    padding: 10px 8px;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
}
.td-lc-front {
    border-left: 4px solid #1B448E;
}
.td-lc-rear {
    border-right: 4px solid #1B448E;
}
.td-lc-door {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: #1B448E;
    text-align: center;
}
.td-lc-door i {
    font-size: 16px;
}
.td-lc-grid {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1;
}
/* Cột dọc thân toa: mọi ô cao cố định để hàng ghế, lối đi, bàn thẳng hàng giữa các cột; ô gộp = 2 ô + khoảng cách 6px */
.td-lc-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 56px;
    width: 56px;
}
.td-lc-col-wall {
    flex-basis: 16px;
    width: 16px;
}
/* Lối đi ngang giữa 2 khối ghế (cột toàn lối đi): dải nét đứt dọc */
.td-lc-col-aisle {
    flex-basis: 28px;
    width: 28px;
    background: repeating-linear-gradient(180deg, #cbd5e1 0 4px, transparent 4px 8px) center / 8px 100% no-repeat;
}
.td-lc-col > .td-seat-item,
.td-lc-col > .td-seat-placeholder,
.td-lc-col > .td-coach-cell-table,
.td-lc-col > .td-coach-cell-bar,
.td-lc-col > .td-coach-cell-wall {
    height: 56px;
    min-height: 56px;
}
.td-lc-col > .td-seat-item {
    width: 100%;
    padding: 6px 2px;
}
.td-lc-col > .td-coach-cell-span {
    height: 118px;
    min-height: 118px;
}
/* Ghế có trong mẫu nhưng toa thật không có (train-detail.js): để trống, vẫn giữ ô cho lưới thẳng hàng */
.td-lc-col > .td-seat-item.td-seat-absent {
    visibility: hidden;
}
/* Lối đi dọc thân toa: dải nét đứt ngang (ô cao cố định nên các cột thẳng hàng, vạch nối thành 1 đường) */
.td-lc-col > .td-coach-aisle-node {
    height: 28px;
    margin: 0;
    background: repeating-linear-gradient(90deg, #cbd5e1 0 4px, transparent 4px 8px) center / 100% 8px no-repeat;
}
/* Chỗ mở của vách ngăn không vẽ vạch lối đi (2 class để thắng rule vạch lối đi của mobile nằm sau) */
.td-lc-col.td-lc-col-wall > .td-coach-aisle-node {
    background: none;
}
.td-lc-col > .td-coach-aisle-wide {
    height: 62px;
}

/* Sảnh chờ: khung nét đứt như đầu toa, ghế + bàn tròn cùng tông ghế ngồi */
.td-coach-zone {
    flex: 0 1 45%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
}
.td-zone-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.td-zone-chair {
    width: 34px;
    height: 28px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-top: 4px solid #94a3b8;
    border-radius: 6px;
    box-sizing: border-box;
}
.td-zone-row-bottom .td-zone-chair {
    border-top-width: 1.5px;
    border-top-color: #cbd5e1;
    border-bottom: 4px solid #94a3b8;
}
.td-zone-table {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    box-sizing: border-box;
}
.td-zone-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--tr-primary, #ed007f);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Bàn: thanh bàn như toa 2 tầng; bàn chung cho 2 dãy ghế (.td-coach-cell-span) cao hơn */
.td-coach-cell-table {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-coach-cell-table::before {
    content: '';
    width: 44px;
    height: 14px;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.td-coach-cell-table.td-coach-cell-span::before {
    height: 40px;
}

/* Quầy bar: như ô tiện ích ở đầu toa */
.td-coach-cell-bar {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    color: #1B448E;
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}
.td-coach-cell-bar i {
    font-size: 16px;
    color: #1B448E;
}

/* Vách ngăn giữa sảnh chờ và khoang ghế (chừa trống ở lối đi) */
.td-coach-cell-wall {
    width: 8px;
    margin: 0 auto;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ─── Toa 2 Tầng Đặc Biệt (Double Deck Car Tabs & Panes) ─── */
.td-floor-tabs-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #cbd5e1;
}
.td-floor-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}
.td-floor-tab-btn:hover {
    border-color: var(--c-primary, #ed007f);
    color: var(--c-primary, #ed007f);
    background: #ffffff;
}
.td-floor-tab-btn.active {
    background: var(--c-primary, #ed007f);
    border-color: var(--c-primary, #ed007f);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(237, 0, 127, 0.28);
}
.td-floor-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}
.td-floor-tab-btn.active .td-floor-badge {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* ─── Phân Tách Tầng Toa Giường Nằm (Multi-Floor Sleeper Layout) ─── */
.td-floor-wrapper {
    margin-bottom: 22px;
}
.td-floor-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
    border: 1px solid #cbd5e1;
    border-bottom: none;
}
.td-coach-sleeper-floor {
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-width: 950px;
}
.td-cabins-floor-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1;
}
/* ─── Chia Khoang Trực Quan Trên Desktop (.td-coach-cabin-mode) ─── */
.td-cabin-full-block {
    flex: 1;
    min-width: 140px;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}
.td-cabin-full-block:hover {
    border-color: var(--tr-primary);
    box-shadow: 0 4px 12px rgba(237, 0, 127, 0.12);
}
.td-cabin-header {
    background: #e2e8f0;
    color: #1e293b;
    font-size: 11.5px;
    font-weight: 800;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.td-cabin-interior-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
}
.td-cabin-bed-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.td-cabin-center-aisle {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.td-cabin-table-box {
    background: #e2e8f0;
    color: #64748b;
    border-radius: 4px;
    width: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Ô Ghế / Giường Tương Tác */
.td-seat-item {
    min-height: 52px;
    height: auto;
    background: #ffffff;
    border: 1.5px solid var(--tr-seat-avail-border);
    border-radius: var(--tr-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--tr-text-dark);
    transition: all 0.2s ease;
    user-select: none;
    padding: 6px 2px;
    box-sizing: border-box;
    text-align: center;
}

/* Kiểu Dáng Giường Nằm Trong Khoang (Desktop Cabin Mode) */
.td-coach-cabin-mode .td-seat-item.td-bed-item,
.td-coach-cabin-mode .td-bed-item {
    min-width: 50px;
    min-height: 54px !important;
    height: 54px !important;
    padding: 4px 2px;
    border-radius: 8px;
    gap: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.td-bed-item .td-st-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
}
.td-bed-item .td-st-num i {
    font-size: 14px;
}
.td-bed-item .td-st-layer {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Dải hành lang toa giường nằm với Cửa vào / Thang ở đầu và Cửa ra / Thang ở cuối */
.td-corridor-row {
    margin-top: 10px;
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 950px;
    box-sizing: border-box;
}
.td-corridor-node {
    width: 68px;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: #475569;
    text-align: center;
    box-sizing: border-box;
}
.td-corridor-door-start {
    border-left: 4px solid #64748b;
}
.td-corridor-door-end {
    border-right: 4px solid #64748b;
}
.td-corridor-node i {
    font-size: 15px;
    color: #64748b;
}
.td-sleeper-corridor {
    flex: 1;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-sizing: border-box;
}
.td-sleeper-corridor i {
    color: #64748b;
}

/* Ẩn giao diện mobile của khoang giường nằm trên desktop */
.td-mobile-sleeper-section {
    display: none;
}
.td-st-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.td-st-num i {
    font-size: 10px;
    opacity: 0.85;
}
.td-seat-item:hover {
    border-color: var(--tr-primary);
    color: var(--tr-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.td-seat-item:active {
    transform: scale(0.94);
}
.td-seat-item.selected {
    background: var(--tr-seat-selected, #ed007f) !important;
    border-color: var(--tr-seat-selected, #ed007f) !important;
    color: #ffffff !important;
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(237, 0, 127, 0.3);
    z-index: 2;
}
.td-seat-item.selected .td-st-layer {
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
}
.td-seat-item.booked,
.td-seat-item.booked.layer-t1,
.td-seat-item.booked.layer-t2,
.td-seat-item.booked.layer-t3,
.td-seat-item.td-bed-item.booked,
.td-seat-item.td-m-bed-box.booked {
    background: var(--tr-seat-booked, #e2e8f0) !important;
    border-color: #cbd5e1 !important;
    color: var(--tr-seat-booked-text, #64748b) !important;
    cursor: not-allowed;
    opacity: 0.75;
}
.td-seat-item.booked .td-st-layer {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #475569 !important;
}
.td-seat-item.held,
.td-seat-item.held.layer-t1,
.td-seat-item.held.layer-t2,
.td-seat-item.held.layer-t3,
.td-seat-item.td-bed-item.held,
.td-seat-item.td-m-bed-box.held {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
    cursor: not-allowed;
    opacity: 0.85;
}
.td-seat-item.held .td-st-layer {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #92400e !important;
}
.td-seat-item.locked,
.td-seat-item.locked.layer-t1,
.td-seat-item.locked.layer-t2,
.td-seat-item.locked.layer-t3,
.td-seat-item.td-bed-item.locked,
.td-seat-item.td-m-bed-box.locked {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
    cursor: not-allowed;
    opacity: 0.85;
}
.td-seat-item.locked .td-st-layer {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #991b1b !important;
}
/* Ghế chặng dài còn bán (có phụ thu): JS chỉ gắn class khi ghế trống; .selected dùng !important nên vẫn hiện màu đang chọn */
.td-seat-item.td-longer-route {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
}
.td-seat-item.td-longer-route .td-st-layer {
    background: rgba(22, 163, 74, 0.15);
    color: #166534;
}

/* Tooltip ghế khi hover (train-detail.js đặt vị trí qua --tip-left/--tip-top/--tip-arrow) */
.td-seat-tip {
    position: fixed;
    left: var(--tip-left, 0);
    top: var(--tip-top, 0);
    z-index: var(--z-tooltip, 1070);
    min-width: 180px;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
    font-size: 14px;
    pointer-events: none;
}
.td-seat-tip[hidden] {
    display: none;
}
.td-seat-tip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow, 50%);
    top: 100%;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    transform: translate(-50%, -5px) rotate(45deg);
}
.td-seat-tip.is-below::after {
    top: auto;
    bottom: 100%;
    transform: translate(-50%, 5px) rotate(-135deg);
}
.td-seat-tip-head {
    padding: 8px 14px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 6px 6px 0 0;
    color: #334155;
}
.td-seat-tip-head:last-child {
    border-bottom: 0;
    border-radius: 6px;
}
.td-seat-tip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}
/* Nhãn xám nhạt, số tiền đậm theo màu quy ước bảng giá: giá vé xanh đậm, phụ thu cam "+", số khách trả hồng */
.td-seat-tip-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.td-seat-tip-lbl {
    color: #64748b;
    font-weight: 500;
}
/* Nhãn giá giữ 1 dòng ("Phụ thu chặng dài:" không rớt hàng); dòng lý do khóa ghế (is-note) vẫn được xuống dòng */
.td-seat-tip-line:not(.is-note) .td-seat-tip-lbl {
    white-space: nowrap;
}
.td-seat-tip-val {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.td-seat-tip-line.is-base .td-seat-tip-val {
    color: #1e3a5f;
}
.td-seat-tip-line.is-plus .td-seat-tip-val {
    color: #ea580c;
}
.td-seat-tip-line.is-total .td-seat-tip-val {
    color: var(--tr-primary, #ed007f);
    font-size: 15px;
}
.td-seat-tip-line.is-base + .td-seat-tip-line.is-plus + .td-seat-tip-line.is-total {
    padding-top: 8px;
    border-top: 1px dashed #cbd5e1;
}
.td-seat-tip-line.is-note .td-seat-tip-lbl {
    color: #334155;
    font-weight: 600;
}

.td-st-layer {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 3px;
    white-space: nowrap;
}
.badge-t1 {
    background: #dbeafe;
    color: #1e40af;
}
.badge-t2 {
    background: #fef3c7;
    color: #92400e;
}
.badge-t3 {
    background: #f3e8ff;
    color: #6b21a8;
}
.badge-nml {
    background: #f1f5f9;
    color: #334155;
}

/* ─── 3. Sticky Bottom Cart Bar (thẻ nổi bo góc, kính mờ) ───────────────────── */
.td-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 16px 14px;
    pointer-events: none;
    animation: tdCartIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tdCartIn {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.td-cart-inner {
    pointer-events: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 12px 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    box-shadow: 0 14px 34px -10px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.td-cart-seats {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.td-cart-seats-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    text-wrap: nowrap;
}
.td-cart-seats-title i {
    color: var(--tr-primary);
    margin-right: 2px;
}
/* Chỉ hiện 2 chip đầu, phần còn lại xem trong modal qua nút "Xem chi tiết" (nhấn cả vùng cũng mở) */
.td-cart-seats {
    cursor: pointer;
}
.td-cart-tags {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 32px;
    overflow: hidden;
    padding: 2px;
}
.td-cart-tags > .td-cart-tag:nth-child(n+3) {
    display: none;
}
/* 2 chip luôn cùng 1 hàng: không xuống dòng, nhãn dài tự co lại "Toa 3 · Tầng…" (đủ tên ở title) */
.td-cart-tags {
    flex-wrap: nowrap;
}
.td-cart-tags > .td-cart-tag {
    flex: 0 1 auto;
    min-width: 0;
}
.td-cart-tag > * {
    flex-shrink: 0;
}
.td-cart-tag > .td-cart-tag-label {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-cart-detail-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #fbcfe8;
    background: var(--tr-primary-light);
    color: var(--tr-primary);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.td-cart-detail-btn:hover {
    background: var(--tr-primary);
    border-color: var(--tr-primary);
    color: #ffffff;
}
.td-cart-more {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--tr-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    animation: tdMorePop 0.25s ease-out;
}
.td-cart-more[hidden] {
    display: none;
}
.td-cart-detail-btn:hover .td-cart-more {
    background: #ffffff;
    color: var(--tr-primary);
}
@keyframes tdMorePop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.td-cart-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 3px;
    background: #fdf2f8;
    color: #9d174d;
    border: 1px solid #fbcfe8;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}
.td-cart-tag:not(:has(.td-cart-tag-dir)) {
    padding-left: 10px;
}
.td-cart-total-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.td-cart-total-wrap > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}
.td-cart-total-price {
    font-size: 21px;
    font-weight: 800;
    color: var(--tr-primary);
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s ease, color 0.2s ease;
}
.td-cart-total-price.td-price-bounce {
    animation: tdPricePop 0.35s ease-out;
}
@keyframes tdPricePop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.22);
        color: #10b981;
    }
    100% {
        transform: scale(1);
        color: var(--tr-primary);
    }
}
.td-btn-checkout {
    background: linear-gradient(135deg, var(--tr-primary) 0%, #c9006b 100%);
    color: #ffffff;
    border: none;
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px -6px rgba(237, 0, 127, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-wrap: nowrap;
}
.td-btn-checkout:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -6px rgba(237, 0, 127, 0.6);
}
.td-btn-checkout i {
    margin-left: 4px;
}
/* Đang chờ /hold trả về: khoá nút tiếp tục */
.td-btn-checkout.is-loading,
.td-btn-checkout:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
    box-shadow: none;
}
.td-btn-checkout.is-loading i {
    margin-left: 0;
    margin-right: 6px;
}



@media (max-width: 1024px) {
    .td-seats-rows-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Responsive Toàn Diện Cho Tablet & Mobile (<= 768px) - MoMo App Style ─── */
@media (max-width: 768px) {
    .td-page {
        padding-bottom: 110px;
        background: #f8fafc;
    }
    .td-header-bar {
        position: sticky;
        top: 0;
        z-index: 45;
        padding: 6px 0;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .td-header-inner {
        flex-direction: row;
        flex-wrap: wrap; /* hàng nút .td-header-actions xuống dòng riêng */
        align-items: center;
        justify-content: flex-start;
        gap: 6px 8px;
        padding: 0 8px;
    }
    .td-back-box {
        flex: 0 0 auto;
    }
    .td-btn-back {
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        flex-shrink: 0;
    }
    .td-btn-back i {
        font-size: 13px;
        color: #334155;
    }
    .td-back-txt-full,
    .td-back-txt-short {
        display: none !important;
    }
    .td-trip-info {
        flex: 1;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    .td-badge-train {
        font-size: 12px;
        font-weight: 800;
        padding: 3px 6px;
        border-radius: 5px;
        line-height: 1.2;
        flex-shrink: 0;
    }
    .td-trip-text {
        min-width: 0;
        flex: 1;
    }
    .td-trip-route {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
    }
    .td-trip-date {
        font-size: 10px;
        color: var(--tr-text-muted);
        line-height: 1.3;
        margin-top: 1px;
    }
    .td-guide-box {
        display: none !important;
    }

    /* Container & Booking Wrapper */
    .td-container {
        padding: 8px 8px 0;
        margin-top: 0;
        gap: 0;
    }
    .td-booking-wrapper {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        min-height: calc(100vh - 170px);
    }

    /* ═══ CỘT TRÁI: DANH SÁCH TOA TÀU DỌC (MoMo Style) ═══ */
    .td-carriages-card {
        flex: 0 0 82px;
        width: 82px;
        padding: 0 !important;
        background: #eef4ff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }
    .td-carriages-card .td-card-title {
        display: none !important;
    }
    /* Đường ray dọc (2 thanh ray + tà vẹt) cuộn theo nội dung */
    .td-carriages-scroll {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 10px 14px;
        border: 0;
        border-radius: 0;
        background:
            linear-gradient(90deg, transparent 7px, #94a3b8 7px 9px, transparent 9px calc(100% - 9px), #94a3b8 calc(100% - 9px) calc(100% - 7px), transparent calc(100% - 7px)) local,
            repeating-linear-gradient(180deg, #d6dde7 0 4px, transparent 4px 13px) local,
            #eef4ff;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        max-height: calc(100vh - 175px);
    }
    .td-train-engine {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 14px 4px 8px;
        border-radius: 30px 30px 8px 8px / 22px 22px 8px 8px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.4px;
        text-align: center;
        box-shadow: 0 6px 12px -6px rgba(27, 68, 142, 0.6);
        margin-bottom: 0;
        position: relative;
    }
    .td-train-engine i {
        font-size: 15px;
        margin-bottom: 1px;
    }
    .td-carriage-tab {
        min-width: 0;
        width: 100%;
        background: #ffffff;
        border: 1.5px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px 3px 7px;
        text-align: center;
        box-sizing: border-box;
        box-shadow: inset 0 3px 0 #cbd5e1, 0 3px 8px -4px rgba(15, 23, 42, 0.15);
        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        position: relative;
        margin-top: 12px;
    }
    .td-carriage-tab.active {
        background: #fff0f7;
        border-color: var(--tr-primary);
        box-shadow: inset 0 3px 0 var(--tr-primary), 0 0 0 3px rgba(237, 0, 127, 0.14), 0 6px 14px -6px rgba(237, 0, 127, 0.5);
    }
    /* Bánh xe nhìn từ trên: 4 bánh nhô ra 2 bên, nằm trên ray */
    .td-train-engine::after,
    .td-carriage-tab::after {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: -5px;
        right: -5px;
        background:
            linear-gradient(#334155, #334155) left top / 3px 9px no-repeat,
            linear-gradient(#334155, #334155) left bottom / 3px 9px no-repeat,
            linear-gradient(#334155, #334155) right top / 3px 9px no-repeat,
            linear-gradient(#334155, #334155) right bottom / 3px 9px no-repeat;
        border-radius: 2px;
        pointer-events: none;
    }
    /* Khớp nối với toa / đầu máy phía trên */
    .td-carriage-tab::before {
        content: '';
        position: absolute;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        width: 5px;
        height: 12px;
        background: #94a3b8;
        border-radius: 2px;
    }
    .td-carriage-num {
        font-size: 11.5px;
        font-weight: 800;
        color: #1e293b;
        line-height: 1.2;
    }
    .td-carriage-tab.active .td-carriage-num {
        color: var(--tr-primary);
    }
    .td-carriage-type-full {
        display: none !important;
    }
    .td-carriage-type-short {
        display: block !important;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.2;
        color: #64748b;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .td-carriage-tab.active .td-carriage-type-short {
        color: var(--tr-primary);
        font-weight: 700;
    }
    /* Cột toa hẹp: tên công ty cắt gọn, logo nhỏ lại */
    .td-carriage-partner {
        font-size: 8.5px;
        margin-top: 2px;
        gap: 2px;
    }
    .td-carriage-partner-logo {
        height: 12px;
        max-width: 32px;
    }

    /* ═══ CỘT PHẢI: SƠ ĐỒ GHẾ / GIƯỜNG NẰM (MoMo Style) ═══ */
    .td-seatmap-card {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px !important;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        max-height: calc(100vh - 175px);
        -webkit-overflow-scrolling: touch;
    }

    /* Legend trạng thái & Bảng giá trên toàn bề ngang Mobile (Modern OTA App Look) */
    .td-seat-legend {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px 10px;
        margin-bottom: 8px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        white-space: normal;
    }
    .td-legend-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
    }
    .td-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        color: #334155;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 5px 4px;
        border-radius: 6px;
        line-height: 1;
    }
    .td-legend-box {
        width: 13px;
        height: 13px;
        border-radius: 3px;
        flex-shrink: 0;
    }
    .td-legend-box.avail {
        background: #ffffff;
        border: 1.5px solid #94a3b8;
    }
    .td-legend-box.selected {
        background: var(--tr-primary);
        border: 1.5px solid var(--tr-primary);
    }
    .td-legend-box.booked {
        background: #e2e8f0;
        border: 1.5px solid #cbd5e1;
    }
    .td-legend-box.held {
        background: #fef3c7;
        border: 1.5px solid #f59e0b;
    }
    .td-legend-box.locked {
        background: #fee2e2;
        border: 1.5px solid #ef4444;
    }
    .td-legend-sep {
        display: none;
    }
    .td-price-legend {
        display: flex;
        align-items: center;
        gap: 5px;
        padding-top: 6px;
        border-top: 1px dashed #e2e8f0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .td-price-legend::-webkit-scrollbar {
        display: none;
    }
    .td-price-legend-title {
        font-size: 10px;
        font-weight: 700;
        color: #64748b;
        margin-right: 2px;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    .td-pl-item {
        font-size: 9.5px;
        padding: 3px 7px;
        border-radius: 6px;
        line-height: 1.2;
        white-space: nowrap;
        flex-shrink: 0;
        font-weight: 600;
        border: 1px solid rgba(0,0,0,0.04);
    }
    .td-pl-item b {
        font-weight: 800;
    }

    /* Layout Toa Xe */
    .td-carriage-layout {
        background: transparent;
        border: none;
        padding: 0;
        border-radius: 0;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .td-layout-head {
        font-size: 11px;
        padding: 6px 8px;
        margin-bottom: 8px;
        border-radius: 6px;
        background: #fdf2f8;
        border: 1px solid #fbcfe8;
        border-left: 3px solid var(--tr-primary);
        line-height: 1.25;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .td-layout-head i {
        color: var(--tr-primary);
        font-size: 11px;
        background: #ffffff;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        flex-shrink: 0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .td-lh-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }
    .td-lh-title {
        color: var(--tr-primary);
        font-weight: 700;
        font-size: 11px;
        line-height: 1.2;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .td-lh-title b {
        color: var(--tr-primary);
        font-weight: 700;
    }
    .td-lh-desc {
        color: #64748b;
        font-size: 9.5px;
        font-weight: 500;
        line-height: 1.25;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
    /* Nút xem ảnh toa thu thành icon (ẩn ảnh đầu + chữ; tên nút nằm ở aria-label) */
    .td-carriage-photos-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
    }
    .td-carriage-photos-btn img,
    .td-carriage-photos-label {
        display: none;
    }
    .td-layout-head .td-carriage-photos-btn i {
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        font-size: 15px;
        color: inherit;
    }

    /* 1. Sơ đồ Thân Toa Tàu Dọc Trên Mobile (Vertical Coach Blueprint Layout) */
    .td-coach-container {
        padding: 8px 6px;
        border-radius: 10px;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .td-coach-inner-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
        box-sizing: border-box;
    }
    .td-coach-body {
        flex-direction: column;
        min-width: 0;
        width: 100%;
        gap: 8px;
        padding-right: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }
    .td-coach-end {
        width: 100%;
        min-height: 58px;
        height: 58px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 6px 12px;
        gap: 12px;
        box-sizing: border-box;
    }
    .td-coach-front {
        border-left: 1.5px dashed #cbd5e1;
        border-top: 4px solid #64748b;
        border-radius: 8px 8px 4px 4px;
    }
    .td-coach-rear {
        border-right: 1.5px dashed #cbd5e1;
        border-bottom: 4px solid #64748b;
        border-radius: 4px 4px 8px 8px;
    }
    .td-coach-door, .td-coach-facility {
        flex-direction: row;
        gap: 4px;
        font-size: 10.5px;
    }
    .td-coach-door span, .td-coach-facility span {
        font-size: 10.5px;
    }
    .td-coach-door i, .td-coach-facility i {
        font-size: 13px;
    }

    /* Toa Ghế Ngồi Mềm Dọc Trên Mobile (Hàng 1 -> Hàng 16 xếp dọc, 4 ghế dàn ngang) */
    .td-coach-seating-grid {
        flex-direction: column;
        width: 100%;
        gap: 6px;
        padding: 0;
        overflow-x: visible;
    }
    .td-coach-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
        padding: 4px 4px;
        gap: 3px;
        box-sizing: border-box;
    }
    .td-coach-row-header {
        font-size: 10.5px;
        min-width: 24px;
        padding-bottom: 0;
        padding-right: 3px;
        border-bottom: none;
        border-right: 1.5px dashed #cbd5e1;
        text-align: center;
        flex-shrink: 0;
    }
    .td-coach-aisle-node {
        width: 8px;
        min-width: 8px;
        height: 36px;
        margin: 0 1px;
        background: repeating-linear-gradient(0deg, #cbd5e1, #cbd5e1 4px, transparent 4px, transparent 8px);
        flex-shrink: 0;
    }
    .td-coach-row .td-seat-item {
        flex: 1;
        min-width: 0;
        min-height: 48px;
        padding: 6px 3px;
        gap: 2px;
    }
    .td-coach-row .td-seat-placeholder {
        flex: 1;
        min-width: 0;
        min-height: 48px;
        visibility: hidden;
        pointer-events: none;
    }
    /* Toa đặc biệt (layoutId): xoay toa dọc như các toa khác — mỗi cột dọc thân toa thành 1 hàng ngang, ghế / bàn / bar / vách
       giữ đúng vị trí tương đối như desktop, chỉ quay 90°. Hàng giãn đầy bề ngang mà vẫn thẳng cột: ô flex 1, lối đi cố định
       24px, ô gộp flex 2 + 4px (đúng khoảng cách giữa 2 ô nó thay) — mọi hàng cùng tổng phần giãn nên bề rộng ô bằng nhau */
    .td-lc-container {
        padding: 8px 6px;
        border-radius: 10px;
    }
    .td-lc-body {
        flex-direction: column;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }
    .td-lc-end {
        width: 100%;
        flex-direction: row;
        padding: 6px 12px;
    }
    .td-lc-front {
        border-left: 1.5px dashed #cbd5e1;
        border-top: 4px solid #1B448E;
    }
    .td-lc-rear {
        border-right: 1.5px dashed #cbd5e1;
        border-bottom: 4px solid #1B448E;
    }
    .td-lc-door {
        flex-direction: row;
        font-size: 10.5px;
    }
    .td-lc-door i {
        font-size: 13px;
    }
    .td-lc-grid {
        flex-direction: column;
        gap: 4px;
    }
    .td-lc-col,
    .td-lc-col-wall {
        flex-direction: row;
        flex: none;
        width: 100%;
        gap: 4px;
    }
    /* flex-basis 0 không co được dưới viền + padding của ô: mọi ô cùng phần cố định 3px (viền 1.5px, ghế bỏ padding ngang,
       bàn / ô trống viền trong suốt) để ghế mọi hàng rộng bằng nhau; ô gộp = 3 + 3 + khoảng cách 4px = 10px */
    .td-lc-col > .td-seat-item,
    .td-lc-col > .td-seat-placeholder,
    .td-lc-col > .td-coach-cell-table,
    .td-lc-col > .td-coach-cell-bar,
    .td-lc-col > .td-coach-cell-wall {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        margin: 0;
        box-sizing: border-box;
    }
    .td-lc-col > .td-seat-item {
        padding: 4px 0;
    }
    .td-lc-col > .td-seat-placeholder,
    .td-lc-col > .td-coach-cell-table {
        border: 1.5px solid transparent;
    }
    .td-lc-col > .td-coach-cell-span {
        flex: 2 1 10px;
        height: 48px;
        min-height: 48px;
    }
    /* Lối đi 24px, nét đứt dọc ở giữa (các hàng thẳng cột nên nối thành 1 đường); lối đi rộng = 2 lối + khoảng cách 4px */
    .td-lc-col > .td-coach-aisle-node {
        flex: 0 0 24px;
        width: 24px;
        height: auto;
        background: repeating-linear-gradient(180deg, #cbd5e1 0 4px, transparent 4px 8px) center / 8px 100% no-repeat;
    }
    .td-lc-col > .td-coach-aisle-wide {
        flex: 0 0 52px;
        width: 52px;
    }
    /* Lối đi ngang giữa 2 khối ghế: dải nét đứt nằm ngang hết bề rộng toa */
    .td-lc-col-aisle {
        width: 100%;
        height: 24px;
        background: repeating-linear-gradient(90deg, #cbd5e1 0 4px, transparent 4px 8px) center / 100% 8px no-repeat;
    }
    .td-lc-col-wall > .td-coach-cell-wall {
        height: 8px;
        min-height: 8px;
    }
    /* Bàn: thanh ngang mảnh như thanh bàn toa 2 tầng (khác hẳn ô ghế); bàn chung 2 dãy ghế chỉ dài hơn, cùng độ dày */
    .td-lc-col > .td-coach-cell-table::before {
        width: 80%;
        height: 12px;
    }
    .td-lc-col > .td-coach-cell-table.td-coach-cell-span::before {
        width: 90%;
        height: 12px;
    }
    /* Sảnh chờ quay 90°: dãy ghế bành sát 2 bên cửa sổ, nhãn ở giữa */
    .td-coach-zone {
        flex: none;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        padding: 12px 10px;
    }
    .td-zone-row {
        flex-direction: column;
    }
    .td-zone-chair {
        width: 28px;
        height: 34px;
        border-top: 1.5px solid #cbd5e1;
        border-left: 4px solid #94a3b8;
    }
    .td-zone-row-bottom .td-zone-chair {
        border-left: 1.5px solid #cbd5e1;
        border-bottom: 1.5px solid #cbd5e1;
        border-right: 4px solid #94a3b8;
    }
    /* Toa dọc vừa màn hình, không cần gợi ý cuộn ngang */
    .td-lc-container ~ .td-2floor-scroll-hint {
        display: none;
    }

    /* Nút chọn tầng toa 2 tầng: 2 dòng gọn "TẦNG 1" + "Còn N chỗ", ẩn icon cầu thang và chú thích (tầng dưới / trên) */
    .td-floor-tabs-bar {
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .td-floor-tab-btn {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 6px 8px;
        font-size: 12px;
        line-height: 1.2;
    }
    .td-floor-tab-btn > i,
    .td-floor-tab-sub {
        display: none;
    }
    .td-floor-badge {
        padding: 1px 8px;
        font-size: 10px;
        white-space: nowrap;
    }

    /* 2. Sơ đồ Giường Nằm: Ẩn sơ đồ nằm ngang desktop (.td-coach-cabin-mode) trên mobile, chỉ hiện sơ đồ khoang (.td-mobile-sleeper-section). Sơ đồ ghế ngồi (.td-floor-wrapper) vẫn hiển thị bình thường. */
    .td-carriage-layout .td-coach-container.td-coach-cabin-mode {
        display: none !important;
    }

    .td-carriage-layout .td-floor-wrapper {
        display: block !important;
    }

    .td-mobile-sleeper-section {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
    }
    .td-mobile-corridor-wrapper {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    .td-mobile-cabins-list {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .td-m-cabin-card {
        background: #ffffff;
        border: 1.5px solid #cbd5e1;
        border-radius: 10px;
        padding: 8px 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        box-sizing: border-box;
    }
    .td-m-cabin-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11.5px;
        font-weight: 800;
        color: #1e293b;
        padding-bottom: 6px;
        border-bottom: 1px dashed #e2e8f0;
        margin-bottom: 8px;
    }
    .td-m-cabin-title i {
        color: var(--tr-primary);
        margin-right: 4px;
    }
    .td-m-cabin-type-badge {
        font-size: 9px;
        font-weight: 700;
        color: #64748b;
        background: #f1f5f9;
        padding: 2px 6px;
        border-radius: 4px;
    }
    .td-m-cabin-interior {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
    }
    .td-m-bed-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .td-m-cabin-aisle {
        width: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex-shrink: 0;
    }
    .td-m-table {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        padding: 2px 4px;
        color: #64748b;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .td-m-aisle-line {
        width: 2px;
        height: 30px;
        background: repeating-linear-gradient(0deg, #cbd5e1, #cbd5e1 3px, transparent 3px, transparent 6px);
    }
    .td-m-bed-box {
        width: 100%;
        min-height: 48px !important;
        height: auto !important;
        padding: 6px 8px !important;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        border: 1.5px solid var(--tr-seat-avail-border);
        background: #ffffff;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .td-m-bed-box .td-st-num {
        font-size: 12px;
        font-weight: 800;
        color: #1e293b;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .td-m-bed-box .td-st-num i {
        font-size: 11px;
        color: #64748b;
    }
    .td-m-bed-box .td-st-layer {
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
        line-height: 1;
    }
    .td-m-bed-box.selected {
        background: var(--tr-primary) !important;
        border-color: var(--tr-primary) !important;
        color: #ffffff !important;
    }
    .td-m-bed-box.selected .td-st-num,
    .td-m-bed-box.selected .td-st-num i {
        color: #ffffff !important;
    }
    .td-m-bed-box.selected .td-st-layer {
        background: rgba(255,255,255,0.2) !important;
        color: #ffffff !important;
        border-color: transparent !important;
    }
    .td-m-bed-box.booked {
        background: #f1f5f9 !important;
        border-color: #e2e8f0 !important;
        cursor: not-allowed;
        opacity: 0.65;
    }
    .td-m-bed-box.booked .td-st-num,
    .td-m-bed-box.booked .td-st-num i {
        color: #94a3b8 !important;
    }

    /* Hành lang bên hông các khoang */
    .td-m-aisle-corridor {
        width: 32px;
        flex-shrink: 0;
        background: #f8fafc;
        border: 1.5px dashed #cbd5e1;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 14px 2px;
        box-sizing: border-box;
        gap: 10px;
    }
    .td-m-aisle-corridor span {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.5px;
        color: #64748b;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .td-m-aisle-corridor i {
        font-size: 10px;
        color: #94a3b8;
    }

    /* Ô Ghế & Giường Nằm Chung */
    .td-seat-item {
        min-height: 48px;
        padding: 8px 5px;
        border-radius: 8px;
        font-size: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        box-sizing: border-box;
    }
    .td-seat-item.td-bed-item,
    .td-bed-item {
        width: 100%;
        max-width: 100%;
        min-height: 58px !important;
        height: 58px !important;
        padding: 8px 12px;
        border-radius: 8px;
        gap: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }
    .td-bed-item .td-st-num {
        font-size: 12px;
        font-weight: 800;
        gap: 6px;
        line-height: 1.2;
    }
    .td-bed-item .td-st-num i {
        font-size: 12px;
    }
    .td-bed-item .td-st-layer {
        font-size: 9px;
        padding: 2px 8px;
        margin-top: 0;
        border-radius: 4px;
        line-height: 1.2;
    }
    .td-seat-item span:first-child {
        font-size: 11.5px;
        font-weight: 800;
        line-height: 1.1;
    }
    .td-st-layer {
        font-size: 8.5px;
        padding: 1.5px 5px;
        margin-top: 0;
        border-radius: 4px;
        line-height: 1.2;
    }

    /* ═══ STICKY BOTTOM CART BAR TRÊN MOBILE ═══
       Gọn 2 dòng: [Vé đang chọn · Chi tiết] / [Tổng tiền] bên trái, nút Tiếp tục bên phải.
       Danh sách ghế xem trong modal full màn hình khi nhấn vào (train-detail.js). */
    .td-cart-bar {
        z-index: 100;
        padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .td-cart-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "seats btn" "price btn";
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
        padding: 10px 10px 10px 14px;
        border-radius: 16px;
    }
    .td-cart-seats {
        grid-area: seats;
        min-width: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .td-cart-seats-title {
        display: flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        font-size: 12px;
        font-weight: 700;
        color: #334155;
    }
    .td-cart-seats-title::after {
        content: 'Chi tiết ›';
        flex: 0 0 auto;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--tr-primary);
        background: var(--tr-primary-light);
        border: 1px solid #fbcfe8;
        padding: 1px 7px;
        border-radius: 999px;
    }
    .td-cart-tags,
    .td-cart-detail-btn {
        display: none;
    }
    .td-cart-total-wrap {
        display: contents;
    }
    .td-cart-total-wrap > div {
        grid-area: price;
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 6px;
    }
    .td-cart-total-label {
        font-size: 10px;
    }
    .td-cart-total-price {
        font-size: 17px;
        line-height: 1.15;
    }
    .td-btn-checkout {
        grid-area: btn;
        align-self: stretch;
        max-width: 46vw;
        padding: 10px 14px;
        font-size: 13.5px;
        border-radius: 12px;
        white-space: normal;
        line-height: 1.25;
    }

    /* Modal Form Hành Khách */
    .td-modal-box {
        padding: 16px 12px;
        max-height: 90vh;
        border-radius: 14px;
    }
    .td-form-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .td-pass-block {
        padding: 10px;
        margin-bottom: 10px;
    }
}

/* ─── Toast Notification (Popup cảnh báo giới hạn ghế) ─── */
.td-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e293b;
    color: #ffffff;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}
.td-toast.td-toast--warning {
    background: #7c1d1d;
    border-left: 4px solid var(--tr-primary);
}
.td-toast.td-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.td-toast i {
    font-size: 16px;
    color: var(--tr-primary);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .td-toast {
        bottom: 80px;
        font-size: 13px;
        padding: 11px 16px;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }
}

/* ─── 8. Header Action Buttons (Lịch đón, Ảnh tàu, Chính sách) ─── */
.td-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.td-hbtn {
    background: #ffffff;
    border: 1px solid var(--tr-border);
    color: #334155;
    padding: 7px 12px;
    border-radius: var(--tr-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.td-hbtn i {
    color: var(--tr-primary);
    font-size: 14px;
}
.td-hbtn:hover {
    background: var(--tr-primary-light);
    border-color: rgba(237, 0, 127, 0.4);
    color: var(--tr-primary);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .td-header-actions {
        flex: 0 0 100%;
        gap: 6px;
    }
    .td-header-actions .td-hbtn {
        flex: 1;
        justify-content: center;
        padding: 6px 7px;
    }
    .td-hbtn {
        padding: 5px 7px;
        font-size: 11px;
        border-radius: 6px;
        gap: 4px;
    }
    .td-hbtn i {
        font-size: 12px;
    }
    .td-hbtn span {
        display: none;
    }
    .td-hbtn[title]:active {
        background: var(--tr-primary-light);
    }
}

/* ─── 9. Modal Overlay & Dialog Styles ─── */
.td-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(3px);
    z-index: 2147483645;
    padding: 30px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.td-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    opacity: 1;
}
.td-modal-box {
    background: #ffffff;
    border-radius: var(--tr-radius-lg);
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 60px);
    margin: auto 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    animation: tdModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.td-modal-box.td-modal-md {
    max-width: 620px;
}
.td-modal-box.td-modal-lg {
    max-width: 780px;
}
@keyframes tdModalPop {
    from {
        transform: scale(0.96);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.td-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tr-border);
    background: #f8fafc;
}
.td-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.td-modal-header h3 i {
    color: var(--tr-primary);
}
.td-cart-total-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tr-text-muted);
}
/* Ghế chặng dài trong giỏ: viền xanh như trên sơ đồ + dòng "Đã gồm phụ thu" dưới tổng tiền */
.td-cart-tag.is-longer-route {
    border-color: #16a34a;
}
.td-cart-surcharge {
    font-size: 11px;
    font-weight: 600;
    color: #ea580c; /* khoản cộng: cam, như các bảng giá đặt vé */
}
.td-cart-surcharge[hidden] {
    display: none;
}
.td-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s ease;
}
.td-modal-close:hover {
    color: #0f172a;
}
.td-modal-body {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Timeline Ga Dừng Đỗ */
.td-stops-route-meta {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #334155;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.td-stops-timeline {
    position: relative;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.td-stops-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #cbd5e1;
}
.td-stop-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.td-stop-dot {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #94a3b8;
    z-index: 1;
}
.td-stop-item.is-start .td-stop-dot {
    border-color: #16a34a;
    background: #16a34a;
}
.td-stop-item.is-end .td-stop-dot {
    border-color: var(--tr-primary);
    background: var(--tr-primary);
}
.td-stop-info {
    flex: 1;
}
.td-stop-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.td-stop-time {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.td-stop-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.td-stop-badge.start {
    background: #dcfce7;
    color: #15803d;
}
.td-stop-badge.end {
    background: #fce7f3;
    color: var(--tr-primary);
}

/* Gallery Ảnh Tàu */
.td-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.td-gallery-item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.td-gallery-item:first-child {
    grid-column: span 2;
}
.td-gallery-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    background: #f1f5f9;
}
.td-gallery-item:first-child img {
    height: 200px;
}
.td-gallery-caption {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.td-gallery-caption b {
    font-size: 13px;
    color: #1e293b;
}
.td-gallery-caption span {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.3;
}
.td-amenities-bar {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.td-amenity-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.td-amenity-pill i {
    color: var(--tr-primary);
}

/* Chính Sách Vé */
.td-policy-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.td-policy-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
}
.td-policy-block h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.td-policy-block h4 i {
    color: var(--tr-primary);
}
.td-policy-block ul {
    margin: 0;
    padding-left: 20px;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.6;
}
.td-policy-block li {
    margin-bottom: 4px;
}
.td-policy-block li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .td-modal-overlay {
        padding: 20px 12px;
        align-items: flex-start;
    }
    .td-modal-box {
        max-height: calc(100vh - 40px);
        margin: 10px auto;
        border-radius: 14px;
    }
    .td-modal-header {
        padding: 12px 16px;
    }
    .td-modal-header h3 {
        font-size: 14px;
    }
    .td-modal-body {
        padding: 14px;
    }
    .td-gallery-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .td-gallery-item:first-child {
        grid-column: span 1;
    }
    .td-gallery-item img {
        height: 140px;
    }
    .td-gallery-item:first-child img {
        height: 160px;
    }
}

/* ─── 9. Round-Trip Seatmap Tabs & Cart Grouping ────────────────────────── */
.seatmap-roundtrip-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    width: 100%;
    box-sizing: border-box;
}
.srt-tab,
.seatmap-leg-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.srt-tab:hover,
.seatmap-leg-tab:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    transform: translateY(-1px);
}
.srt-tab.is-active,
.seatmap-leg-tab.is-active {
    border-color: var(--tr-primary, #ed007f) !important;
    background: #fff8fc !important;
    box-shadow: 0 4px 12px rgba(237, 0, 127, 0.12) !important;
}
#srtTabReturn.srt-tab.is-active {
    border-color: #059669 !important;
    background: #ecfdf5 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12) !important;
}
.srt-tab-badge,
.leg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2.5px 9px;
    border-radius: 20px;
    background: #fce7f3;
    color: var(--tr-primary, #ed007f);
    white-space: nowrap;
    line-height: 1.2;
}
.srt-tab-badge.return,
.leg-badge.return {
    background: #d1fae5;
    color: #059669;
}
.srt-tab.is-active .srt-tab-badge {
    background: var(--tr-primary, #ed007f);
    color: #ffffff;
}
#srtTabReturn.srt-tab.is-active .srt-tab-badge.return {
    background: #059669;
    color: #ffffff;
}
.srt-tab-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    line-height: 1.3;
}
.srt-tab-sub,
.leg-details {
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    line-height: 1.3;
}
.srt-tab-seats,
.leg-status {
    font-weight: 600;
    color: #64748b;
}
.srt-tab-seats.has-seats,
.leg-status.has-seats {
    color: var(--tr-primary, #ed007f);
    font-weight: 700;
}
#srtTabReturn .srt-tab-seats.has-seats {
    color: #059669;
}

.td-cart-leg-group {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
}
.td-cart-leg-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.td-cart-leg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}
.td-cart-leg-tag {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
}
.td-cart-leg-tag.return {
    background: #fdf2f7;
    color: var(--tr-primary);
}

@media (max-width: 768px) {
    .seatmap-roundtrip-tabs {
        gap: 6px;
        padding: 4px;
        border-radius: 10px;
        margin-bottom: 12px;
    }
    .srt-tab,
    .seatmap-leg-tab {
        padding: 7px 9px;
        border-radius: 8px;
        gap: 2px;
    }
    .srt-tab-badge,
    .leg-badge {
        font-size: 9.5px;
        padding: 2px 7px;
    }
    .srt-tab-title {
        font-size: 11.5px;
    }
    .srt-tab-sub,
    .leg-details {
        font-size: 10.5px;
    }
}

.td-cart-tag.is-return {
    background: #eef2ff;
    color: #3730a3;
    border-color: #c7d2fe;
}
.td-cart-tag .td-cart-tag-dir {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    /* Bo góc đồng tâm với chip: 9px - 3px padding = 6px; cao bằng lòng chip */
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    margin: 3px 0;
    border-radius: 6px;
    background: var(--tr-primary);
    color: #ffffff;
}
.td-cart-tag.is-return .td-cart-tag-dir {
    background: #4f46e5;
}
.td-cart-tag-time {
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #e11d48;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.td-cart-tag .td-cart-tag-time {
    margin-left: 0;
    border-radius: 6px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.8);
}
.td-cart-tag-remove {
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: #94a3b8;
    transition: color 0.15s ease, background 0.15s ease;
}
.td-cart-tag-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}
/* Trạng thái đang gọi API ĐSVN giữ chỗ (Instant Feedback - 0ms) */
.td-seat-item.holding {
    position: relative;
    border-color: var(--tr-primary, #ed007f) !important;
    background: #fff1f8 !important;
    color: var(--tr-primary, #ed007f) !important;
    cursor: wait !important;
    box-shadow: 0 0 0 2px rgba(237, 0, 127, 0.25);
    pointer-events: none;
}
.td-seat-item.holding .td-st-num,
.td-seat-item.holding .td-st-layer {
    opacity: 0.2;
}
.td-seat-item.holding::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    border: 2.5px solid rgba(237, 0, 127, 0.2);
    border-top-color: var(--tr-primary, #ed007f);
    border-radius: 50%;
    animation: tdSeatSpin 0.65s linear infinite;
    z-index: 5;
}
@keyframes tdSeatSpin {
    to { transform: rotate(360deg); }
}

/* Ẩn thanh cuộn (scrollbar) cho Modal dvtTimerDetailModal và dvtCartItems nhưng vẫn cuộn mượt bằng chuột */
.dvt-no-scrollbar,
.dvt-no-scrollbar *,
#dvtTimerDetailModal,
#dvtTimerDetailModal *,
#dvtCartItems {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.dvt-no-scrollbar::-webkit-scrollbar,
.dvt-no-scrollbar *::-webkit-scrollbar,
#dvtTimerDetailModal::-webkit-scrollbar,
#dvtTimerDetailModal *::-webkit-scrollbar,
#dvtCartItems::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Khung cuộn & Dòng danh sách vé trong Sidebar Summary dvtCartItems */
.dvt-side-items-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}
.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: #f1f5f9;
    color: #334155;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
}
.td-cart-tag-dir.ret {
    background: #e2e8f0 !important;
    color: #1e293b;
}
/* Badge "Chiều về" ở header modal "Vé đang giữ chỗ": rule trên có !important làm mất nền tím (chữ trắng trên nền xám),
   nên phải dùng !important để trả lại màu chiều về của modal */
.dvt-timer-modal-dialog .dvt-side-ret-block .td-cart-tag-dir.ret {
    background: var(--dvt-ret, #4f46e5) !important;
    color: #ffffff;
}
.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-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;
}

/* ─── Khối Ghế Phụ (SubSeats - Ghế nhựa bổ sung đợt Lễ/Tết) ─── */
.td-subseats-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff5f9;
    border: 1px dashed var(--tr-primary, #ed007f);
    border-radius: var(--tr-radius-md, 10px);
}
.td-subseats-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.td-subseats-title span {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
}
.td-subseats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.td-subseat-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    min-width: 95px;
}
.td-subseat-chip:hover {
    border-color: var(--tr-primary, #ed007f);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(237, 0, 127, 0.15);
}
.td-subseat-chip .td-st-num {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.td-subseat-chip .td-st-layer.badge-gp {
    font-size: 11px;
    font-weight: 800;
    color: var(--tr-primary, #ed007f);
    margin-top: 2px;
}
.td-subseat-chip.selected {
    background: var(--tr-primary, #ed007f) !important;
    border-color: var(--tr-primary, #ed007f) !important;
    color: #ffffff !important;
}
.td-subseat-chip.selected .td-st-num,
.td-subseat-chip.selected .td-st-layer.badge-gp {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MẶT BẰNG TOA NGỒI MỀM 2 TẦNG (DOUBLE DECK CAR - CHUẨN ĐẶC TẢ VNR)
   ═══════════════════════════════════════════════════════════════════════ */
.td-2floor-layout {
    width: 100%;
    margin-top: 14px;
}
.td-2floor-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
.td-2floor-carriage-shell {
    width: max-content;
    min-width: 100%;
    background: #ffffff;
    border: 2px solid #94a3b8;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    position: relative;
    box-sizing: border-box;
}
.td-2floor-plan-body {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    gap: 0;
}

/* Khu vực Cầu Thang ở Hai Đầu Toa */
.td-2floor-stair-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    width: 72px;
    padding: 12px 6px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #1e3a8a;
    text-align: center;
    flex-shrink: 0;
    user-select: none;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.td-2floor-stair-zone i {
    font-size: 24px;
    margin-bottom: 6px;
    color: #1e3a8a;
}
.td-2floor-stair-zone span {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    color: #1e3a8a;
}

/* Khoảng trống ở hai đầu toa (End Spaces) */
.td-2floor-end-space {
    flex-shrink: 0;
}
.td-2floor-end-space.is-floor2 {
    width: 220px;
    min-width: 180px;
}
.td-2floor-end-space.is-floor2-left {
    width: 227px;
    min-width: 180px;
}
.td-2floor-end-space.is-floor2-right {
    width: 174px;
    min-width: 140px;
}
.td-2floor-end-space.is-floor1-left {
    width: 20px;
    min-width: 16px;
}
.td-2floor-end-space.is-floor1-right {
    width: 20px;
    min-width: 16px;
}

/* Khối Cầu Thang Kết Nối Tầng Giữa Các Cụm Toa 2 Tầng */
.td-2floor-stair-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 40px;
    min-width: 40px;
    flex-shrink: 0;
    padding: 0 4px;
    box-sizing: border-box;
    user-select: none;
    cursor: default;
    transition: transform 0.15s ease;
}
.td-2floor-stair-flight {
    width: 100%;
    height: 110px;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 6px 3px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.td-2floor-stair-treads {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}
.td-stair-step {
    display: block;
    width: 100%;
    height: 3px;
    background: #94a3b8;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: background-color 0.2s ease;
}
.td-2floor-stair-connector:hover .td-stair-step {
    background: #64748b;
}
.td-2floor-stair-mid {
    height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-2floor-stair-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 5px;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.td-2floor-stair-indicator i {
    font-size: 11px;
    color: #1e3a8a;
    line-height: 1;
}
.td-stair-dir-text {
    font-size: 8px;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.td-2floor-stair-connector:hover .td-2floor-stair-indicator {
    background: #fff0f7;
    border-color: #fbcfe8;
}
.td-2floor-stair-connector:hover .td-2floor-stair-indicator i,
.td-2floor-stair-connector:hover .td-stair-dir-text {
    color: var(--tr-primary, #ed007f);
}

/* Tương thích ngược: Vách ngăn kết cấu cũ */
.td-2floor-bulkhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 16px;
    flex-shrink: 0;
    padding: 0 4px;
    box-sizing: border-box;
}
.td-2floor-bulkhead-segment {
    width: 4px;
    background: repeating-linear-gradient(0deg, #94a3b8, #94a3b8 6px, #cbd5e1 6px, #cbd5e1 12px);
    border-radius: 2px;
    border-left: 1px solid #64748b;
    border-right: 1px solid #64748b;
}
.td-2floor-bulkhead-segment.top {
    height: 110px;
}
.td-2floor-bulkhead-segment.btm {
    height: 110px;
}
.td-2floor-bulkhead-doorway {
    height: 32px;
    width: 100%;
}

/* Cụm ghế (Clusters) & Các hàng ghế ngang */
.td-2floor-cluster {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}
.td-2floor-row {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 52px;
    box-sizing: border-box;
}
.td-2floor-row.row-1 {
    margin-bottom: 6px;
}
.td-2floor-row.row-2 {
    margin-bottom: 0;
}
.td-2floor-row.row-3 {
    margin-top: 0;
    margin-bottom: 6px;
}
.td-2floor-row.row-4 {
    margin-top: 0;
}
.td-2floor-aisle-gap {
    height: 32px;
    width: 100%;
}

/* Thẻ ghế Toa 2 Tầng - Kế thừa 100% style chuẩn hệ thống DLV (.td-seat-item) */
.td-2floor-seat {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 52px;
    min-height: 52px;
    padding: 4px 2px;
    box-sizing: border-box;
}
.td-2floor-seat .td-st-num {
    font-size: 11px;
    font-weight: 800;
}
.td-2floor-seat .td-st-layer {
    font-size: 8.5px;
    font-weight: 700;
}

/* Ô trống không có ghế (đảm bảo thẳng hàng cột theo sơ đồ) */
.td-2floor-empty-slot {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 52px;
    visibility: hidden;
}

/* Khu vực Trung tâm (Bàn trung tâm & Nhãn Tầng) */
.td-2floor-center-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 76px;
}
.td-2floor-table-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 110px;
    gap: 22px;
}
.td-2floor-table-bar {
    width: 44px;
    height: 14px;
    background: #f1f5f9;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.td-2floor-floor-label {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--tr-primary, #ed007f);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 6px;
}

/* Gợi ý cuộn ngang trên màn hình vừa/nhỏ */
.td-2floor-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
}
@media (max-width: 1200px) {
    .td-2floor-scroll-hint {
        display: flex;
    }
}

/* ─── Popup "Thêm chiều về" (một chiều → khứ hồi ngay tại trang chi tiết) ─── */
#tdAddReturnModal .td-rt-box {
    padding: 0;
    max-width: 560px;
    border-radius: 20px;
    overflow: visible; /* cho lịch dropdown tràn khỏi khung */
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.td-rt-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 18px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(135deg, var(--tr-primary) 0%, #ff4fa3 100%);
    color: #ffffff;
}
.td-rt-head-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.td-rt-head-text {
    flex: 1;
    min-width: 0;
}
.td-rt-head h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
.td-rt-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    opacity: 0.95;
}
.td-rt-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
#tdAddReturnModal .td-rt-close {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
#tdAddReturnModal .td-rt-close:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}
#tdAddReturnModal .td-rt-body {
    padding: 18px 22px 22px;
    overflow: visible;
}

/* Tóm tắt chiều đi */
.td-rt-outbound {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--tr-bg-light);
    border: 1px dashed var(--tr-border);
    border-radius: 12px;
    font-size: 13px;
    color: #334155;
}
.td-rt-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.td-rt-muted {
    color: var(--tr-text-muted);
}

/* Ô chọn ngày + lịch dropdown (markup render_dlv_datepicker_field) */
#tdAddReturnModal .td-rt-datefield {
    position: relative;
    margin-bottom: 18px;
}
#tdAddReturnModal .td-rt-datefield > label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Khung ngoài .date-custom-trigger: bỏ hẳn (rule chung style-common.css dùng !important → phải !important),
   ô gõ .td-rt-date-input là khung duy nhất, icon lịch nằm trong góc phải */
#tdAddReturnModal .date-custom-trigger {
    position: relative;
    display: block;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#tdAddReturnModal .date-custom-trigger > i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    cursor: pointer;
}
#tdAddReturnModal .td-rt-date-input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 44px 0 14px;
    border: 1.5px solid var(--tr-border);
    border-radius: 12px;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tr-text-dark);
    box-sizing: border-box;
}
#tdAddReturnModal .date-custom-trigger.is-invalid .td-rt-date-input {
    border-color: #dc2626;
}
@media (max-width: 768px) {
    #tdAddReturnModal .td-rt-date-input {
        font-size: 16px; /* iOS tự zoom khi ô nhập < 16px */
    }
}
.td-rt-date-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}
.td-rt-date-hint:not(:empty) {
    margin-top: 6px;
    font-size: 12.5px;
    color: #dc2626;
}
/* Lịch dropdown: dùng nguyên style chung .vexe-cal-dropdown (style-common.css) */

/* Danh sách chuyến về */
.td-rt-list-head {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.td-rt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    margin: 0 -4px;
    padding: 2px 4px;
    -webkit-overflow-scrolling: touch;
}
.td-rt-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border: 1.5px solid var(--tr-border);
    border-radius: 14px;
    color: var(--tr-text-dark);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.td-rt-item:hover:not(:disabled),
.td-rt-item:focus-visible {
    border-color: var(--tr-primary);
    box-shadow: 0 8px 22px rgba(237, 0, 127, 0.14);
    transform: translateY(-1px);
    outline: none;
}
.td-rt-item:disabled {
    background: var(--tr-bg-light);
    cursor: not-allowed;
}
.td-rt-item:disabled .td-rt-code,
.td-rt-item:disabled .td-rt-times {
    opacity: 0.45;
}
.td-rt-code {
    min-width: 52px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--tr-primary-light);
    color: var(--tr-primary);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}
.td-rt-times {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.td-rt-time {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.td-rt-time sup {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--tr-primary);
}
.td-rt-line {
    flex: 1;
    position: relative;
    min-width: 40px;
    height: 1.5px;
    background: #cbd5e1;
}
.td-rt-line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -3px;
    border: 4px solid transparent;
    border-left: 6px solid #cbd5e1;
    border-right: none;
}
.td-rt-line span {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--tr-text-muted);
    white-space: nowrap;
}
.td-rt-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--tr-primary);
    white-space: nowrap;
}
.td-rt-price small {
    font-size: 11px;
    font-weight: 500;
    color: var(--tr-text-muted);
}
.td-rt-price i {
    font-size: 11px;
    transition: transform 0.15s ease;
}
.td-rt-item:hover .td-rt-price i {
    transform: translateX(3px);
}
.td-rt-reason {
    max-width: 130px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}
.td-rt-skeleton {
    height: 66px;
    flex: 0 0 66px;
    border-radius: 14px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: tdRtShimmer 1.2s linear infinite;
}
@keyframes tdRtShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.td-rt-msg {
    padding: 28px 16px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tr-text-muted);
}
.td-rt-msg i {
    display: block;
    margin-bottom: 8px;
    font-size: 26px;
    color: #cbd5e1;
}

@media (max-width: 768px) {
    /* Mobile: toàn màn hình, header đứng yên, thân cuộn */
    #tdAddReturnModal {
        padding: 0;
    }
    #tdAddReturnModal .td-rt-box {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }
    #tdAddReturnModal .td-rt-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .td-rt-list {
        max-height: none;
        overflow: visible;
    }
    .td-rt-head {
        flex: 0 0 auto;
        border-radius: 0;
        padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
        gap: 12px;
    }
    .td-rt-head-icon {
        flex-basis: 38px;
        height: 38px;
    }
    .td-rt-head h3 {
        font-size: 16px;
    }
    #tdAddReturnModal .td-rt-body {
        padding: 14px 16px 16px;
    }
    .td-rt-item {
        grid-template-columns: auto 1fr;
        gap: 10px 12px;
        padding: 12px 14px;
    }
    .td-rt-price,
    .td-rt-reason {
        grid-column: 1 / -1;
        justify-self: end;
    }
    .td-rt-reason {
        max-width: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .td-rt-item,
    .td-rt-skeleton {
        animation: none;
        transition: none;
    }
}