/*

 * =========================================================================

 * HỆ THỐNG GIAO DIỆN "AETHER SUITE" - PHIÊN BẢN 12.0 (REFINED)

 * Tác giả: Gemini Code Assist

 * Mục tiêu: Tái cấu trúc, tối ưu hóa, đảm bảo tính nhất quán và dễ bảo trì,

 *          mang lại trải nghiệm người dùng đẳng cấp.

 * =========================================================================

 */



/* ==========================================================================

   1. BIẾN VÀ THIẾT LẬP CƠ BẢN (VARIABLES & BASE SETUP)

   ========================================================================== */

:root {
    /* --- BẢNG MÀU "AETHERIAL GLOW" (PREMIUM) --- */
    --bg-main: #f0f4f8;
    /* Xanh xám rất nhạt, sang trọng hơn trắng thuần */
    --bg-card: rgba(255, 255, 255, 0.95);
    /* Hiệu ứng kính mờ nhẹ */
    --bg-header: rgba(255, 255, 255, 0.85);
    --bg-input: #ffffff;
    --bg-hover: #f1f5f9;

    --border-color: #e2e8f0;
    --border-color-light: #f1f5f9;

    --text-primary: #0f172a;
    /* Đậm hơn, rõ nét hơn */
    --text-secondary: #64748b;
    --text-placeholder: #94a3b8;

    /* Màu thương hiệu & Nhấn */
    --primary-accent: #3b82f6;
    /* Xanh dương hiện đại (Tailwind Blue 500) */
    --primary-accent-hover: #2563eb;
    --primary-accent-light: #eff6ff;
    --youth-union-blue: #1488DB;

    /* Trạng thái */
    --danger-color: #ef4444;
    --danger-light: #fef2f2;
    --success-color: #22c55e;
    --success-light: #f0fdf4;
    --warning-color: #f59e0b;
    --warning-light: #fffbeb;

    /* VIP & Premium */
    --vip-gold: #d97706;
    --vip-grad-1: #fcd34d;
    --vip-grad-2: #f59e0b;
    --vip-grad-3: #b45309;

    /* Typography */
    --font-main: 'Be Vietnam Pro', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    /* Font code xịn hơn */

    /* Shadows & Effects (Depth System) */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glance: 0 0 0 4px rgba(59, 130, 246, 0.15);
    /* Focus ring */

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Mượt mà hơn */
    --backdrop-blur: blur(12px);

    /* Sizing */
    --radius-md: 0.75rem;
    /* Bo tròn nhiều hơn (Apple style) */
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --header-height: 80px;
}

body[data-theme="dark"] {
    /* --- BẢNG MÀU "MIDNIGHT NEON" --- */
    --bg-main: #0f172a;
    /* Slate 900 */
    --bg-card: #1e293b;
    /* Slate 800 */
    --bg-header: rgba(15, 23, 42, 0.85);
    --bg-input: #334155;
    --bg-hover: #334155;

    --border-color: #334155;
    --border-color-light: #1e293b;

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-placeholder: #64748b;

    --primary-accent: #38bdf8;
    /* Sky 400 - Sáng hơn trên nền tối */
    --primary-accent-hover: #0ea5e9;
    --primary-accent-light: rgba(56, 189, 248, 0.1);

    --danger-color: #f87171;
    --danger-light: rgba(239, 68, 68, 0.1);
    --success-color: #4ade80;
    --success-light: rgba(74, 222, 128, 0.1);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: var(--font-main);

    font-size: 16px;

    line-height: 1.6;

    background: var(--bg-main);

    color: var(--text-primary);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    transition: background-color 0.3s, color 0.3s;

}



.container {

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



a {

    color: var(--primary-accent);

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



/* ==========================================================================

   2. BỐ CỤC CHÍNH (LAYOUT)

   ========================================================================== */

.app-header {

    background-color: var(--bg-header);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--border-color);

    box-shadow: var(--shadow-sm);

    padding: 1.25rem 0;

}



.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

}



.header-title {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.header-title .logo {

    width: 45px;

    height: 45px;

    border-radius: 8px;

}



.header-title .subtitle {

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.header-title h1 {

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.2;

}



.header-controls {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.main-navigation {

    background-color: var(--bg-card);

    border-bottom: 1px solid var(--border-color);

    box-shadow: var(--shadow-sm);

}



.main-navigation .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.main-navigation ul {

    list-style: none;

    display: flex;

}



.main-navigation ul a {

    display: block;

    padding: 0.9rem 1.2rem;

    text-decoration: none;

    color: var(--text-secondary);

    font-weight: 600;

    border-bottom: 3px solid transparent;

    transition: var(--transition);

}



.main-navigation ul a:hover {

    color: var(--primary-accent);

    background-color: var(--bg-hover);

}



.main-navigation ul a.active {

    color: var(--primary-accent);

    border-bottom-color: var(--primary-accent);

}



.nav-extra {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    font-size: 0.9rem;

    color: var(--text-secondary);

}



@media (min-width: 769px) {



    /* Header không còn bám dính theo yêu cầu */

    .app-header {

        position: relative;

    }



    .main-navigation {

        position: relative;

        top: 0;

    }

}



.main-grid {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 1.5rem;

    margin-top: 1.5rem;

    align-items: start;

}



.main-column {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.view-switcher-container {

    position: relative;

    display: grid;

}



.view-content {

    grid-area: 1 / 1;

    transition: opacity 0.4s ease, transform 0.4s ease;

}



.view-content.is-hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
}



.app-footer {

    border-top: 1px solid var(--border-color);

    margin-top: 3rem;

    padding: 2rem 0;

    text-align: center;

    color: var(--text-secondary);

    font-size: 0.9rem;

}



/* ==========================================================================

   3. CÁC THÀNH PHẦN CHUNG (COMPONENTS)

   ========================================================================== */

.card {

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

    display: flex;

    flex-direction: column;

}



.card:hover {

    box-shadow: var(--shadow-md);

    transform: translateY(-3px);

}



.card__header {

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border-color-light);

    font-size: 1.1rem;

    font-weight: 700;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-shrink: 0;

}



.card__body {

    padding: 1.5rem;

    flex-grow: 1;

}



.card__footer {

    padding: 1rem 1.5rem;

    border-top: 1px solid var(--border-color);

    background-color: var(--bg-hover);

    flex-shrink: 0;

}



.input-wrapper {

    position: relative;

}



.input-wrapper input,

.input-wrapper select,

.input-wrapper textarea {

    width: 100%;

    padding: 0.8rem 1rem;

    font-size: 1rem;

    background-color: var(--bg-input);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    color: var(--text-primary);

    transition: var(--transition);

    font-family: var(--font-main);

}



.input-wrapper input::placeholder,

.input-wrapper textarea::placeholder {

    color: var(--text-placeholder);

}



.input-wrapper textarea {

    resize: vertical;

    min-height: 60px;

}



.input-wrapper input:focus,

.input-wrapper textarea:focus {

    outline: none;

    border-color: var(--primary-accent);

    box-shadow: 0 0 0 4px var(--primary-accent-light);

}



/* NÂNG CẤP: Thay đổi placeholder cho ô lọc danh sách */

#filter-input::placeholder {

    font-style: italic;

}



.icon-btn {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    border-radius: var(--radius-md);

    border: 1px solid var(--border-color);

    background-color: var(--bg-card);

    color: var(--text-secondary);

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    justify-content: center;

}



.icon-btn:hover:not(:disabled) {

    background-color: var(--primary-accent-light);

    color: var(--primary-accent);

    border-color: var(--primary-accent);

}



.icon-btn.active {

    color: var(--danger-color);

    background-color: var(--danger-light);

    border-color: var(--danger-color);

    animation: pulse-mic 1.5s infinite;

}



@keyframes pulse-mic {



    0%,

    100% {

        box-shadow: 0 0 0 0 var(--danger-light);

    }



    50% {

        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);

    }

}



.action-button {

    width: 100%;

    padding: 1rem;

    border: none;

    border-radius: var(--radius-md);

    color: white;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    position: relative;

    overflow: hidden;

}



.action-button:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

}



.action-button:active:not(:disabled) {

    transform: translateY(0);

    box-shadow: var(--shadow-md);

}



.action-button:disabled {

    background: var(--border-color) !important;

    color: var(--text-secondary) !important;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}



/* Hiệu ứng vệt sáng khi hover (Chuyển từ index.html vào) */

.action-button::after {

    content: '';

    position: absolute;

    top: 0;

    left: -150%;

    width: 50%;

    height: 100%;

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);

    transform: skewX(-25deg);

    pointer-events: none;

    /* Quan trọng: không để hiệu ứng chặn click */

}



.action-button:hover::after {

    animation: shine-effect 0.8s ease-out;

}



@keyframes shine-effect {

    from {

        left: -150%;

    }



    to {

        left: 150%;

    }

}



.action-button:active:not(:disabled) {

    transform: translateY(0);

    box-shadow: var(--shadow-md);

}



.action-button:disabled {

    background: var(--border-color) !important;

    color: var(--text-secondary) !important;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}



.btn-icon-wrapper {

    position: relative;

    width: 20px;

    height: 20px;

    transition: var(--transition);

}



.btn-icon {

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    transform: translateY(10px) scale(0.8);

    transition: var(--transition);

}



.btn--check-in .icon--check-in,

.btn--check-out .icon--check-out,

.btn--reprint .icon--reprint,

.btn--view-ticket .icon--view-ticket {

    opacity: 1;

    transform: translateY(0) scale(1);
}

/* NÂNG CẤP: Nút Xem vé màu Xanh (Info) để phân biệt với Lấy xe (Đỏ) */
.btn--view-ticket {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
}

.btn--view-ticket:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.5), 0 4px 6px -2px rgba(59, 130, 246, 0.3);
}



.secondary-action-wrapper {

    margin-top: 1rem;

    margin-bottom: 1rem;

    text-align: center;

}



.secondary-action-btn {

    background: none;

    border: none;

    color: var(--text-secondary);

    font-weight: 600;

    cursor: pointer;

    border-bottom: 1px dashed var(--text-secondary);

    transition: var(--transition);

}



.secondary-action-btn:hover {

    color: var(--primary-accent);

    border-bottom-color: var(--primary-accent);

}



.action-alert-box {

    padding: 1rem;

    margin-bottom: 1rem;

    border-radius: var(--radius-md);

    border-left: 4px solid;

    animation: fadeIn 0.3s ease-out;

}



.action-alert-box.alert-warning {

    background-color: var(--warning-light);

    border-color: var(--warning-color);

    color: var(--warning-color);

}



.action-alert-box.alert-block {

    background-color: var(--danger-light);

    border-color: var(--danger-color);

    color: var(--danger-color);

}



.action-alert-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 700;

    font-size: 1rem;

    margin-bottom: 0.25rem;

}



.action-alert-reason {

    font-weight: 500;

    color: var(--text-primary);

}



.plate-suggestions {

    /* SỬA LỖI: Chuyển sang position relative để không che các phần tử khác */

    position: relative;

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

    margin-top: 0.5rem;

    width: 100%;

    z-index: 1000;

    max-height: 200px;

    overflow-y: auto;

    opacity: 0;

    transform: translateY(-10px);

    transition: opacity 0.2s ease, transform 0.2s ease;

    display: none;

    /* Dùng display none để không chiếm không gian khi ẩn */

}



.plate-suggestions.visible {

    opacity: 1;

    transform: translateY(0);

    display: block;

}



.suggestion-item {

    padding: 0.75rem 1.2rem;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.suggestion-item:hover {

    background-color: var(--primary-accent-light);

}



.suggestion-item .vip-star {

    color: var(--vip-gold);

    font-size: 1.2rem;

}



/* Button Variants */

.btn--check-in {

    background-color: var(--primary-accent);

}



.btn--check-out {

    background-color: var(--danger-color);

}



.btn--view-ticket,

.btn--reprint {

    background-color: #4b5563;

}



.btn--secondary {

    background-color: var(--bg-main);

    color: var(--text-primary);

    border: 1px solid var(--border-color);

}



.btn--secondary:hover {

    background-color: var(--bg-hover);

}



.vip-checkbox-wrapper {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem;

    background-color: var(--vip-gold-light);

    border: 1px solid var(--vip-gold);

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: var(--transition);

}



.vip-checkbox-wrapper:hover {

    background-color: var(--vip-gold);

    color: white;

}



.vip-checkbox-wrapper:hover label {

    color: white;

}



.vip-checkbox-wrapper input {

    width: 16px;

    height: 16px;

    accent-color: var(--vip-gold);

}



.vip-checkbox-wrapper label {

    font-weight: 600;

    color: var(--vip-gold);

    transition: var(--transition);

}



.change-location-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background-color: transparent;

    border: 1px solid transparent;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-secondary);

    cursor: pointer;

    transition: var(--transition);

}



.change-location-btn:hover {

    background-color: var(--bg-hover);

    border-color: var(--border-color);

    color: var(--text-primary);

}



.status-badge {

    font-size: 0.8rem;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 20px;

    color: white;

}



.status-badge.parking {

    background-color: var(--success-color);

}



.status-badge.departed {

    background-color: var(--text-secondary);

}



/* Huy hiệu trạng thái thu phí */

.fee-status-badge {

    font-size: 0.8rem;

    font-weight: 700;

    padding: 3px 10px;

    border-radius: 20px;

    margin-left: 8px;

    vertical-align: middle;

}



.fee-status-badge.free {

    background-color: var(--success-light);

    color: var(--success-color);

}



.fee-status-badge.paid {

    background-color: var(--warning-light);

    color: var(--warning-color);

}



.free-badge {

    color: var(--success-color);

    font-weight: 800;

    font-size: 1.2rem !important;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* ==========================================================================

   4. CÁC THÀNH PHẦN CỤ THỂ (SPECIFIC COMPONENTS)

   ========================================================================== */

.date-selector {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background-color: var(--bg-hover);

    padding: 0.5rem 0.75rem;

    border-radius: var(--radius-md);

    border: 1px solid var(--border-color);

}



.date-selector input {

    padding: 0.25rem;

    border: none;

    background: transparent;

    color: var(--text-primary);

}



body[data-theme="dark"] .date-selector input::-webkit-calendar-picker-indicator {

    filter: invert(1);

}



.theme-switch input {

    display: none;

}



.theme-switch .slider {

    background-color: var(--border-color);

    cursor: pointer;

    height: 24px;

    width: 44px;

    position: relative;

    transition: .4s;

    border-radius: 24px;

}



.theme-switch .slider:before {

    background-color: #fff;

    content: "";

    height: 16px;

    width: 16px;

    position: absolute;

    left: 4px;

    bottom: 4px;

    transition: .4s;

    border-radius: 50%;

    box-shadow: var(--shadow-sm);

}



input:checked+.slider {

    background-color: var(--primary-accent);

}



input:checked+.slider:before {

    transform: translateX(20px);

}



.history-list {

    list-style: none;

    margin-top: 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.history-item {

    background-color: var(--bg-hover);

    padding: 0.85rem 1.25rem;

    border-radius: var(--radius-md);

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: 1px solid var(--border-color-light);

}



.history-details {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.history-time,

.history-duration {

    font-size: 0.9rem;

}



.history-location {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-secondary);

}



.list-filter {

    max-width: 300px;

    flex-grow: 1;

}



/* ==========================================================================

   GIAO DIỆN DANH SÁCH XE (VEHICLE LIST V6)

   ========================================================================== */

/* NÂNG CẤP: Chuyển sang bố cục Grid để các thẻ tự động sắp xếp và có kích thước hợp lý */

.vehicle-list-container {

    max-height: 55vh;

    overflow-y: auto;

    padding-right: 8px;

    display: grid;

    /* Chuyển sang Grid */

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    /* Bố cục lưới tự động */

    gap: 0.75rem;

}



.vehicle-item-v5 {

    display: grid;

    grid-template-columns: 2fr 1fr 1.5fr 1fr;

    /* Plate, Status, Time, Duration */

    align-items: center;

    gap: 1rem;

    padding: 1rem 1.25rem;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    background-color: var(--bg-card);

    cursor: pointer;

    transition: all 0.2s ease-out;

    animation: fadeIn 0.4s ease-out;

}



/* TỐI ƯU HÓA: Thay thế box-shadow bằng outline để cuộn mượt hơn */

.vehicle-item-v5:hover {

    transform: translateY(-3px) scale(1.01);

    outline: 2px solid var(--primary-accent);

    outline-offset: -2px;

    border-color: var(--primary-accent);

    background-color: var(--primary-accent-light);

}



.vehicle-v5__cell {

    display: flex;

    flex-direction: column;

    min-width: 0;

    /* Ngăn chặn co giãn ngoài ý muốn */

}



.vehicle-v5__plate {

    flex-direction: row;

    align-items: center;

    gap: 0.5rem;

}



.vehicle-v5__plate-text {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--text-primary);

    white-space: nowrap;

}



.vehicle-v5__icons {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.vehicle-v5__time,

.vehicle-v5__duration {

    text-align: right;

}



.time-label {

    font-size: 0.8rem;

    color: var(--text-secondary);

}



.time-value {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-primary);

}



/* KHÔI PHỤC: Trạng thái rời bãi của V5 */

.vehicle-item-v5.departed {

    opacity: 0.65;

    background-color: var(--bg-hover);

}



.vehicle-item-v5.departed:hover {

    opacity: 1;

}



/* Badge trạng thái V5 */

.status-badge-v5 {

    font-size: 0.8rem;

    font-weight: 700;

    padding: 5px 12px;

    border-radius: 20px;

    text-align: center;

    white-space: nowrap;

}



.status--parking {

    background-color: var(--success-light);

    color: var(--success-color);

}



.status--departed {

    background-color: var(--bg-hover);

    color: var(--text-secondary);

}



@keyframes blink {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.3;

    }

}



.skeleton-item {

    background-color: var(--bg-hover);

    border-radius: var(--radius-md);

    height: 70px;

    margin-bottom: 0.75rem;

    animation: pulse-skeleton 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



@keyframes pulse-skeleton {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}



.empty-state {

    text-align: center;

    padding: 4rem 1rem;

    color: var(--text-secondary);

}



/* KHÔI PHỤC: Hiệu ứng pháo hoa cho modal xác nhận */

.confetti {

    position: absolute;

    width: 10px;

    height: 10px;

    background-color: #f00;

    opacity: 0;

    animation: confetti-fall 3s ease-out forwards;

}



@keyframes confetti-fall {

    0% {

        transform: translateY(-10vh) rotate(0deg);

        opacity: 1;

    }



    100% {

        transform: translateY(100vh) rotate(720deg);

        opacity: 0;

    }

}



/* ==========================================================================

   5. MODALS, TOASTS & OVERLAYS

   ========================================================================== */

.modal-overlay {

    position: fixed;

    z-index: 1000;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(15, 23, 42, 0.6);

    display: flex;

    align-items: center;

    justify-content: center;

    backdrop-filter: blur(5px);

    opacity: 0;

    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    pointer-events: none;

}



.modal-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.modal-content {

    background-color: var(--bg-card);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    max-width: 90vw;

    /* YÊU CẦU MỚI: Thay đổi hiệu ứng xuất hiện */

    transform: translateY(30px);

    opacity: 0;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    max-height: 90vh;

    overflow: hidden;

}



.modal-overlay.active .modal-content {

    /* YÊU CẦU MỚI: Thay đổi hiệu ứng xuất hiện */

    transform: translateY(0);

    opacity: 1;

}



.modal-header {

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--border-color);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-shrink: 0;

    position: relative;

    overflow: hidden;

    background-color: var(--bg-hover);

}



.modal-header::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 100%;

    background: linear-gradient(120deg, var(--primary-accent), var(--youth-union-blue), var(--success-color));

    background-size: 200% 200%;

    opacity: 0.1;

    animation: aurora-flow 10s ease infinite;

    z-index: 0;

}



.modal-header h2 {

    font-size: 1.25rem;

    font-weight: 600;

    margin: 0;

}



.modal-header>* {

    position: relative;

    z-index: 1;

}



.modal-close-btn {

    background: none;

    border: none;

    font-size: 1.8rem;

    cursor: pointer;

    color: var(--text-secondary);

    line-height: 1;

    transition: var(--transition);

    border-radius: 50%;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.modal-close-btn:hover {

    background-color: var(--border-color);

    transform: rotate(90deg);

}



.modal-body {

    padding: 1.5rem;

    overflow: auto;

    flex: 1 1 auto;

}



.modal-footer {

    padding: 1rem 1.5rem;

    border-top: 1px solid var(--border-color);

    display: flex;

    justify-content: flex-end;

    gap: 0.75rem;

    background-color: var(--bg-hover);

    flex-shrink: 0;

}



@keyframes aurora-flow {

    0% {

        background-position: 0% 50%
    }



    50% {

        background-position: 100% 50%
    }



    100% {

        background-position: 0% 50%
    }

}



/* Global Alert (in modal) */

.global-alert-wrapper {

    text-align: center;

}



.global-alert-plate-box {

    padding: 1.5rem 1rem;

    border-radius: var(--radius-md);

    margin-bottom: 1.5rem;

    display: inline-block;

    width: 100%;

}



.alert-bg-warning {

    background-color: var(--warning-light);

}



.alert-bg-block {

    background-color: var(--danger-light);

}



.global-alert-plate {

    font-family: monospace;

    font-size: 3rem;

    font-weight: 700;

    color: var(--text-primary);

}



.global-alert-reason {

    font-size: 1.1rem;

    color: var(--text-secondary);

}



/* Image Viewer Modal */

.image-viewer-modal .modal-content {

    max-width: 90vw;

    max-height: 95vh;

    background-color: transparent;

    box-shadow: none;

    overflow: visible;

    width: auto;

    /* Sửa lỗi: Để modal co giãn theo ảnh */

}



.image-viewer-container {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    /* Sửa lỗi: Đảm bảo container chiếm hết không gian */

}



.image-viewer-container img {

    max-width: 90vw;

    /* Sửa lỗi: Giới hạn chiều rộng tối đa */

    max-height: 85vh;

    /* Sửa lỗi: Giới hạn chiều cao tối đa */

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

    object-fit: contain;

}



/* ==========================================================================

   GIAO DIỆN DANH SÁCH XE (VEHICLE LIST V7 - "INFO CARD")

   ========================================================================== */

.vehicle-item-v7 {

    display: flex;

    flex-direction: column;

    padding: 1rem 1.25rem;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    background-color: var(--bg-card);

    cursor: pointer;

    transition: all 0.2s ease-out;

    animation: fadeIn 0.4s ease-out;

    position: relative;

    overflow: hidden;

    padding-left: calc(1.25rem + 8px);

    /* Tạo khoảng trống cho vạch màu */

}



.vehicle-item-v7:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

    border-color: var(--primary-accent);

}



.vehicle-item-v7::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background-color: var(--success-color);

    transition: var(--transition);

    border-top-left-radius: var(--radius-md);

    border-bottom-left-radius: var(--radius-md);

}



.vehicle-item-v7.departed::before {

    background-color: var(--text-secondary);

}



.vehicle-item-v7.departed {

    opacity: 0.7;

}



.v7-main {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 0.75rem;

}



.v7-plate {

    font-family: var(--font-mono);

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-primary);

}



.v7-status-icons {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.v7-icon {

    display: flex;

}



.v7-alert-icon.alert-warning {

    color: var(--warning-color);

}



.v7-alert-icon.alert-block {

    color: var(--danger-color);

}



.v7-vip-icon {

    color: var(--vip-gold);

}



.v7-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.v7-meta-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



/* ==========================================================================

   GIAO DIỆN DANH SÁCH XE (VEHICLE LIST V7 - "INFO CARD")

   ========================================================================== */





#toast-container {

    position: fixed;

    bottom: 1.5rem;

    right: 1.5rem;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.toast {

    padding: 1rem 1.5rem;

    border-radius: var(--radius-md);

    color: white;

    box-shadow: var(--shadow-lg);

    display: flex;

    align-items: center;

    gap: 1rem;

    font-weight: 600;

    animation: slideUpToast 0.4s ease, fadeOutToast 0.5s ease 3.5s forwards;

}



.toast--success {

    background-color: var(--success-color);

}



.toast--error {

    background-color: var(--danger-color);

}



.toast--info {

    background-color: var(--primary-accent);

}



@keyframes slideUpToast {

    from {

        transform: translateY(100%);

        opacity: 0;

    }



    to {

        transform: translateY(0);

        opacity: 1;

    }

}



@keyframes fadeOutToast {

    from {

        opacity: 1;

    }



    to {

        opacity: 0;

    }

}



/* Location Modal */

.modal-subtitle {

    font-size: 1rem;

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

    text-align: center;

}



.location-card-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.location-card {

    background-color: var(--bg-hover);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 1.25rem;

    cursor: pointer;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}



.location-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

    border-color: var(--primary-accent);

}



.location-card.recommended {

    border-color: var(--primary-accent);

    background-color: var(--primary-accent-light);

}



.recommended-badge {

    position: absolute;

    top: 0;

    right: 0;

    background-color: var(--primary-accent);

    color: white;

    padding: 3px 15px;

    font-size: 0.8rem;

    font-weight: 700;

    border-bottom-left-radius: var(--radius-md);

}



.location-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.location-card-header h3 {

    font-size: 1.2rem;

    font-weight: 700;

    margin: 0;

}



.distance-tag {

    background-color: var(--bg-card);

    color: var(--text-secondary);

    font-size: 0.85rem;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 20px;

}



.location-card-body {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.location-detail {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--text-secondary);

}



.location-detail svg {

    flex-shrink: 0;

}



/* ==========================================================================

   6. MODAL THANH TOÁN (PAYMENT FLOW)

   ========================================================================== */

.payment-flow-v4 {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.payment-header-info {

    background-color: var(--bg-hover);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    text-align: center;

    border: 1px solid var(--border-color);

    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.05);

    margin: -0.5rem -0.5rem 0;

    /* Kéo nhẹ ra ngoài để tạo cảm giác nổi khối */

}



.payment-header-info .summary-label {

    font-size: 1rem;

    color: var(--text-secondary);

    font-weight: 500;

}



.payment-total {

    margin-top: 0.5rem;

}



.fee-label {

    font-size: 1rem;

    color: var(--text-secondary);

    font-weight: 600;

    text-transform: uppercase;

}



.fee-display {

    font-family: var(--font-mono);

    font-size: 3.5rem;

    font-weight: 800;

    color: var(--danger-color);

    line-height: 1;

    animation: floatUp 0.5s ease-out;

}



.fee-display span {

    font-size: 1.8rem;

    vertical-align: super;

    margin-left: 4px;

}



.payment-step {

    display: none;

    /* Ẩn tất cả các bước theo mặc định */

    flex-direction: column;

    gap: 1.5rem;

    animation: fadeIn 0.4s ease-out;

}



.payment-step.active {

    display: flex;

    /* Chỉ hiện bước active */

}



.action-prompt {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-primary);

    text-align: center;

}



.payment-method-options {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    width: 100%;

}



.payment-method-btn {

    background-color: var(--bg-hover);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 1.5rem 1rem;

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-primary);

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    box-shadow: var(--shadow-sm);

}



.payment-method-btn:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);

}



.payment-method-btn.method-cash:hover {

    background-color: var(--success-light);

    border-color: var(--success-color);

    color: var(--success-color);

}



.payment-method-btn.method-qr:hover {

    background-color: var(--primary-accent-light);

    border-color: var(--primary-accent);

    color: var(--primary-accent);

}



.payment-method-icon-wrapper {

    width: 48px;

    height: 48px;

    position: relative;

}



.payment-method-icon {

    width: 100%;

    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition: var(--transition);

}



.payment-method-btn:hover .payment-method-icon {

    fill: var(--primary-accent);

}



.payment-method-btn.method-cash:hover .payment-method-icon {

    fill: var(--success-color);

}



/* ==========================================================================

   ICON ĐỘNG V5 - TỐI GIẢN & TINH TẾ

   ========================================================================== */



/* Icon QR động: Đường quét mượt mà */

.icon-qr-animated::after {

    content: '';

    position: absolute;

    left: 15%;

    right: 15%;

    top: 15%;

    height: 2px;

    background: var(--primary-accent);

    box-shadow: 0 0 5px var(--primary-accent);

    border-radius: 2px;

    animation: qr-scan-line 2.5s ease-in-out infinite;

}



@keyframes qr-scan-line {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(16px);

    }

}



/* Icon Tiền mặt động: Hiệu ứng "con mắt" nhìn */

.icon-cash-animated path:last-child {

    animation: cash-pupil-look 4s ease-in-out infinite;

    transform-origin: center;

}



@keyframes cash-pupil-look {



    0%,

    100% {

        transform: translate(0, 0);

    }



    25% {

        transform: translate(-2px, -1px);

    }



    50% {

        transform: translate(0, 0);

    }



    75% {

        transform: translate(2px, 1px);

    }

}



.payment-display-area {

    display: none;

    /* Ẩn các vùng hiển thị chi tiết */

    text-align: center;

    animation: fadeIn 0.4s ease-out;

}



.display-instruction {

    font-size: 1rem;

    font-weight: 500;

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

}



.payment-qr-section {

    text-align: center;

}



.qr-wrapper {

    display: inline-block;

}



.qr-wrapper img {

    max-width: 250px;

    width: 100%;

    height: auto;

    border-radius: var(--radius-md);

    border: 1px solid var(--border-color);

    padding: 0.5rem;

    background-color: white;

    box-shadow: var(--shadow-sm);

}



.qr-memo {

    font-size: 0.9rem;

    color: var(--text-secondary);

    margin-top: 1rem;

}



.cash-animation-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 250px;

    /* Đảm bảo chiều cao tương đương vùng QR */

    overflow: hidden;

}



.cash-stack-icon {

    width: 180px;

    height: auto;

}



.cash-stack-icon .cash-stack-bill {

    fill: var(--success-light);

    stroke: var(--success-color);

    stroke-width: 2;

    animation: cash-stack-shuffle 3s ease-in-out infinite;

}



.cash-stack-icon .cash-stack-bill:nth-child(2) {

    animation-delay: -0.1s;

}



.cash-stack-icon .cash-stack-bill:nth-child(1) {

    animation-delay: -0.2s;

}



@keyframes cash-stack-shuffle {



    0%,

    100% {

        transform: translateY(0);

    }



    25% {

        transform: translateY(-3px);

    }



    50% {

        transform: translateY(0);

    }



    75% {

        transform: translateY(3px);

    }

}



/* Payment Confirmation */

.payment-confirmation-overlay {

    position: relative;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--bg-card);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.2s ease;

    z-index: 10;

    pointer-events: none;

}



.payment-confirmation-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.confirmation-text {

    font-size: 1.5rem;

    font-weight: 700;

    margin-top: 1rem;

    animation: fade-in-text 0.4s ease-in 0.5s forwards;

    opacity: 0;

}



@keyframes fade-in-text {

    to {

        opacity: 1;

    }

}



.confirmation-icon-wrapper {

    width: 100px;

    height: 100px;

    display: none;

}



.confirmation-icon-wrapper.active {

    display: block;

    animation: scale-up 0.4s ease-in-out;

}



.checkmark__circle {

    stroke-dasharray: 166;

    stroke-dashoffset: 166;

    stroke-width: 3;

    stroke: var(--success-color);

    fill: none;

    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}



.checkmark__check {

    transform-origin: 50% 50%;

    stroke-dasharray: 48;

    stroke-dashoffset: 48;

    stroke-width: 3;

    stroke: var(--success-color);

    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;

}



.cross__circle {

    stroke-dasharray: 166;

    stroke-dashoffset: 166;

    stroke-width: 3;

    stroke: var(--danger-color);

    fill: none;

    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}



.cross__path {

    transform-origin: 50% 50%;

    stroke-dasharray: 48;

    stroke-dashoffset: 48;

    stroke-width: 4;

    stroke: var(--danger-color);

    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;

}



@keyframes scale-up {

    0% {

        transform: scale(0.7);

    }



    45% {

        transform: scale(1.05);

    }



    80% {

        transform: scale(0.95);

    }



    100% {

        transform: scale(1);

    }

}



@keyframes stroke {

    100% {

        stroke-dashoffset: 0;

    }

}



/* QR Scanner */

.qr-scanner-body {

    position: relative;

    width: 100%;

    height: auto;

    overflow: hidden;

    border-radius: var(--radius-md);

    background-color: #000;

}



#camera-feed {

    width: 100%;

    height: auto;

    display: block;

}



.scanner-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    box-shadow: inset 0 0 0 500px rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

}



.scanner-viewfinder {

    width: 65%;

    height: 65%;

    position: relative;

    border: 2px solid rgba(255, 255, 255, 0.5);

    border-radius: var(--radius-md);

    --corner-size: 30px;

    --corner-thickness: 4px;

}



.scanner-viewfinder .corner {

    position: absolute;

    width: var(--corner-size);

    height: var(--corner-size);

    border-color: var(--primary-accent);

    border-style: solid;

    animation: pulse-corners 2s infinite ease-in-out;

}



.scanner-viewfinder .corner-tl {

    top: -2px;

    left: -2px;

    border-width: var(--corner-thickness) 0 0 var(--corner-thickness);

    border-top-left-radius: var(--radius-md);

}



.scanner-viewfinder .corner-tr {

    top: -2px;

    right: -2px;

    border-width: var(--corner-thickness) var(--corner-thickness) 0 0;

    border-top-right-radius: var(--radius-md);

}



.scanner-viewfinder .corner-bl {

    bottom: -2px;

    left: -2px;

    border-width: 0 0 var(--corner-thickness) var(--corner-thickness);

    border-bottom-left-radius: var(--radius-md);

}



.scanner-viewfinder .corner-br {

    bottom: -2px;

    right: -2px;

    border-width: 0 var(--corner-thickness) var(--corner-thickness) 0;

    border-bottom-right-radius: var(--radius-md);

}



@keyframes pulse-corners {



    0%,

    100% {

        transform: scale(1);

        opacity: 1;

    }



    50% {

        transform: scale(0.9);

        opacity: 0.7;

    }

}



.scanner-feedback-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(22, 163, 74, 0.85);

    backdrop-filter: blur(3px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: white;

    text-align: center;

    z-index: 20;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

}



.scanner-feedback-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.feedback-icon {

    width: 60px;

    height: 60px;

    margin-bottom: 1rem;

}



.feedback-icon .checkmark__circle {

    stroke: white;

    stroke-width: 3;

}



.feedback-icon .checkmark__check {

    stroke: white;

    stroke-width: 4;

}



.feedback-plate {

    font-family: monospace;

    font-size: 2rem;

    font-weight: 700;

}



/* Fireworks Effect */

.fireworks-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 9999;

    opacity: 1;

    /* Hiệu ứng pháo hoa sẽ tự biến mất */

}



.fireworks-container.active {

    opacity: 1;

}



.firework {

    position: absolute;

    /* Sửa lỗi: Thêm thuộc tính transform-origin */

    width: 6px;

    height: 6px;

    background-color: #fff;

    border-radius: 50%;

    opacity: 0;

}



.fireworks-container.active .firework {

    animation: firework-explode 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;

    /* Sửa lỗi: cú pháp animation */

}



.firework:nth-child(1) {

    top: 50%;

    left: 50%;

    animation-delay: 0s;

    background-color: #38bdf8;

}



.firework:nth-child(2) {

    top: 40%;

    left: 30%;

    animation-delay: 0.3s;

    background-color: #34d399;

}



.firework:nth-child(3) {

    top: 60%;

    left: 70%;

    animation-delay: 0.6s;

    background-color: #facc15;

}



@keyframes firework-explode {

    0% {

        transform: scale(0);

        opacity: 1;

    }



    100% {

        transform: scale(30);

        opacity: 0;

    }

}



@media print {

    body * {

        visibility: hidden;

    }



    #printable-area,

    #printable-area * {

        visibility: visible;

    }



    #printable-area {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

    }

}



/* ==========================================================================

   7. GIAO DIỆN ĐÁP ỨNG (RESPONSIVE)

   ========================================================================== */

@media (max-width: 1200px) {

    .main-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .container {

        padding: 0 1rem;

    }



    .header-container {

        flex-wrap: wrap;

    }



    .header-controls {

        width: 100%;

        justify-content: space-between;

        margin-top: 1rem;

    }



    .card__header {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }



    .main-navigation .container {

        flex-direction: column;

        align-items: stretch;

        gap: 0.5rem;

        padding-bottom: 0.5rem;

    }



    .main-navigation ul {

        justify-content: center;

    }



    .nav-extra {

        display: none;

    }

}



@media (max-width: 600px) {

    .container {

        padding: 0 0.75rem;

    }



    .modal-body,

    .modal-header,

    .modal-footer {

        padding: 1rem;

    }



    .main-input-group {

        flex-direction: column;

    }



    .main-input-group #search-term {

        text-align: left;

    }



    .vehicle-item-v6 {

        grid-template-columns: auto 1fr;

        gap: 0.75rem;

    }



    .v6-meta {

        grid-column: 2 / 3;

        justify-self: end;

        margin-top: 0.25rem;

    }



    .v6-time {

        display: none;

    }



    /* Ẩn bớt trên màn hình rất nhỏ */

}



@media (max-width: 480px) {

    .modal-content {

        max-width: 98vw;

    }



    .modal-header,

    .modal-footer,

    .modal-body {

        padding: 0.75rem;

    }



    .digital-pass__main-info {

        flex-direction: column;

        align-items: center;

        gap: 1.5rem;

    }



    .digital-pass__plate-section {

        text-align: center;

    }



    .digital-pass__plate {

        font-size: 2.2rem;

    }



    .digital-pass__qr-instruction {

        text-align: center;

        margin-top: 0.5rem;

    }

}



/* ==========================================================================

   8. MÀN HÌNH CHỜ (IDLE SCREEN)

   ========================================================================== */

.idle-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    z-index: 10010;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.7s ease;

}



.idle-screen.active {

    opacity: 1;

    pointer-events: auto;

}



.ad-video-player {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: translate(-50%, -50%);

}



.idle-overlay-content {

    position: absolute;

    bottom: 5%;

    left: 50%;

    transform: translateX(-50%);

    color: white;

    text-align: center;

    background-color: rgba(0, 0, 0, 0.4);

    padding: 1rem 2rem;

    border-radius: var(--radius-lg);

    backdrop-filter: blur(8px);

}



.idle-message {

    font-size: 1.5rem;

    font-weight: 600;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}



/* ==========================================================================

   9. PHÂN TRANG (PAGINATION)

   ========================================================================== */

.pagination-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.5rem;

    margin-top: 1.5rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color);

}



.pagination-btn {

    padding: 0.5rem 1rem;

    border: 1px solid var(--border-color);

    background-color: var(--bg-card);

    color: var(--text-secondary);

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: var(--transition);

    font-weight: 600;

}



.pagination-btn:hover:not(:disabled) {

    background-color: var(--primary-accent-light);

    color: var(--primary-accent);

    border-color: var(--primary-accent);

}



.pagination-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.pagination-btn.active {

    background-color: var(--primary-accent);

    color: white;

    border-color: var(--primary-accent);

    font-weight: 700;

}



/* ==========================================================================

   10. CHỈ BÁO TRẠNG THÁI (INDICATORS)

   ========================================================================== */

#offline-indicator {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: var(--warning-color);

    color: var(--text-primary);

    text-align: center;

    padding: 0.5rem;

    font-weight: 600;

    z-index: 10001;

    transform: translateY(100%);

    transition: transform 0.4s ease;

    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

}



#offline-indicator.active {

    transform: translateY(0);

}



/* ==========================================================================

   11. MÀN HÌNH ĐĂNG NHẬP (LOGIN SCREEN)

   ========================================================================== */

.login-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    z-index: 10002;

    transition: opacity 0.5s ease;

}



.login-branding-panel {

    width: 55%;

    height: 100%;

    background-image: linear-gradient(to bottom right, var(--youth-union-blue), #153a73);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    padding: 3rem;

    text-align: center;

}



.branding-content {

    max-width: 500px;

    animation: floatUp 0.8s ease-out;

}



@keyframes floatUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.branding-logo {

    width: 80px;

    height: 80px;

    margin-bottom: 1rem;

    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));

}



.branding-content h1 {

    font-size: 2.2rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.branding-content p {

    font-size: 1.1rem;

    opacity: 0.8;

}



.login-form-panel {

    width: 45%;

    height: 100%;

    background-color: var(--bg-card);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 3rem;

}



.login-form-wrapper {

    width: 100%;

    max-width: 400px;

}



.login-form-wrapper h2 {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: var(--text-primary);

}



.form-subtitle {

    color: var(--text-secondary);

    margin-bottom: 2.5rem;

}



.form-group {

    margin-bottom: 1.25rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 600;

    font-size: 0.9rem;

}



.input-with-icon {

    position: relative;

}



.input-with-icon svg {

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-secondary);

    pointer-events: none;

    transition: var(--transition);

}



.input-with-icon input {

    padding-left: 3rem;

}



.input-with-icon input:focus+svg {

    color: var(--primary-accent);

}



.staff-info-display {

    background-color: var(--bg-hover);

    border-radius: var(--radius-md);

    padding: 1rem;

    margin-top: -0.5rem;

    margin-bottom: 1.25rem;

    border: 1px solid var(--border-color);

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transition: all 0.4s ease-out;

}



.staff-info-display.visible {

    max-height: 200px;

    opacity: 1;

}



.staff-info-display p {

    margin: 0;

    line-height: 1.4;

}



.staff-info-display .staff-name {

    font-weight: 700;

    font-size: 1.1rem;

}



.staff-info-display .staff-location {

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.form-error-message {

    color: var(--danger-color);

    margin-top: 1rem;

    text-align: center;

    font-weight: 500;

    min-height: 1.2em;

}



@media (max-width: 900px) {

    .login-branding-panel {

        display: none;

    }



    .login-form-panel {

        width: 100%;

    }

}



/* ==========================================================================

   12. WIDGET TIỆN ÍCH (WIDGETS)

   ========================================================================== */

.user-profile-widget {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0.5rem 1rem;

    background-color: var(--bg-hover);

    border: 1px solid var(--border-color);

    border-radius: 30px;

}



.user-profile-widget .user-icon {

    color: var(--primary-accent);

}



.user-profile-widget .user-name {

    font-weight: 600;

    color: var(--text-primary);

}



.user-profile-widget .logout-btn {

    background: none;

    border: none;

    cursor: pointer;

    color: var(--text-secondary);

    padding: 4px;

    display: flex;

    align-items: center;

    border-radius: 50%;

    transition: var(--transition);

}



.user-profile-widget .logout-btn:hover {

    background-color: var(--danger-light);

    color: var(--danger-color);

}



.user-profile-widget .admin-login-link {

    display: flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    font-weight: 600;

    color: var(--text-primary);

    transition: var(--transition);

}



.user-profile-widget .admin-login-link:hover {

    color: var(--primary-accent);

}



.clock-widget,

.weather-widget {

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text-secondary);

}



/* ==========================================================================

   12. BẢNG TIN NHANH (DASHBOARD)

   ========================================================================== */

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 1.5rem;

}



.gemini-stat-card {

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    position: relative;

    overflow: hidden;

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

}



.gemini-stat-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.gemini-stat-card__header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    width: 100%;

}



.gemini-stat-card__icon {

    background-color: var(--primary-accent-light);

    color: var(--primary-accent);

    border-radius: 12px;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.gemini-stat-card__icon svg {

    width: 24px;

    height: 24px;

}



.gemini-stat-card__label {

    font-size: 1rem;

    color: var(--text-primary);

    font-weight: 600;

}



.gemini-stat-card__value-wrapper {

    display: flex;

    align-items: baseline;

    line-height: 1;

    flex-grow: 1;

    padding-top: 1rem;

}



.gemini-stat-card__value {

    font-size: 3rem;

    font-weight: 700;

    color: var(--text-primary);

}



.gemini-stat-card__unit {

    font-size: 1.5rem;

    font-weight: 600;

    color: var(--text-secondary);

    margin-left: 0.5rem;

}



/* Tùy chỉnh màu sắc cho từng thẻ */

.gemini-stat-card[data-stat-id="vehicles"] .gemini-stat-card__icon {

    background-color: var(--primary-accent-light);

    color: var(--primary-accent);

}



.gemini-stat-card[data-stat-id="revenue"] .gemini-stat-card__icon {

    background-color: var(--success-light);

    color: var(--success-color);

}



.gemini-stat-card[data-stat-id="total"] .gemini-stat-card__icon {

    background-color: #eef2ff;

    color: #4f46e5;

}



.gemini-stat-card[data-stat-id="vip"] .gemini-stat-card__icon {

    background-color: var(--vip-gold-light);

    color: var(--vip-gold);

}



[data-theme="dark"] .gemini-stat-card[data-stat-id="vehicles"] .gemini-stat-card__icon {

    background-color: #1e3a8a;

    color: #60a5fa;

}



[data-theme="dark"] .gemini-stat-card[data-stat-id="revenue"] .gemini-stat-card__icon {

    background-color: #166534;

    color: #4ade80;

}



[data-theme="dark"] .gemini-stat-card[data-stat-id="total"] .gemini-stat-card__icon {

    background-color: #312e81;

    color: #818cf8;

}



[data-theme="dark"] .gemini-stat-card[data-stat-id="vip"] .gemini-stat-card__icon {

    background-color: #713f12;

    color: #fcd34d;

}



/* Hiệu ứng icon động khi hover */

.gemini-stat-card:hover .animated-icon {

    animation: icon-bounce 0.6s cubic-bezier(0.5, 0, 0.1, 1);

}



@keyframes icon-bounce {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-4px);

    }

}



.gemini-stat-card:hover .vip-icon {

    animation: icon-spin 0.8s cubic-bezier(0.5, 0, 0.1, 1);

}



@keyframes icon-spin {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



.gemini-stat-card:hover .revenue-icon path {

    animation: revenue-wave 1.5s ease-in-out infinite;

}



@keyframes revenue-wave {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-2px) scaleY(1.05);

    }

}



/* ==========================================================================

   14. FORM CHÍNH (MAIN FORM)

   ========================================================================== */

.action-hub-v1 {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    position: relative;

}



.input-with-button-wrapper {

    position: relative;

    flex-grow: 1;

}



.input-with-button-wrapper #search-term {

    padding-right: 60px;

    /* Tạo khoảng trống cho nút QR */

}



.input-with-button-wrapper #scan-qr-btn {

    position: absolute;

    top: 50%;

    right: 6px;

    transform: translateY(-50%);

    height: calc(100% - 12px);

    width: 48px;

}



.main-input-group {

    display: flex;

    gap: 0.75rem;

}



.main-input-group #search-term {

    flex-grow: 1;

}



.main-input-group .icon-btn {

    height: auto;

    /* Để nút co giãn theo chiều cao của input */

}



.action-hub-v1 #search-term {

    font-size: 1.5rem;

    padding: 1.25rem;

    text-align: center;

    text-transform: uppercase;

    font-family: var(--font-mono);

    font-weight: 700;

    letter-spacing: 2px;

}



.action-hub-prompt {

    text-align: center;

    font-weight: 600;

    color: var(--text-secondary);

    font-size: 0.9rem;

    text-transform: uppercase;

    margin-top: 0.5rem;

}



.action-hub-buttons {

    position: relative;

    height: 62px;

    /* Chiều cao của nút để không bị nhảy layout */

    overflow: hidden;

}



.action-hub-buttons .action-button {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;

}



/* Trạng thái mặc định: Hiện nút Gửi xe */

.action-hub-buttons .btn--check-in {

    transform: scale(1);

    opacity: 1;

}



.action-hub-buttons .btn--check-out {

    transform: scale(0.8) translate(50%, -50%);

    /* Di chuyển ra góc trên phải */

    opacity: 0;

    pointer-events: none;

}



/* Khi có class 'show-check-out': Hiện nút Lấy xe */

.action-hub-buttons.show-check-out .btn--check-in {

    transform: scale(0.8) translate(-50%, 50%);

    /* Di chuyển ra góc dưới trái */

    opacity: 0;

    pointer-events: none;

}



.action-hub-buttons.show-check-out .btn--check-out {

    transform: scale(1);

    opacity: 1;

    pointer-events: auto;

}



.action-hub-buttons .action-button {

    padding: 1.25rem;

    font-size: 1.1rem;

}



.action-hub-details {

    transition: all 0.4s ease;

    overflow: hidden;

}



.action-hub-details>div {

    animation: fadeIn 0.5s ease-out;

}



.form-details-wrapper {

    margin-top: 1.5rem;

    animation: fadeIn 0.4s ease-out;

}



.form-section-v2 {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



#info-display-section {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    margin-bottom: 1rem;

}



.info-display-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: var(--bg-hover);

    padding: 0.85rem 1.25rem;

    border-radius: var(--radius-md);

    border: 1px solid var(--border-color);

}



.info-display-item .label {

    color: var(--text-secondary);

    font-weight: 500;

}



.info-display-item .value {

    font-weight: 600;

    text-align: right;

}



.additional-info-group {

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    transition: var(--transition);

}



.additional-info-group[open] {

    border-color: var(--primary-accent);

    box-shadow: 0 0 0 4px var(--primary-accent-light);

}



.additional-info-group summary {

    padding: 0.75rem 1rem;

    font-weight: 600;

    cursor: pointer;

    list-style: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: var(--transition);

    user-select: none;

}



.additional-info-group summary:hover {

    background-color: var(--bg-hover);

}



.additional-info-group summary::after {

    content: '▼';

    font-size: 0.8rem;

    transform: rotate(0deg);

    transition: transform 0.3s ease;

}



.additional-info-group[open] summary::after {

    transform: rotate(-180deg);

}



.additional-info-content {

    overflow: hidden;

    padding: 0 1rem;

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows 0.4s ease, padding 0.4s ease;

}



.additional-info-group[open] .additional-info-content {

    grid-template-rows: 1fr;

    padding-top: 0.5rem;

    padding-bottom: 1rem;

}



.additional-info-content>div {

    min-height: 0;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



/* ==========================================================================

   14.1. CÁC THÀNH PHẦN BỔ SUNG TRONG ACTION HUB (CHO THÔNG TIN CHI TIẾT)

   ========================================================================== */

.history-title {

    font-size: 1rem;

    font-weight: 600;

    color: var(--text-secondary);

    margin-top: 1.5rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid var(--border-color-light);

}



/* ==========================================================================

   14.2. THẺ THÔNG TIN CÓ THỂ THU GỌN (COLLAPSIBLE CARD)

   ========================================================================== */

.collapsible-card {

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    margin-top: 1rem;

    overflow: hidden;

    /* Rất quan trọng: Ẩn nội dung tràn ra ngoài */

    transition: var(--transition);

}



.collapsible-card:hover {

    border-color: var(--primary-accent);

}



.collapsible-card__header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    cursor: pointer;

    background-color: var(--bg-hover);

    transition: background-color 0.2s ease;

    user-select: none;

    /* Tránh chọn text khi nhấn đúp */

}



.collapsible-card__header:hover {

    background-color: var(--border-color-light);

}



.collapsible-card__title {

    font-weight: 600;

    color: var(--text-primary);

}



.collapsible-card__chevron {

    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    color: var(--text-secondary);

}



.collapsible-card__body {

    max-height: 0;

    /* Trạng thái mặc định: thu gọn */

    padding: 0 16px;

    /* Xóa padding dọc khi thu gọn */

    overflow: hidden;

    /* Đảm bảo nội dung con không bị lộ ra */

    transition: max-height 0.4s ease-out, padding 0.4s ease-out;

    background-color: var(--bg-card);

}



/* Trạng thái khi thẻ được mở rộng (có class 'expanded') */

.collapsible-card.expanded .collapsible-card__chevron {

    transform: rotate(180deg);

}



.collapsible-card.expanded .collapsible-card__body {

    max-height: 40vh;

    /* Giới hạn chiều cao để nội dung bên trong có thể cuộn */

    overflow-y: auto;

    /* Cho phép cuộn dọc khi nội dung dài hơn */

    padding: 16px;

    border-top: 1px solid var(--border-color);

}



/* ==========================================================================

   15. VÉ XE ĐIỆN TỬ "THẺ THANH NIÊN" - THIẾT KẾ MỚI

   ========================================================================== */

.youth-pass {

    background-color: var(--bg-card);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    animation: floatUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s backwards;

    position: relative;

    border: 1px solid var(--border-color);

}



.youth-pass__header {

    background-color: var(--youth-union-blue);

    color: white;

    padding: 1.25rem 1.5rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    border-bottom: 3px solid #0d6efd;

    position: relative;

}



/* Hiệu ứng sóng */

.youth-pass__header::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100%;

    height: 20px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,186.7C960,213,1056,235,1152,218.7C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-size: cover;

    transform: translateY(100%);

}



body[data-theme="dark"] .youth-pass__header::after {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231e293b' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,186.7C960,213,1056,235,1152,218.7C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");

}



.youth-pass__logo {

    width: 50px;

    height: 50px;

    background: white;

    border-radius: 50%;

    padding: 4px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.youth-pass__titles {

    line-height: 1.2;

}



.youth-pass__org-name {

    font-weight: 800;

    font-size: 1.1rem;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}



.youth-pass__event-name {

    font-weight: 500;

    font-size: 0.9rem;

    opacity: 0.9;

}



.youth-pass__body {

    padding: 2.5rem 1.5rem 1.5rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

    text-align: center;

}



.youth-pass__plate-section {

    line-height: 1.1;

}



.youth-pass__label {

    font-size: 0.9rem;

    color: var(--text-secondary);

    font-weight: 500;

}



.youth-pass__plate {

    font-family: var(--font-mono);

    font-size: 2.75rem;

    font-weight: 800;

    color: var(--primary-accent);

    letter-spacing: 2px;

    margin-top: 0.25rem;

}



.youth-pass__qr-section {

    text-align: center;

}



.youth-pass__qr-section canvas {

    display: inline-block;

    border-radius: var(--radius-md);

    padding: 8px;

    background-color: white;

    border: 1px solid var(--border-color);

    box-shadow: var(--shadow-md);

}



.youth-pass__qr-instruction {

    display: block;

    font-size: 0.85rem;

    color: var(--text-secondary);

    font-weight: 500;

    margin-top: 0.75rem;

}



.youth-pass__details {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    background-color: var(--bg-hover);

    padding: 0.75rem 1rem 0.75rem !important;

    border-radius: var(--radius-md);

    width: 100%;

    border: 1px solid var(--border-color-light);

}



.detail-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-size: 0.95rem;

    text-align: left;

}



.detail-item svg {

    color: var(--text-secondary);

    flex-shrink: 0;

}



.detail-item span {

    color: var(--text-secondary);

}



.detail-item strong {

    font-weight: 600;

    color: var(--text-primary);

}



.youth-pass__footer {

    background-color: var(--bg-hover);

    padding: 0.25rem 1.5rem 0.25rem !important;

    margin-top: auto;

    position: relative;

}



/* Hiệu ứng sóng ngược */

.youth-pass__footer::before {

    content: '';

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: 20px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f1f5f9' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,186.7C960,213,1056,235,1152,218.7C1248,203,1344,149,1392,122.7L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-size: cover;

    transform: translateY(-100%);

}



body[data-theme="dark"] .youth-pass__footer::before {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23334155' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,186.7C960,213,1056,235,1152,218.7C1248,203,1344,149,1392,122.7L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");

}



.youth-pass__id {

    font-family: var(--font-mono);

    font-size: 0.8rem;

    color: var(--text-secondary);

    text-align: center;

    position: relative;

}



/* VIP Variant */

.youth-pass.is-vip .youth-pass__plate {

    color: var(--vip-gold);

}



.youth-pass__vip-banner {

    position: absolute;

    top: 25px;

    right: -35px;

    background-color: var(--vip-gold);

    color: white;

    padding: 8px 40px;

    font-weight: 700;

    font-size: 0.8rem;

    text-transform: uppercase;

    transform: rotate(45deg);

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    z-index: 2;

}



/* ==========================================================================

   16. CÁC THÀNH PHẦN KHÁC (MISCELLANEOUS)

   ========================================================================== */

/* Thẻ xác nhận cho xe ra (VIP/Miễn phí) */

.confirm-card-v1 {

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    overflow: hidden;

    text-align: center;

    position: relative;

}



.confirm-card__header {

    padding: 0.75rem 1rem;

    color: white;

}



.confirm-card-v1.is-vip .confirm-card__header {

    background-color: var(--vip-gold);

}



.confirm-card-v1.is-free .confirm-card__header {

    background-color: var(--success-color);

}



.confirm-card__title {

    font-size: 1rem;

    font-weight: 700;

    text-transform: uppercase;

}



.confirm-card__body {

    padding: 2rem 1.5rem;

}



.confirm-card__plate {

    font-family: var(--font-mono);

    font-size: 3rem;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 0.5rem;

}



.confirm-card__reason {

    font-size: 1rem;

    color: var(--text-secondary);

}



.confirm-card__success-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--bg-card);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: 10;

    pointer-events: none;

}



.confirm-card__success-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.confirm-card__success-overlay .checkmark {

    width: 80px;

    height: 80px;

}



.confirm-card__success-overlay p {

    font-size: 1.2rem;

    font-weight: 700;

    margin-top: 1rem;

}



/* ==========================================================================

   17. MODAL THANH TOÁN V9 (PAYMENT FLOW V9) - PREMIUM SELECTION

   ========================================================================== */

.payment-flow-v9 {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    position: relative;

    /* For the confirmation overlay */

}



.payment-v9__vehicle-card {

    background-color: var(--bg-hover);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 1rem 1.25rem;

    animation: floatUp 0.5s ease-out 0.1s backwards;

}



.payment-v9__fee-display {

    text-align: center;

    padding: 1.5rem;

    background-color: var(--bg-main);

    border-radius: var(--radius-lg);

    animation: floatUp 0.5s ease-out 0.2s backwards;

}



.payment-v9__fee-display .fee-label {

    font-size: 1rem;

    color: var(--text-secondary);

    font-weight: 600;

    display: block;

}



.payment-v9__fee-display .fee-amount {

    font-family: var(--font-mono);

    font-size: 4.5rem;

    font-weight: 800;

    color: var(--danger-color);

    line-height: 1;

}



.payment-v9__fee-display .fee-amount span {

    font-size: 2.2rem;

    vertical-align: text-top;

    margin-left: 4px;

}



#payment-step-1-v9 {

    animation: floatUp 0.5s ease-out 0.3s backwards;

}



.payment-v9__methods {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.payment-v9__method-card {

    background-color: var(--bg-card);

    border: 2px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 1.25rem;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    gap: 1rem;

    box-shadow: var(--shadow-sm);

}



.payment-v9__method-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

    border-color: var(--primary-accent);

}



.payment-v9__method-card.active {

    border-color: var(--primary-accent);

    background-color: var(--primary-accent-light);

    box-shadow: 0 0 0 4px var(--primary-accent-light);

}



.method-card__icon {

    background-color: var(--bg-hover);

    color: var(--text-secondary);

    border-radius: 12px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: var(--transition);

}



.payment-v9__method-card:hover .method-card__icon,

.payment-v9__method-card.active .method-card__icon {

    background-color: var(--primary-accent);

    color: white;

}



.method-card__text {

    line-height: 1.3;

    flex-grow: 1;

}



.method-card__title {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-primary);

}



.method-card__subtitle {

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.method-card__chevron {

    color: var(--text-secondary);

    transition: var(--transition);

}



.payment-v9__method-card:hover .method-card__chevron,

.payment-v9__method-card.active .method-card__chevron {

    transform: translateX(5px);

    color: var(--primary-accent);

}



.payment-step-details {

    display: none;

    /* Hidden by default */

    animation: fadeIn 0.4s ease-out;

}



/* Glowing QR border effect */

.qr-scanner-effect {

    position: relative;

    display: inline-block;

    padding: 8px;

    border-radius: calc(var(--radius-md) + 8px);

    background: var(--bg-card);

}



.qr-scanner-effect::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 2px;

    /* border thickness */

    background: conic-gradient(from 0deg, var(--primary-accent), var(--success-color), var(--vip-gold), var(--primary-accent));

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation: spin 4s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



/* QR Image Pulse Effect */

.qr-image-pulse {

    animation: qr-pulse 2s infinite ease-in-out;

}



@keyframes qr-pulse {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.02);

    }



    100% {

        transform: scale(1);

    }

}



/* Enhanced Cash Stack Animation */

.cash-stack-icon .cash-stack-bill {

    fill: var(--success-light);

    stroke: var(--success-color);

    stroke-width: 2;

    animation: cash-stack-shuffle 3s ease-in-out infinite;

    transform-origin: center bottom;

    /* Bills shuffle from bottom */

}



.cash-stack-icon .bill-1 {

    animation-delay: -0.1s;

}



.cash-stack-icon .bill-2 {

    animation-delay: -0.2s;

}



.cash-stack-icon .bill-3 {

    animation-delay: -0.3s;

}



@keyframes cash-stack-shuffle {



    0%,

    100% {

        transform: translateY(0) rotate(0deg);

    }



    25% {

        transform: translateY(-5px) rotate(-2deg);

    }



    50% {

        transform: translateY(0) rotate(0deg);

    }



    75% {

        transform: translateY(5px) rotate(2deg);

    }

}



.cash-stack-icon .cash-stack-coin {

    fill: var(--vip-gold);

    stroke: var(--vip-gold-light);

    stroke-width: 1.5;

    animation: coin-jiggle 2s ease-in-out infinite;

    transform-origin: center;

}



.cash-stack-icon .coin-1 {

    animation-delay: -0.5s;

}



.cash-stack-icon .coin-2 {

    animation-delay: -0.2s;

}



.cash-stack-icon .coin-3 {

    animation-delay: -0.8s;

}



@keyframes coin-jiggle {



    0%,

    100% {

        transform: translateY(0) rotate(0deg);

    }



    30% {

        transform: translateY(-3px) rotate(5deg);

    }



    70% {

        transform: translateY(3px) rotate(-5deg);

    }

}



/* ==========================================================================

   18. MODAL THÀNH CÔNG V6 (CHECKOUT SUCCESS V6) - DIGITAL RECEIPT

   ========================================================================== */

.checkout-success-v6 {

    text-align: center;

    padding: 1.5rem;

    position: relative;

    overflow: hidden;

}



.checkout-success-v6 .confetti-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

}



.success-v6__header {

    animation: floatUp 0.5s ease-out 0.8s backwards;

    margin-bottom: 1.5rem;

}



.success-v6__icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 1rem auto;

}



.success-v6__icon .checkmark__circle {

    stroke-dasharray: 166;

    stroke-dashoffset: 166;

    stroke-width: 3;

    stroke: var(--success-color);

    fill: none;

    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}



.success-v6__icon .checkmark__check {

    transform-origin: 50% 50%;

    stroke-dasharray: 48;

    stroke-dashoffset: 48;

    stroke-width: 4;

    stroke: var(--success-color);

    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;

}



.success-v6__title {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--text-primary);

}



.success-v6__body {

    background-color: var(--bg-hover);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    animation: floatUp 0.5s ease-out 1.0s backwards;

}



.success-v6__amount-paid {

    text-align: center;

}



.success-v6__amount-paid .amount-label {

    font-size: 1rem;

    color: var(--text-secondary);

    font-weight: 500;

}



.success-v6__amount-paid .amount-value {

    display: block;

    font-family: var(--font-mono);

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.2;

}



.success-v6__divider {

    height: 1px;

    background-image: linear-gradient(to right, transparent, var(--border-color), transparent);

    margin: 1.25rem 0;

}



.success-v6__details-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    text-align: left;

    font-size: 0.95rem;

}



.success-v6__details-list li {

    display: flex;

    justify-content: space-between;

}



.success-v6__details-list li span {

    color: var(--text-secondary);

}



.success-v6__details-list li strong {

    color: var(--text-primary);

    font-weight: 600;

}



/* ==========================================================================

   7. MODAL THANH TOÁN "PREMIUM" (PAYMENT FLOW V9)

   ========================================================================== */

.payment-flow-v9 {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    padding: 0.5rem;

    position: relative;

    overflow: hidden;

}



/* Hiệu ứng nền mờ Gradient nhẹ nhàng */

.payment-flow-v9::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.03) 0%, rgba(255, 255, 255, 0) 70%);

    animation: rotate-bg 20s linear infinite;

    z-index: -1;

    pointer-events: none;

}



@keyframes rotate-bg {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



/* 1. Thẻ thông tin xe (Premium Card) */

.payment-v9__vehicle-card {

    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 1.25rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    box-shadow: var(--shadow-sm);

    position: relative;

    overflow: hidden;

    transition: var(--transition);

}



.payment-v9__vehicle-card:hover {

    box-shadow: var(--shadow-md);

    border-color: var(--primary-accent);

}



/* Dải màu trang trí */

.payment-v9__vehicle-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--primary-accent);

}



.vehicle-card__plate {

    font-size: 1.8rem;

    font-weight: 800;

    color: var(--text-primary);

    letter-spacing: 1px;

    text-align: center;

    font-family: var(--font-mono);

    padding-bottom: 0.75rem;

    border-bottom: 1px dashed var(--border-color);

}



.vehicle-card__details {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

}



.vehicle-card__detail-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex: 1;

    background-color: rgba(255, 255, 255, 0.5);

    padding: 0.5rem;

    border-radius: var(--radius-md);

}



.vehicle-card__detail-item svg {

    color: var(--text-secondary);

    flex-shrink: 0;

}



.detail-text {

    display: flex;

    flex-direction: column;

}



.detail-label {

    font-size: 0.8rem;

    color: var(--text-secondary);

}



.detail-value {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text-primary);

}



/* 2. Hiển thị phí (Nổi bật) */

.payment-v9__fee-display {

    text-align: center;

    margin: 0.5rem 0;

    animation: floatUp 0.5s ease-out;

}



.payment-v9__fee-display .fee-label {

    display: block;

    font-size: 0.9rem;

    color: var(--text-secondary);

    margin-bottom: 0.25rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.payment-v9__fee-display .fee-amount {

    font-family: var(--font-mono);

    font-size: 3rem;

    font-weight: 800;

    color: var(--danger-color);

    line-height: 1;

    text-shadow: 0 4px 10px rgba(220, 38, 38, 0.15);

}



.payment-v9__fee-display .fee-amount span {

    font-size: 1.5rem;

    vertical-align: super;

    margin-left: 4px;

    color: var(--text-secondary);

    font-weight: 600;

}



/* 3. Chọn phương thức thanh toán (Grid Cards) */

.payment-v9__methods {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

}



.payment-v9__method-card {

    background-color: var(--bg-card);

    border: 2px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 1.25rem 1rem;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 0.75rem;

    position: relative;

    /* transition: var(--transition); */

}



.payment-v9__method-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);

    border-color: var(--primary-accent);

}



.payment-v9__method-card.selected {

    background-color: var(--primary-accent-light);

    border-color: var(--primary-accent);

    box-shadow: 0 0 0 2px var(--primary-accent-light);

}



.method-card__icon {

    width: 56px;

    height: 56px;

    background-color: var(--bg-hover);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    transition: var(--transition);

}



.payment-v9__method-card:hover .method-card__icon,

.payment-v9__method-card.selected .method-card__icon {

    background-color: white;

    color: var(--primary-accent);

    transform: scale(1.1);

}



.method-card__title {

    font-weight: 700;

    font-size: 1.05rem;

    color: var(--text-primary);

}



.method-card__subtitle {

    font-size: 0.8rem;

    color: var(--text-secondary);

}



.method-card__chevron {

    position: absolute;

    top: 50%;

    right: 1rem;

    transform: translateY(-50%);

    opacity: 0;

    transition: var(--transition);

    color: var(--primary-accent);

}



.payment-v9__method-card.selected .method-card__chevron {

    opacity: 1;

    right: 0.75rem;

}



/* 4. Chi tiết thanh toán (QR & Cash) */

.payment-step-details {

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.payment-step-details.active {

    max-height: 500px;

    opacity: 1;

    margin-top: 1rem;

    border-top: 1px dashed var(--border-color);

    padding-top: 1.5rem;

}



/* QR Code Section */

.payment-qr-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

}



.qr-scanner-effect {

    position: relative;

    padding: 10px;

    border-radius: var(--radius-lg);

    background: white;

    box-shadow: var(--shadow-lg);

}



.qr-scanner-effect::before,

.qr-scanner-effect::after {

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    border-color: var(--primary-accent);

    border-style: solid;

    transition: all 0.3s ease;

}



.qr-scanner-effect::before {

    top: -2px;

    left: -2px;

    border-width: 3px 0 0 3px;

    border-top-left-radius: 8px;

}



.qr-scanner-effect::after {

    bottom: -2px;

    right: -2px;

    border-width: 0 3px 3px 0;

    border-bottom-right-radius: 8px;

}



.qr-wrapper img {

    width: 220px;

    height: 220px;

    display: block;

    border-radius: var(--radius-md);

}



.qr-memo {

    font-size: 0.9rem;

    color: var(--text-secondary);

    background-color: var(--bg-hover);

    padding: 0.5rem 1rem;

    border-radius: 20px;

    border: 1px solid var(--border-color);

}



/* Cash Animation Wrapper */

.cash-animation-wrapper {

    display: flex;

    justify-content: center;

    padding: 2rem;

}



.cash-stack-icon {

    width: 120px;

    height: 120px;

    fill: var(--success-color);

}



.cash-stack-bill {

    opacity: 0;

    animation: cash-drop 2s infinite;

}



.cash-stack-bill:nth-child(1) {

    animation-delay: 0s;

}



.cash-stack-bill:nth-child(2) {

    animation-delay: 0.3s;

    fill: #15803d;

}



.cash-stack-bill:nth-child(3) {

    animation-delay: 0.6s;

    fill: #14532d;

}



@keyframes cash-drop {

    0% {

        transform: translateY(-20px);

        opacity: 0;

    }



    20% {

        opacity: 1;

    }



    50% {

        transform: translateY(0);

        opacity: 1;

    }



    80% {

        opacity: 1;

    }



    100% {

        transform: translateY(10px);

        opacity: 0;

    }

}



/* ==========================================================================

   MOBILE OPTIMIZATION (COMPACT DESIGN)

   ========================================================================== */

@media (max-width: 600px) {

    .payment-flow-v9 {

        gap: 0.75rem;

        padding: 0;

    }



    /* 1. Thẻ xe thu gọn ngang */

    .payment-v9__vehicle-card {

        padding: 0.75rem;

        flex-direction: row;

        align-items: center;

        gap: 0.75rem;

    }



    .payment-v9__vehicle-card::after {

        height: 4px;

        width: 100%;

        top: auto;

        bottom: 0;

        left: 0;

    }



    .vehicle-card__plate {

        font-size: 1.25rem;

        padding-bottom: 0;

        border-bottom: none;

        border-right: 1px dashed var(--border-color);

        padding-right: 0.75rem;

        margin-right: 0;

        flex-shrink: 0;

    }



    .vehicle-card__details {

        flex-direction: column;

        gap: 0.5rem;

        width: 100%;

    }



    .vehicle-card__detail-item {

        padding: 0.25rem 0.5rem;

        font-size: 0.85rem;

    }



    .detail-label {

        display: none;

    }



    /* Ẩn nhãn để tiết kiệm chỗ */



    /* 2. Giá tiền thu gọn */

    .payment-v9__fee-display {

        margin: 0;

        display: flex;

        justify-content: center;

        align-items: baseline;

        gap: 0.5rem;

        background: var(--bg-hover);

        padding: 0.5rem;

        border-radius: var(--radius-md);

    }



    .payment-v9__fee-display .fee-label {

        margin-bottom: 0;

        font-size: 0.8rem;

    }



    .payment-v9__fee-display .fee-amount {

        font-size: 1.75rem;

    }



    /* 3. Chọn phương thức nhỏ gọn hơn */

    .payment-v9__methods {

        gap: 0.5rem;

    }



    .payment-v9__method-card {

        padding: 0.75rem 0.5rem;

        gap: 0.5rem;

    }



    .method-card__icon {

        width: 36px;

        height: 36px;

    }



    .method-card__title {

        font-size: 0.9rem;

    }



    .method-card__subtitle {

        display: none;

    }



    /* Ẩn mô tả phụ */

    .method-card__chevron {

        display: none;

    }



    /* 4. Chi tiết QR/Tiền mặt thu gọn */

    .payment-step-details.active {

        margin-top: 0.5rem;

        padding-top: 0.5rem;

    }



    .display-instruction {

        font-size: 0.9rem;

        margin-bottom: 0.75rem;

    }



    .qr-wrapper img {

        width: 160px;

        /* Nhỏ hơn */

        height: 160px;

    }



    .cash-animation-wrapper {

        padding: 1rem;

        height: auto;

    }



    .cash-stack-icon {

        width: 80px;

        height: 80px;

    }



    /* Footer xác nhận dính dưới cùng nhưng không che nội dung */

    /* (Đã được xử lý bởi cấu trúc modal hiện tại) */

}



/* Overlay xác nhận */

.payment-confirmation-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.95);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    z-index: 10;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

    backdrop-filter: blur(5px);

}



/* ==========================================================================

   20. PAYMENT FLOW V10: "THE DIGITAL TICKET" (NEO-TICKET STYLE)

   ========================================================================== */

.payment-flow-v10 {

    font-family: 'Roboto Mono', var(--font-mono), monospace;

    background-color: #f8f8f8;

    color: #1a1a1a;

    width: 100%;

    max-width: 400px;

    margin: 0 auto;

    position: relative;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    transform-style: preserve-3d;

}



/* Paper Texture & Shadow */

.ticket-paper {

    background: #fff;

    position: relative;

    padding: 1.5rem;

    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));

    /* Zig-zag edge at bottom via radial gradient or clip-path */

    mask-image:

        radial-gradient(circle at bottom, transparent 6px, black 6.5px),

        linear-gradient(black, black);

    mask-size:

        20px 20px,

        100% calc(100% - 20px);

    mask-position:

        bottom,

        top;

    mask-repeat:

        repeat-x,

        no-repeat;

    padding-bottom: 2rem;

    border-top: 5px solid var(--primary-accent);

}



.ticket-header {

    text-align: center;

    border-bottom: 2px dashed #ddd;

    padding-bottom: 1rem;

    margin-bottom: 1.5rem;

}



.ticket-brand {

    font-family: var(--font-main);

    font-weight: 900;

    font-size: 1.2rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #000;

    display: block;

}



.ticket-id {

    font-size: 0.8rem;

    color: #666;

    margin-top: 0.25rem;

    display: block;

}



/* Info Grid */

.ticket-info-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem 0.5rem;

    margin-bottom: 1.5rem;

}



.ticket-info-item {

    display: flex;

    flex-direction: column;

}



.info-label {

    font-size: 0.75rem;

    text-transform: uppercase;

    color: #888;

    margin-bottom: 0.25rem;

}



.info-value {

    font-size: 1rem;

    font-weight: 700;

    color: #000;

}



.info-value.plate {

    font-size: 1.25rem;

    letter-spacing: 1px;

}



/* Fee Section - Ink Stamp Look */

.ticket-fee-section {

    text-align: right;

    margin: 1.5rem 0;

    padding: 1rem;

    background: #f1f5f9;

    border-radius: 4px;

    border: 1px dashed #cbd5e1;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.ticket-fee-label {

    font-weight: 700;

    font-size: 1rem;

    text-transform: uppercase;

}



.ticket-fee-amount {

    font-size: 2rem;

    font-weight: 900;

    color: #000;

}



/* Method Tabs */

.ticket-payment-method {

    margin-top: 1rem;

}



.method-tabs {

    display: flex;

    background: #eee;

    padding: 4px;

    border-radius: 8px;

    gap: 4px;

}



.method-tab {

    flex: 1;

    padding: 0.75rem;

    text-align: center;

    border: none;

    background: transparent;

    font-family: var(--font-main);

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    border-radius: 6px;

    transition: all 0.2s;

    color: #666;

}



.method-tab.active {

    background: #fff;

    color: #000;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



/* Details Expansion */

.ticket-details-area {

    margin-top: 1rem;

    border-top: 2px dashed #ddd;

    padding-top: 1rem;

    display: none;

    animation: unfold 0.5s ease-out;

}



.ticket-details-area.active {

    display: block;

}



@keyframes unfold {

    from {

        opacity: 0;

        transform: perspective(1000px) rotateX(-20deg);

        transform-origin: top;

    }



    to {

        opacity: 1;

        transform: perspective(1000px) rotateX(0);

    }

}



/* QR & Cash Override for Ticket Look */

/* Container cho hiệu ứng viền */
.ticket-details-area .qr-wrapper {
    position: relative;
    background: transparent;
    /* Fix: Wrapper background needs to be transparent, and we simulate border with padding */
    padding: 3px;
    /* Thickness of the animated border */
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    /* Ensure content is above ::before if needed */
}

/* Hiệu ứng viền xoay (Rotating Gradient Border) */
.ticket-details-area .qr-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent,
            var(--primary-accent),
            transparent 30%);
    animation: rotate-border 4s linear infinite;
    z-index: -2;
    /* Behind the white background of the wrapper? No, wrapper needs transparent bg for this to work as border */
}

.ticket-details-area .qr-wrapper::after {
    content: '';
    position: absolute;
    inset: 3px;
    /* Match padding */
    background: #fff;
    /* Inner background behind image */
    border-radius: calc(var(--radius-md) - 1px);
    z-index: -1;
}

.ticket-details-area .qr-wrapper .qr-code-img {
    width: 200px;
    /* Increased size (~35%) */
    height: 200px;
    border-radius: calc(var(--radius-md) - 2px);
    background: white;
    display: block;
    position: relative;
    z-index: 1;
}



@keyframes rotate-border {
    100% {
        transform: rotate(360deg);
    }
}



.ticket-details-area .display-instruction {

    font-family: var(--font-mono);

    font-size: 0.85rem;

    color: #444;

}



/* Success Stamp */

.paid-stamp {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(-15deg) scale(0);

    border: 4px solid var(--success-color);

    color: var(--success-color);

    font-size: 2rem;

    font-weight: 900;

    padding: 0.5rem 1rem;

    text-transform: uppercase;

    border-radius: 8px;

    opacity: 0;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    pointer-events: none;

    z-index: 20;

    background: rgba(255, 255, 255, 0.9);

}



.payment-flow-v10.paid .paid-stamp {

    opacity: 1;

    transform: translate(-50%, -50%) rotate(-15deg) scale(1);

}



.confirmation-icon-wrapper {

    width: 80px;

    height: 80px;

    margin-bottom: 1rem;

    display: none;

}



.confirmation-icon-wrapper.active {

    display: block;

}



.confirmation-text {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--text-primary);

    animation: fadeInUp 0.5s ease-out;

}



/* Nút xác nhận cuối cùng */

[data-action="complete-payment"] {

    position: relative;

    overflow: hidden;

    background: linear-gradient(90deg, var(--primary-accent), #4f46e5);

}



[data-action="complete-payment"]:not(:disabled):hover {

    box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);

}



/* Hiệu ứng load khi click */

[data-action="complete-payment"].loading span {

    opacity: 0;

}



[data-action="complete-payment"].loading::after {

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-top-color: white;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

    top: 50%;

    left: 50%;

    margin: -10px 0 0 -10px;

}



/* ==========================================================================

   19. MODAL THÀNH CÔNG & XÁC NHẬN "PREMIUM" (UPGRADE)

   ========================================================================== */



/* --- Checkout Success V6 Upgrade --- */

.checkout-success-v6 {

    background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));

    padding: 1rem !important;

    /* Override layout */

    border-radius: var(--radius-lg);

    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.02);

}



.success-v6__icon .checkmark__circle {

    stroke: var(--success-color);

    filter: drop-shadow(0 0 5px var(--success-light));

}



.success-v6__title {

    font-size: 2rem;

    background: linear-gradient(to right, var(--text-primary), var(--primary-accent));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    margin-bottom: 0.5rem;

}



.success-v6__body {

    background: white;

    border: 1px solid var(--border-color);

    box-shadow: var(--shadow-sm);

}



.success-v6__amount-paid .amount-value {

    color: var(--primary-accent);

    text-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);

}



/* --- Confirmation Modal (Confirm Card V1) --- */

.confirm-card-v1 {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    padding: 0.5rem;

    position: relative;

    overflow: hidden;

}



.confirm-card-v1.is-vip .confirm-card__header h3 {

    color: var(--warning-color);

}



.confirm-card-v1.is-free .confirm-card__header h3 {

    color: var(--success-color);

}



.confirm-card__body {

    background: var(--bg-hover);

    padding: 1.5rem;

    border-radius: var(--radius-lg);

    text-align: center;

    border: 1px dashed var(--border-color);

}



.confirm-card__plate {

    font-family: var(--font-mono);

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 0.5rem;

}



.confirm-card__reason {

    font-size: 1.1rem;

    color: var(--text-secondary);

}



.confirm-card__success-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.95);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

    transition: all 0.3s ease;

    backdrop-filter: blur(4px);

}



.confirm-card__success-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.confirm-card__success-overlay p {

    font-weight: 800;

    font-size: 1.5rem;

    color: var(--success-color);

    margin-top: 1rem;

    animation: floatUp 0.5s ease-out;

}



/* ==========================================================================

   100. MODAL SYSTEM (RESTORED)

   ========================================================================== */

#modal-container {

    position: relative;

    z-index: 9999;

}



.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(4px);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 10000;

}



.modal-overlay.active {

    opacity: 1;

    visibility: visible;

}



.modal-content {

    background-color: var(--bg-card);

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    border: 1px solid var(--border-color);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--transition);
}

.modal-close-btn:hover {
    color: var(--danger-color);
    transform: rotate(90deg);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background-color: var(--bg-hover);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Modal Variants */
.modal-content.large {
    max-width: 800px;
}

.modal-content.full-screen {
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

/* ==========================================================================
   5. PAYMENT MODAL STYLES (NEW)
   ========================================================================== */
.method-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.method-tab {
    flex: 1;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.method-tab:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-color-light);
}

.method-tab.active {
    background-color: var(--primary-accent);
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   6. TICKET FEE SECTION STYLES (NEW)
   ========================================================================== */
.ticket-fee-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin: 1rem 0;
    border-top: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
}

.ticket-fee-label {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ticket-fee-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-accent);
}


/* ==========================================================================
   7. TOTAL AMOUNT CARD REDESIGN (FINAL V2)
   ========================================================================== */
.ticket-fee-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    background-color: var(--primary-accent-light) !important;
    border: 2px dashed var(--primary-accent) !important;
    border-radius: var(--radius-lg) !important;
    text-align: center !important;
}

.ticket-fee-label {
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

.ticket-fee-amount {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: var(--primary-accent) !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.ticket-fee-amount small {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    opacity: 0.7 !important;
    vertical-align: super !important;
}


/* ==========================================================================
   8. ACTION BUTTONS LAYOUT FIX
   ========================================================================== */
.action-hub-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 16px !important;
}

/* Ensure buttons take full width and stack properly */
.action-hub-buttons .action-button {
    width: 100% !important;
    flex: auto !important;
    /* Reset any flex-grow/shrink */
    margin: 0 !important;
    max-width: none !important;
    /* Remove max-width constraints if any */
    position: relative !important;
    /* Override absolute positioning */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    /* Disable conflicting transforms */
}

/* Ensure container grows with content */
.action-hub-buttons {
    height: auto !important;
    min-height: 60px;
    /* Preserve minimum height */
    overflow: visible !important;
}

/* Specific styling for the 'View Ticket' button to make it distinct but secondary if needed, 
   or just ensure it follows the same sizing */
.action-button[data-action="view-ticket"] {
    margin-top: 0 !important;
    /* Handled by gap */
}

/* Override any potential desktop media queries that force row direction */
@media (min-width: 768px) {
    .action-hub-buttons {
        flex-direction: row;
        flex-direction: column !important;
        /* KEEP COLUMNS ON DESKTOP */
        align-items: stretch !important;
    }

    .action-hub-buttons .action-button {
        .action-hub-buttons {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            width: 100% !important;
            margin-top: 16px !important;
        }

        /* Ensure buttons take full width */
        .action-hub-buttons .action-button {
            width: 100% !important;
            flex: auto !important;
            /* Reset any flex-grow/shrink */
            margin: 0 !important;
            max-width: none !important;
            /* Remove max-width constraints if any */
        }

        /* Specific styling for the 'View Ticket' button to make it distinct but secondary if needed, 
   or just ensure it follows the same sizing */
        .action-button[data-action="view-ticket"] {
            margin-top: 0 !important;
            /* Handled by gap */
        }

        /* Override any potential desktop media queries that force row direction */
        @media (min-width: 768px) {
            .action-hub-buttons {
                flex-direction: column !important;
                /* KEEP COLUMNS ON DESKTOP */
                align-items: stretch !important;
            }

            .action-hub-buttons .action-button {
                width: 100% !important;
            }
        }

        width: 100% !important;
    }
}


/* ==========================================================================
   17. GIAO DI?N V� XE V2 (NEW REDESIGN) - PREMIUM CARD STYLE
   ========================================================================== */
.ticket-v2 {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    font-family: var(--font-main);
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Header Xanh Gradient */
.ticket-v2__header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    padding: 1.5rem;
    text-align: center;
    color: #fff;
    position: relative;
    border-bottom: 4px solid #fbbf24;
    /* Gold accent line */
}

/* Logo & Branding */
.ticket-v2__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ticket-v2__logo {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ticket-v2__title-main {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ticket-v2__title-sub {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* VIP Badge */
.ticket-v2__vip {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #fbbf24;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Body Content */
.ticket-v2__body {
    padding: 2rem 1.5rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
}

/* Notch Effect (Pure CSS Decoration) */
.ticket-v2__body::before,
.ticket-v2__body::after {
    content: '';
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: var(--bg-main, #f8fafc);
    /* Match modal bg */
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.ticket-v2__body::before {
    left: -10px;
}

.ticket-v2__body::after {
    right: -10px;
}


/* Plate Number Section */
.ticket-v2__plate-box {
    text-align: center;
}

.ticket-v2__plate-label {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ticket-v2__plate-number {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* QR Code Section - Centered & Prominent */
.ticket-v2__qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    margin: 0 auto;
    /* Center horizontally */
    width: fit-content;
}

.ticket-v2__qr-canvas {
    border-radius: 8px;
    mix-blend-mode: multiply;
    /* Better blending */
}

.ticket-v2__qr-hint {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

/* Details Grid */
.ticket-v2__details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    background: #f1f5f9;
    padding: 1rem;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

.ticket-v2__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.ticket-v2__label {
    color: #64748b;
    font-weight: 500;
}

.ticket-v2__value {
    color: #0f172a;
    font-weight: 700;
    text-align: right;
}

/* Footer ID */
.ticket-v2__footer {
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-top: 1px dashed #e2e8f0;
}

.ticket-v2__id {
    font-family: var(--font-mono);
    color: #94a3b8;
    font-size: 0.8rem;
    letter-spacing: 1px;
    background: #e2e8f0;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

#toast-container {
    z-index: 20000 !important;
}

/* ==========================================================================
   3. ACTION HUB V2 (GIAO DI?N PREMIUM) - FIX MISSING STYLES
   ========================================================================== */
.action-hub-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
}

.plate-input-container {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.plate-input-container:focus-within {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.plate-input-field {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Roboto Mono', monospace;
    /* Ensure this font is loaded or fallback to monospace */
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    letter-spacing: 2px;
    width: 100%;
}

.plate-input-field::placeholder {
    color: #CBD5E1;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: normal;
}

.plate-input-field:focus {
    outline: none;
}

.btn-scan-qr-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    background: #F8FAFC;
    border: none;
    border-left: 1px solid #E2E8F0;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748B;
}

.btn-scan-qr-premium:hover {
    background: #F1F5F9;
    color: var(--primary-accent);
}

.plate-suggestions-popover {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 8px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 50;
    max-height: 250px;
    overflow-y: auto;
    display: none;
}

.plate-suggestions-popover.visible {
    display: block;
    animation: slideDownFade 0.2s ease forwards;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-zone {
    min-height: 80px;
    /* Prevent layout shift */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-zone-empty-state {
    text-align: center;
    padding: 1.5rem;
    color: #94A3B8;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px dashed #E2E8F0;
    font-size: 0.9rem;
}

/* ==========================================================================
   4. PAYMENT MODAL ANIMATIONS (CASH)
   ========================================================================== */
.cash-animation-container {
    position: relative;
    width: 200px;
    height: 140px;
    margin: 0 auto;
    overflow: hidden;
}

.cash-hand-wrapper {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    animation: hand-enter 3s infinite ease-in-out;
}

.cash-hand {
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFCCBC;
    /* Skin tone */
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: flex;
    justify-content: center;
}

.cash-hand .finger {
    width: 22px;
    height: 40px;
    background: #FFAB91;
    /* Darker skin tone for fingers */
    border-radius: 10px;
    margin: 0 2px;
    margin-top: -15px;
    position: relative;
    z-index: 3;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
}

.cash-hand .finger.main-hand {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFCCBC;
    border-radius: 12px;
    margin: 0;
    z-index: 2;
    box-shadow: none;
}

.cash-bill {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    width: 100px;
    height: 50px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: 1px solid #047857;
    border-radius: 4px;
    z-index: 1;
    /* Behind fingers */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: bill-waving 3s infinite ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bill-content {
    width: 85%;
    height: 80%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.bill-mark {
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.bill-line {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    margin-left: 8px;
}

.cash-shadow {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 15px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    animation: shadow-pulse 3s infinite ease-in-out;
    z-index: 0;
}

@keyframes hand-enter {

    0%,
    100% {
        bottom: -60px;
        transform: translateX(-50%) rotate(0deg);
    }

    50% {
        bottom: -30px;
        transform: translateX(-50%) rotate(2deg);
    }
}

@keyframes bill-waving {

    0%,
    100% {
        transform: translateX(-50%) rotate(-10deg) translateY(0);
    }

    50% {
        transform: translateX(-50%) rotate(-5deg) translateY(-5px);
    }
}

@keyframes shadow-pulse {

    0%,
    100% {
        width: 100px;
        opacity: 0.1;
    }

    50% {
        width: 80px;
        opacity: 0.2;
    }
}

/* ==========================================================================
   5. SUCCESS MODAL ANIMATION (DYNAMIC CHECKMARK)
   ========================================================================== */
.success-checkmark-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #10B981;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #10B981;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #10B981;
    }
}

/* ==========================================================================
   6. PREMIUM SUCCESS MODAL (V2) - RECOVERY
   ========================================================================== */
.success-modal-v2 {
    padding: 1rem 0.5rem;
    text-align: center;
}

.success-header-v2 {
    margin-bottom: 2rem;
}

.success-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    padding: 12px;
    position: relative;
}

.success-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-color);
    margin-bottom: 0.5rem;
}

.success-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Receipt Card Style */
.success-receipt-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.receipt-row:last-child {
    margin-bottom: 0;
}

.receipt-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.receipt-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.receipt-value.plate-number {
    font-family: var(--font-mono);
    background: #E2E8F0;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
    color: #1E293B;
}

.receipt-divider {
    height: 1px;
    background-image: linear-gradient(to right, #CBD5E1 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    margin: 1rem 0;
    opacity: 0.6;
}

.receipt-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.receipt-total-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-accent);
}

.btn--primary.full-width {
    width: 100%;
    justify-content: center;
    margin-top: 0;
    padding: 0.875rem;
    font-size: 1rem;
    background: var(--text-primary);
    /* Dark button for contrast */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn--primary.full-width:hover {
    background: #000;
    transform: translateY(-1px);
}

/* ==========================================================================
   7. GALAXY SUCCESS MODAL (V3) - "BREAKING THE MOLD"
   ========================================================================== */
.success-modal-v3 {
    position: relative;
    padding: 2rem 1rem;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 20px;
    color: white;
    margin: -1.5rem;
    /* Override modal padding */
}

.success-bg-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
    animation: rotate 10s linear infinite;
    z-index: 0;
}

.success-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Modal Overlay Override for V3 */
.modal-content:has(.success-modal-v3) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.modal-content:has(.success-modal-v3) .modal-header,
.modal-content:has(.success-modal-v3) .modal-footer {
    display: none;
    /* Hide default header/footer */
}

/* Custom Icon V3 */
.success-icon-v3 {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.checkmark-v3 {
    width: 60px;
    height: 60px;
    display: block;
    stroke-width: 3;
    stroke: #4ade80;
    /* Neon Green */
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4ade80;
    animation: scale .3s ease-in-out .9s both;
}

.success-title-v3 {
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    background: linear-gradient(to right, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

/* Glass Receipt Card */
.receipt-card-v3 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.receipt-header-v3 {
    margin-bottom: 1.5rem;
}

.plate-badge-v3 {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 700;
    color: #fbbf24;
    /* Amber Gold */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
}

.receipt-body-v3 {
    text-align: left;
}

.receipt-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: #e2e8f0;
}

.receipt-divider-v3 {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.receipt-total-v3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
}

.receipt-total-v3 .amount {
    font-size: 2rem;
    font-weight: 700;
    color: #4ade80;
    /* Neon Green */
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

/* Custom Glowing Button */
.btn--v3-glow {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to right, #4338ca, #6366f1);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    transition: all 0.3s;
}

.btn--v3-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   8. V4 FULL SCREEN SUCCESS OVERLAY - "ESCAPE THE MODAL"
   ========================================================================== */
.success-overlay-v4 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.95);
    /* Deep dark overlay */
    backdrop-filter: blur(8px);
    z-index: 9999;
}

.success-v4-container {
    text-align: center;
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    animation: zoomInSuccess 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoomInSuccess {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-v4-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.checkmark-v4 {
    width: 100px;
    height: 100px;
    stroke: #22c55e;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
}

.success-v4-title {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.success-v4-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

.success-v4-ticket {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: rotate(-2deg);
    transition: transform 0.3s;
}

.success-v4-ticket:hover {
    transform: rotate(0deg) scale(1.02);
}

.v4-ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.v4-ticket-row .label {
    color: #64748b;
    font-weight: 500;
}

.v4-ticket-row .value {
    color: #0f172a;
    font-weight: 600;
}

.v4-ticket-row .value.plate {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

.v4-ticket-row .value.money {
    font-size: 1.5rem;
    color: #16a34a;
    font-weight: 800;
}

.v4-ticket-divider {
    border-top: 2px dashed #e2e8f0;
    margin: 1rem 0;
    position: relative;
}

.v4-ticket-divider::before,
.v4-ticket-divider::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    background: #0f172a;
    /* Match overlay bg */
    border-radius: 50%;
}

.v4-ticket-divider::before {
    left: -32px;
}

.v4-ticket-divider::after {
    right: -32px;
}

.btn--v4-finish {
    background: #22c55e;
    color: white;
    border: none;
    width: 80%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
    transition: all 0.2s;
}

.btn--v4-finish:hover {
    background: #16a34a;
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
}

/* ==========================================================================
   PAYMENT SUCCESS V6 (Standard Modal)
   ========================================================================== */

/* The Modal Box */
.success-v6-modal {
    background: white;
    width: 90%;
    max-width: 400px;
    /* Constrained width */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: modal-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10001;
    /* Above confetti */
    display: flex;
    flex-direction: column;
}

@keyframes modal-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Header */
.success-v6-header {
    background: linear-gradient(135deg, #1488DB 0%, #0056b3 100%);
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    color: white;
}

.success-v6-logo-wrapper {
    background: white;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.success-v6-logo {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    object-fit: contain;
}

.success-v6-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Body */
.success-v6-body {
    padding: 1.5rem;
}

/* Checkmark Box */
.success-v6-icon-box {
    margin: 0 auto 1.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-v6-checkmark {
    width: 52px;
    height: 52px;
}

.success-v6-circle {
    stroke: #16a34a;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-v6-check {
    stroke: #16a34a;
    stroke-width: 4;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.4s 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* Details Table */
.success-v6-details {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.success-v6-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.success-v6-row:last-child {
    margin-bottom: 0;
}

.success-v6-row .label {
    color: #64748b;
}

.success-v6-row .value {
    font-weight: 600;
    color: #1e293b;
}

.success-v6-row .plate-badge {
    background: #fbbf24;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #d97706;
}

.success-v6-row.total {
    border-top: 1px dashed #cbd5e1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.success-v6-row.total .value {
    color: #dc2626;
    font-size: 1.1rem;
    font-weight: 800;
}

/* Button */
.btn--success-v6 {
    width: 100%;
    background: #1488DB;
    color: white;
    border: none;
    padding: 0.875rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.btn--success-v6:hover {
    background: #0d6efd;
}

/* =========================================================================
   NÂNG CẤP: DIGITAL TICKET SYSTEMS (VÍ ĐIỆN TỬ STYLE)
   ========================================================================= */

/* --- Container for Inline View --- */
#ticket-view-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 2rem;
    background: transparent;
}

/* --- Base Ticket Card --- */
.ticket-card {
    width: 100%;
    max-width: 380px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    font-family: var(--font-main);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: ticketSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.ticket-card:hover {
    transform: translateY(-5px) scale(1.02);
}

@keyframes ticketSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Top Section (Brand & Info) --- */
.ticket-card__top {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 2px dashed #cbd5e1;
    position: relative;
}

/* Perforation Circles */
.ticket-card__top::before,
.ticket-card__top::after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background: var(--bg-main);
    /* Match main bg */
    border-radius: 50%;
    z-index: 2;
}

.ticket-card__top::before {
    left: -10px;
}

.ticket-card__top::after {
    right: -10px;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ticket-brand {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ticket-brand img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.ticket-badge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-badge--standard {
    background: #e2e8f0;
    color: #475569;
}

.ticket-plate {
    text-align: center;
    margin: 1.5rem 0;
}

.ticket-plate__number {
    font-size: 3rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -1px;
}

.ticket-plate__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* --- Middle Info Grid --- */
.ticket-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.ticket-info-item {
    display: flex;
    flex-direction: column;
}

.ticket-info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ticket-info-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Bottom Section (QR) --- */
.ticket-card__bottom {
    padding: 1.5rem;
    background: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ticket-qr-container {
    padding: 1rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ticket-qr-container canvas {
    display: block;
    width: 100%;
    max-width: 160px;
}

.ticket-footer-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    max-width: 80%;
}

/* =========================================================================
   VARIANT: VIP TICKET (BLACK & GOLD PREMIUM)
   ========================================================================= */
.ticket-card--vip {
    background: #0f172a;
    /* Dark base */
    color: white;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.1);
}

.ticket-card--vip .ticket-card__top {
    background: radial-gradient(circle at top right, #3d2b05 0%, #0f172a 100%);
    border-bottom: 2px dashed rgba(255, 215, 0, 0.3);
}

.ticket-card--vip .ticket-card__top::before,
.ticket-card--vip .ticket-card__top::after {
    background: var(--bg-main);
    /* Match main bg */
}

.ticket-card--vip .ticket-brand {
    color: #94a3b8;
}

.ticket-card--vip .ticket-badge--vip {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    color: #451a03;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
    position: relative;
    overflow: hidden;
}

/* Holographic Shine Effect */
.ticket-card--vip .ticket-badge--vip::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.ticket-card--vip .ticket-plate__number {
    background: linear-gradient(to bottom, #fcd34d, #d97706);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(217, 119, 6, 0.2);
}

.ticket-card--vip .ticket-plate__label {
    color: #94a3b8;
}

.ticket-card--vip .ticket-info-label {
    color: #64748b;
}

.ticket-card--vip .ticket-info-value {
    color: #f1f5f9;
}

.ticket-card--vip .ticket-card__bottom {
    background: #0f172a;
}

.ticket-card--vip .ticket-qr-container {
    background: white;
    /* QR vẫn cần nền trắng để dễ quét */
    border: 4px solid #d97706;
    /* Viền vàng */
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.3);
}

.ticket-card--vip .ticket-footer-text {
    color: #64748b;
}

/* Nút đóng/quay lại trong Ticket View */
.ticket-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.btn-close-ticket {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary-accent), var(--youth-union-blue));
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.ticket-card--vip .btn-close-ticket {
    background: linear-gradient(135deg, #FFD700, #DAA520);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.5);
}

.ticket-card--vip .btn-close-ticket::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

.btn-close-ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    filter: brightness(1.1);
}

.ticket-card--vip .btn-close-ticket:hover {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
    transform: translateY(-2px) scale(1.02);
}

.ticket-card--vip .btn-close-ticket:hover::before {
    left: 100%;
}

/* =========================================================================
   NEW: TICKET ANIMATIONS & LOOKUP LINK
   ========================================================================= */
@keyframes fadeInUpTicket {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ticket-card--animate {
    animation: fadeInUpTicket 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ticket-lookup-link {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 1rem 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.ticket-lookup-link a {
    color: var(--primary-accent);
    text-decoration: none;
    font-weight: 600;
}

.ticket-lookup-link a:hover {
    text-decoration: underline;
}

.ticket-card--vip .ticket-lookup-link a {
    color: #FCD34D;
}

/* =========================================================================
   NEW: PREMIUM PAYMENT STYLES
   ========================================================================= */

/* --- Card Container --- */
.payment-card-premium {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0;
    overflow: hidden;
    color: #1e293b;
    /* font-family: 'Outfit', sans-serif; REMOVED to match index page */
    width: 100%;
    margin: 0 auto;
    position: relative;
    backdrop-filter: blur(10px);
}

.payment-card-premium.payment-card--vip {
    background: linear-gradient(165deg, #1c1c1e, #2c2c2e);
    color: #ffffff;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.15);
}

/* --- Header --- */
.payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0.5rem;
}

.brand-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.brand-pill img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.status-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pill--pending {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.payment-card--vip .brand-pill {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Hero Section --- */
.payment-hero-section {
    text-align: center;
    padding: 1.5rem;
}

.plate-number-large {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.plate-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.payment-card--vip .plate-number-large {
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.payment-card--vip .plate-label {
    color: rgba(255, 255, 255, 0.5);
}

/* Info Grid */
.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.info-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-col .label {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.info-col .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.payment-card--vip .info-col .value {
    color: #f1f5f9;
}

/* Price */
.price-display-large {
    font-size: 3.5rem;
    font-weight: 900;
    color: #3b82f6;
    letter-spacing: -2px;
    line-height: 1;
    text-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
    margin-bottom: 1rem;
}

.price-display-large .currency {
    font-size: 1.5rem;
    vertical-align: super;
    font-weight: 700;
    color: #93c5fd;
    margin-right: 4px;
}

.payment-card--vip .price-display-large {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

/* --- Segmented Control --- */
.payment-methods-segmented {
    padding: 0 1.5rem 1.5rem;
}

.segmented-control {
    background: #f1f5f9;
    padding: 6px;
    border-radius: 16px;
    display: flex;
    position: relative;
    user-select: none;
}

.payment-card--vip .segmented-control {
    background: rgba(255, 255, 255, 0.1);
}

.segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.segment-btn.active {
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.payment-card--vip .segment-btn {
    color: rgba(255, 255, 255, 0.6);
}

.payment-card--vip .segment-btn.active {
    color: #1a1a1a;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* --- Content Areas --- */
/* --- Content Areas --- */
.payment-content-premium {
    /* Grid trick for smooth height animation */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.5s ease;

    background: rgba(255, 255, 255, 0.5);
    margin: 0 1.5rem 0;
    /* Initially 0 bottom margin */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.payment-content-premium.expanded {
    grid-template-rows: 1fr;
    margin-bottom: 1.5rem;
    padding-bottom: 1px;
    /* Prevent margin collapse */
}

.payment-card--vip .payment-content-premium {
    background: rgba(0, 0, 0, 0.2);
}

/* The inner wrapper that gets animated */
.payment-content-premium>.payment-area-premium {
    min-height: 0;
    transition: opacity 0.4s ease 0.1s;
    opacity: 0;
    overflow: hidden;
}

.payment-content-premium.expanded>.payment-area-premium.active {
    opacity: 1;
}

.payment-area-premium {
    display: none;
    width: 100%;
    text-align: center;
    padding: 1.5rem 0;
    /* Padding moved inside for better height calc */
}

.payment-area-premium.active {
    display: block;
}

/* QR Styles */
.qr-scanner-frame {
    width: 180px;
    height: 180px;
    margin: 0 auto 12px;
    border-radius: 16px;
    border: 2px solid rgba(59, 130, 246, 0.1);
    padding: 8px;
    position: relative;
    background: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.qr-scanner-frame img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
}

/* Scanline Animation */
.scan-line {
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, transparent, #3b82f6, transparent);
    top: 0;
    left: 0;
    animation: scanMove 2.5s infinite linear;
    z-index: 10;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.payment-card--vip .scan-line {
    background: linear-gradient(to right, transparent, #fbbf24, transparent);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

@keyframes scanMove {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Cash Animation */
.cash-animation-wrapper {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cash-icon-premium {
    font-size: 5rem;
    animation: cashBounce 2s infinite ease-in-out;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

@keyframes cashBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.instruction-text {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.payment-card--vip .instruction-text {
    color: rgba(255, 255, 255, 0.6);
}

/* --- Actions --- */
.payment-actions-premium {
    display: flex;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.action-btn-outline {
    flex: 1;
    padding: 14px;
    border: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn-outline:hover {
    border-color: #cbd5e1;
    color: #334155;
    background: #f8fafc;
}

.action-btn-primary {
    flex: 2;
    padding: 14px;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 12px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
    transition: all 0.2s;
}

.action-btn-primary:active {
    transform: scale(0.98);
}

.payment-card--vip .action-btn-primary {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.payment-fee-large {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin: 1rem 0;
    color: var(--primary-accent);
    letter-spacing: -1px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
}

.payment-fee-large .currency {
    font-size: 1.25rem;
    font-weight: 600;
    margin-right: 4px;
    margin-top: 6px;
    color: var(--text-secondary);
}

.ticket-card--vip .payment-fee-large {
    background: linear-gradient(135deg, #FFD700, #DAA520);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

.payment-methods-inline {
    display: flex;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1rem;
}

.ticket-card--vip .payment-methods-inline {
    background: rgba(255, 255, 255, 0.05);
}

.method-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ticket-card--vip .method-btn {
    color: rgba(255, 255, 255, 0.6);
}

.method-btn.active {
    background: white;
    color: var(--primary-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ticket-card--vip .method-btn.active {
    background: linear-gradient(135deg, #FFD700, #DAA520);
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.payment-content-area {
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.payment-area {
    display: none;
    animation: fadeInScale 0.4s ease forwards;
}

.payment-area.active {
    display: block;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ticket-card--payment .ticket-badge--red {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* =================================================================
   PREMIUM LOADING COMPONENT (REPLACEMENT)
   ================================================================= */
.premium-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    /* Center in parent/message-box */
    margin: 2rem auto;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color-light);
}

.premium-loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--youth-union-blue);
    /* Branding Blue */
    border-right-color: var(--danger-color);
    /* Branding Red */
    animation: spin-premium 0.8s linear infinite;
    margin-bottom: 1rem;
    box-shadow: 0 0 15px rgba(20, 136, 219, 0.2);
}

.premium-loading-text {
    font-weight: 600;
    background: linear-gradient(90deg, var(--youth-union-blue), var(--danger-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

@keyframes spin-premium {
    to {
        transform: rotate(360deg);
    }
}

/* =================================================================
   HISTORY CARD EXPANSION STYLES
   ================================================================= */
.history-card-header {
    background-color: var(--bg-hover);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color-light);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.history-card-header:hover {
    background-color: var(--primary-accent-light);
}

.history-card-header .header-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.history-card-header .header-time {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-card-header .header-status {
    font-weight: 600;
    font-size: 1rem;
}

.history-card-body.collapsed {
    display: none;
}

.history-card-body {
    padding: 1.25rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Latest Badge Pulse */
.latest-badge {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    animation: pulse-red 2s infinite;
    margin-left: 8px;
    box-shadow: 0 2px 4px rgba(255, 75, 43, 0.3);
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.4);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(255, 75, 43, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
    }
}

/* ==========================================================================
   4. TỐI ƯU HÓA MOBILE (THEO YÊU CẦU NGƯỜI DÙNG)
   - Tối giản hóa: Ẩn bớt Widget thống kê, chỉ giữ lại Danh sách xe.
   - Xử lý khoảng trắng: Tighten spacing, remove gaps.
   ========================================================================= */
@media (max-width: 768px) {

    /* 1. Ẩn thành phần phụ: Menu, Footer, Controls, Widgets bổ sung */
    .main-navigation,
    .app-footer,
    .header-controls,
    .nav-extra,
    #dashboard-column .card:first-child {
        /* Ẩn Card Thống kê (Bảng tin nhanh) */
        display: none !important;
    }

    /* 2. Tinh chỉnh Header gọn gàng */
    .app-header {
        padding: 0.5rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: var(--bg-header);
        /* Đảm bảo nền không trong suốt khi scroll */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header-container {
        justify-content: center;
    }

    .header-title h1 {
        font-size: 1.1rem;
        margin: 0;
        text-align: center;
        /* Ẩn subtitle trên mobile để tiết kiệm diện tích dọc nếu cần */
    }

    .header-title .subtitle {
        display: none;
    }

    /* 3. Layout Full Width */
    .main-grid {
        display: flex;
        flex-direction: column;
        margin-top: 0.5rem;
        padding: 0 0.75rem;
        gap: 1rem;
        /* Khoảng cách giữa Action và List */
    }

    .main-column {
        width: 100%;
        gap: 0;
    }

    /* 4. Tối ưu Card */
    .card {
        border: none;
        box-shadow: none;
        background: transparent;
        margin-bottom: 0;
    }

    /* Ẩn Header của Card Action để liền mạch, nhưng GIỮ lại Header của List nếu muốn (hoặc ẩn cả) */
    /* Theo yêu cầu tối giản: Ẩn hết header card, chỉ hiện nội dung */
    .card__header {
        display: none;
    }

    .card__body {
        padding: 0;
    }

    /* RIÊNG: Card Danh sách xe cần chút không gian hoặc nền để tách biệt? */
    #dashboard-column .card {
        margin-top: 0;
    }

    /* 5. Tối ưu Touch Target */
    .input-wrapper input,
    .action-button {
        height: 52px;
        font-size: 1rem;
    }

    .icon-btn {
        width: 52px;
        height: 52px;
    }

    /* 6. Modal Fullscreen */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        /* FIX: Auto height for compact look */
        max-height: 90vh;
        /* Prevent overflow */
        border-radius: 12px 12px 0 0;
        /* Bottom sheet style */
        display: flex;
        flex-direction: column;
        margin: auto 0 0 0;
        /* Align bottom */
    }

    .modal-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 1rem;
    }

    /* 7. Xử lý khoảng trắng thừa (Aggressive Fix) */
    .action-hub-wrapper,
    .action-hub-details,
    .action-zone,
    .view-switcher-container,
    .view-content,
    .card__body {
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Đảm bảo trạng thái rỗng không chiếm quá nhiều chỗ */
    .action-zone-empty-state {
        padding: 0.5rem !important;
        min-height: 0 !important;
        display: none !important;
        /* Ẩn luôn hướng dẫn nếu muốn SIÊU gọn */
    }

    #app-container {
        padding-bottom: 4rem;
        min-height: 100vh;
    }

    /* 8. Tối ưu Giao diện Vé trên Mobile (Full Width, No Whitespace) */
    #ticket-view-container {
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ticket-v2 {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        /* Vuông vức full màn hình */
        border: none !important;
        box-shadow: none !important;
        /* Bỏ bóng để liền mạch */
    }

    .ticket-v2__body {
        padding: 1rem !important;
    }

    /* 9. Ẩn Toast Notification trên Mobile (Theo yêu cầu) */
    /* 9. Ẩn Toast Notification trên Mobile (Theo yêu cầu) */
    #toast-container {
        display: none !important;
    }
}