:root {
    --blue: #1a73e8;
    --blue-dark: #1557b0;
    --blue-soft: #e8f0fe;
    --line: #dadce0;
    --text: #202124;
    --muted: #5f6368;
    --bg: #fff;
    --radius: 8px;
    --topbar-h: 64px;
}

* { box-sizing: border-box; }

@media (max-width: 600px) {
    :root { --topbar-h: 56px; }
}

body {
    margin: 0;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
}

a { color: #8B30E7; text-decoration: none; }

/* ===== Topbar ===== */
.topbar {
    height: var(--topbar-h);
    background: #8B30E7;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
}
.topbar .brand {
    display: flex; align-items: center; gap: 12px;
    font-size: 20px; font-weight: 500; white-space: nowrap;
    min-width: 0;
}
.topbar .brand span:not(.logo) {
    overflow: hidden; text-overflow: ellipsis;
}

/* Hamburger — only shown when the sidebar collapses */
.nav-toggle { display: none; }
.nav-toggle-btn {
    display: none;
    width: 40px; height: 40px; flex: 0 0 40px;
    align-items: center; justify-content: center;
    border: 0; background: transparent; color: #fff;
    font-size: 22px; cursor: pointer; border-radius: 50%;
    margin-left: -6px;
}
.nav-toggle-btn:hover { background: rgba(255,255,255,.14); }
.nav-scrim { display: none; }
.topbar .brand .brand-logo {
    width: 108px; height: 36px; padding: 5px 7px; border-radius: 6px;
    background: #fff; object-fit: contain; flex: 0 0 auto;
}
.topbar .search {
    flex: 1; max-width: 720px; margin: 0 auto;
    background: rgba(255,255,255,.24); border-radius: 8px;
    display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px;
}
.topbar .search input {
    flex: 1; border: 0; background: transparent; outline: none;
    color: #fff; font-size: 15px;
}
.topbar .search input::placeholder { color: rgba(255,255,255,.85); }
.topbar > form:last-of-type { flex: 0 0 auto; }
.topbar .avatar {
    width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #8B30E7;
    display: flex; align-items: center; justify-content: center; font-weight: 500;
    cursor: pointer; overflow: hidden;
}
.topbar .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Layout ===== */
.layout { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }

.sidebar {
    width: 260px; flex: 0 0 260px; padding: 12px 12px 24px 0;
    border-right: 1px solid #eee; position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    background: #fff;
}
.sidebar .nav-item {
    display: flex; align-items: center; gap: 18px;
    height: 44px; padding: 0 20px; border-radius: 0 22px 22px 0;
    color: var(--text); cursor: pointer; font-size: 14px;
}
.sidebar button.nav-item { width: calc(100% - 8px); border: 0; background: transparent; font-family: inherit; text-align: left; }
.sidebar .nav-item:hover { background: #f1f3f4; }
.sidebar .nav-item.active { background: var(--blue-soft); color: var(--blue-dark); font-weight: 500; }
.sidebar .nav-item .icon { width: 20px; text-align: center; font-size: 17px; }
.sidebar .nav-group {
    padding: 16px 20px 6px; font-size: 11px; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted);
}
.sidebar hr { border: 0; border-top: 1px solid #eee; margin: 8px 12px; }

.content { flex: 1; padding: 8px 24px 60px; min-width: 0; }
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0 16px; gap: 12px; flex-wrap: wrap;
}
.page-head h2 { font-size: 20px; font-weight: 400; margin: 0; }

/* Drawer nav for narrow screens */
@media (max-width: 900px) {
    .sidebar {
        position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
        width: 280px; flex-basis: 280px; height: auto;
        padding: 12px 8px 24px 0;
        border-right: 1px solid var(--line);
        box-shadow: 2px 0 16px rgba(0,0,0,.18);
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 30;
        display: block;
    }
    .nav-toggle:checked ~ .layout .sidebar { transform: translateX(0); }
    .nav-toggle:checked ~ .layout .nav-scrim {
        display: block; position: fixed; inset: var(--topbar-h) 0 0 0;
        background: rgba(32,33,36,.5); z-index: 25;
    }
    .nav-toggle-btn { display: inline-flex; }
    .nav-toggle:checked ~ .topbar .nav-toggle-btn .bar-open { display: none; }
    .nav-toggle-btn .bar-close { display: none; }
    .nav-toggle:checked ~ .topbar .nav-toggle-btn .bar-close { display: inline; }
    .sidebar .nav-item { border-radius: 8px; padding: 0 16px; margin-left: 8px; }
}

/* ===== Buttons ===== */
.btn {
    height: 36px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--line);
    background: #fff; color: #8B30E7; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { background: #f8f9fa; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #8B30E7; border-color: #8B30E7; color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-danger { color: #d93025; border-color: #f2c2bf; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
@media (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
}
.btn-icon { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px; border-radius: 50%; }
.btn-icon:hover { background: #f1f3f4; }

/* ===== Cards / tables ===== */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.card + .card { margin-top: 16px; }
.card-head { padding: 14px 16px; border-bottom: 1px solid #eee; font-weight: 500; }
.card-body { padding: 16px; }

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
table.tbl th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
table.tbl tr:hover td { background: #f8f9fa; }
table.tbl input[type=checkbox] { width: 18px; height: 18px; }

/* Zone leads the row; filename is supporting detail. */
.cell-title .t-zone { font-weight: 500; }
.cell-title .t-file {
    color: var(--muted); font-size: 12px; margin-top: 2px;
    overflow-wrap: anywhere;
}
.t-sub { font-size: 12px; }

/* ----- Card table for phones -----
   Each row becomes a card: title top-left, status top-right, meta on one
   inline line, actions in a single row at the bottom. */
@media (max-width: 720px) {
    .table-wrap { overflow-x: visible; }
    table.tbl.responsive,
    table.tbl.responsive tbody,
    table.tbl.responsive td { display: block; width: 100%; }
    table.tbl.responsive thead { position: absolute; left: -9999px; }

    /* Fixed 3-column grid: checkbox | body | status. Every cell is placed
       explicitly so nothing auto-creates extra columns (which both widened
       the row and stacked cells on top of each other). */
    table.tbl.responsive tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 10px; row-gap: 6px;
        border: 1px solid var(--line); border-radius: var(--radius);
        padding: 12px; margin-bottom: 10px; background: #fff;
    }
    table.tbl.responsive tr:hover td { background: transparent; }
    table.tbl.responsive td { border: 0; padding: 0; text-align: left; }

    table.tbl.responsive td.cell-select {
        grid-column: 1; grid-row: 1; padding-top: 1px;
    }
    table.tbl.responsive td.cell-title {
        grid-column: 2; grid-row: 1; min-width: 0;
    }
    table.tbl.responsive td.cell-status {
        grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap;
    }
    table.tbl.responsive td.cell-status .t-sub {
        display: block; margin-top: 4px; margin-left: 0; white-space: nowrap;
    }

    /* Every meta cell stacks in column 2 under the title, one per row. */
    table.tbl.responsive td.cell-meta {
        grid-column: 2 / -1;
        font-size: 13px; line-height: 1.5;
        color: var(--text);
    }
    table.tbl.responsive td.cell-meta[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--muted);
    }
    table.tbl.responsive td.cell-meta .t-sub {
        display: inline; margin-left: 4px; color: var(--muted);
    }
    /* An unlabelled, empty meta cell shouldn't hold a row of its own. */
    table.tbl.responsive td.cell-meta:empty { display: none; }

    /* Tables that still use plain labelled cells get a clean two-column list. */
    table.tbl.responsive td[data-label]:not(.cell-meta):not(.cell-status) {
        display: flex; gap: 10px; align-items: baseline;
        padding: 6px 0; border-bottom: 1px solid #f1f3f4;
    }
    table.tbl.responsive td[data-label]:not(.cell-meta):not(.cell-status)::before {
        content: attr(data-label);
        flex: 0 0 36%; max-width: 36%;
        color: var(--muted); font-size: 11px; text-transform: uppercase;
        letter-spacing: .4px;
    }

    table.tbl.responsive td.cell-actions {
        grid-column: 1 / -1; text-align: left;
        display: flex; gap: 8px; margin-top: 6px;
    }
    table.tbl.responsive td.cell-actions::before { display: none; }
    table.tbl.responsive td.cell-actions .btn { flex: 1 1 auto; justify-content: center; }
    table.tbl.responsive td.cell-actions .btn-primary { flex: 1.4 1 auto; }
    table.tbl.responsive td.cell-actions form { display: contents; }
}

.empty { padding: 80px 0; text-align: center; color: var(--muted); }

.badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px;
    white-space: nowrap;
}
.badge-pending { background: #fef7e0; color: #b06000; }
.badge-queued, .badge-sending { background: #fef7e0; color: #b06000; }
.badge-sent { background: #e6f4ea; color: #137333; }
.badge-downloaded { background: var(--blue-soft); color: var(--blue-dark); }
.badge-failed { background: #fce8e6; color: #c5221f; }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat {
    flex: 1 1 150px; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px;
}
@media (max-width: 560px) {
    .stat { flex-basis: calc(50% - 6px); padding: 12px; }
    .stat .num { font-size: 22px; }
}
.stat .num { font-size: 26px; font-weight: 500; }
.stat .lbl { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ===== Form ===== */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
    width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 14px; outline: none; font-family: inherit;
    color: var(--text); background-color: #fff;
}
/* Same custom chevron as the filter bar so every select matches. */
.field select {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.field textarea { height: auto; padding: 8px 10px; }
.field input:focus, .field select:focus { border-color: #8B30E7; }
/* Comfortable tap targets and no iOS zoom-on-focus (needs >=16px). */
@media (max-width: 600px) {
    .field input, .field select, .field textarea { height: 44px; font-size: 16px; }
    .field textarea { height: auto; }
}
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; }

.dropzone {
    border: 2px dashed var(--line); border-radius: var(--radius); padding: 36px;
    text-align: center; color: var(--muted); cursor: pointer; background: #fafbfc;
}
.dropzone.dragover { border-color: #8B30E7; background: var(--blue-soft); color: var(--blue-dark); }

.toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 0;
}
.toolbar .spacer { flex: 1; }

/* Filter bar: selects promoted off inline styles.
   The native arrow is replaced with our own chevron so the closed control
   matches the cards it sits above. The open menu is drawn by the OS. */
.filters {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0;
}
.filters select, .filters .filter-control {
    appearance: none; -webkit-appearance: none;
    height: 38px; border: 1px solid var(--line); border-radius: 8px;
    padding: 0 34px 0 12px; font-size: 14px; font-family: inherit;
    color: var(--text); background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    max-width: 100%; cursor: pointer;
    text-overflow: ellipsis;
}
.filters select:focus-visible, .filters .filter-control:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent;
}
/* An active filter reads as selected rather than just another empty control. */
.filters select:not([data-empty]) { border-color: #c6dafc; background-color: var(--blue-soft); }

@media (max-width: 600px) {
    .filters { gap: 8px; padding: 4px 0 10px; }
    /* Two filters share a row; a third or more wraps to full width. */
    .filters select, .filters .filter-control {
        flex: 1 1 calc(50% - 4px); min-width: 0; height: 44px;
        font-size: 16px; /* below 16px Safari zooms the page on focus */
    }
    .filters:has(select:nth-of-type(3)) select { flex-basis: 100%; }
    .toolbar [data-needs-selection],
    .toolbar button[type="submit"] { flex: 1 1 auto; justify-content: center; }
}

/* Action toolbar sticks to the bottom on phones so it stays reachable.
   With nothing selected it collapses instead of holding dead space. */
@media (max-width: 720px) {
    .toolbar.actions-sticky {
        position: sticky; bottom: 0; z-index: 15;
        background: #fff; border-top: 1px solid var(--line);
        margin: 12px -12px 0; padding: 10px 12px;
        box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    }
    .toolbar.actions-sticky.is-empty { display: none; }
    .toolbar.actions-sticky .btn { flex: 1 1 auto; justify-content: center; }
    .toolbar.actions-sticky .spacer { display: none; }
}

.selection-bar {
    background: var(--blue-soft); border: 1px solid #c6dafc; border-radius: var(--radius);
    padding: 8px 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-size: 13px;
}
.selection-bar.is-empty { display: none; }

/* ===== Login ===== */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: #f8f9fa; padding: 24px;
}
.login-card {
    width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; padding: 40px 32px; text-align: center;
}
.login-card h1 { font-size: 22px; font-weight: 400; margin: 16px 0 6px; }
.login-card p { color: var(--muted); margin: 0 0 28px; }
.login-logo {
    width: 56px; height: 56px; border-radius: 12px; background: #8B30E7; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 28px;
}
#googleBtn { display: flex; justify-content: center; }

.toast {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px;
    background: #202124; color: #fff; padding: 12px 20px; border-radius: 6px; z-index: 100;
    box-shadow: 0 3px 10px rgba(0,0,0,.25); max-width: 90vw;
}
.toast.error { background: #c5221f; }

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(32,33,36,.5); z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
    background: #fff; border-radius: 8px; width: 100%; max-width: 460px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.modal .modal-head { padding: 18px 20px; font-size: 17px; border-bottom: 1px solid #eee; }
.modal .modal-body { padding: 20px; max-height: 60vh; overflow: auto; }
.modal .modal-foot { padding: 12px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 8px; }
.ticket-warning-modal { max-width: 500px; }
.ticket-warning-title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ticket-warning-icon {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; flex: 0 0 auto;
    background: #fce8e6; color: #c5221f; font-weight: 700;
}
.ticket-warning-modal .modal-body > p:first-child { margin-top: 0; line-height: 1.55; }
.ticket-warning-box {
    padding: 12px 14px; border: 1px solid #f2c2bf; border-radius: 8px;
    background: #fce8e6; color: #8c1d18; line-height: 1.55;
}
.ticket-warning-box b { display: block; margin-bottom: 2px; }
.ticket-warning-modal .modal-foot .btn-danger { background: #c5221f; border-color: #c5221f; color: #fff; }
.ticket-warning-modal .modal-foot .btn-danger:hover { background: #a50e0e; }

/* ===== Modal gui mail ===== */
.send-modal { max-width: 480px; }
.send-modal .modal-head { display: flex; align-items: center; justify-content: space-between; }
.send-modal .modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.send-modal-lead { margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.send-modal-note { font-size: 12px; line-height: 1.5; margin-top: -4px; }
.send-modal-warn {
    margin-top: 4px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.55;
    border: 1px solid #f2c2bf; background: #fce8e6; color: #8c1d18;
}
.send-modal-apply {
    margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.55;
    border: 1px solid rgba(139,48,231,.2); background: rgba(139,48,231,.06); color: var(--text);
}
.send-modal-apply b { word-break: break-all; }
.send-modal .modal-foot .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ===== PWA install ===== */
.pwa-install-banner {
    position: fixed; z-index: 45; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
    width: min(560px, calc(100vw - 24px)); min-height: 68px; transform: translateX(-50%);
    align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid rgba(139,48,231,.18); border-radius: 14px; background: rgba(255,255,255,.97);
    box-shadow: 0 12px 34px rgba(32,33,36,.22); backdrop-filter: blur(10px);
}
.pwa-install-banner > img { flex: 0 0 44px; border-radius: 11px; }
.pwa-install-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pwa-install-copy b { font-size: 14px; }
.pwa-install-copy span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-banner-close { flex: 0 0 auto; }

.pwa-install-modal { max-width: 430px; border-radius: 12px; }
.pwa-install-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pwa-install-modal .modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.pwa-install-modal .modal-body { font-size: 14px; line-height: 1.65; }
.pwa-install-modal .modal-body p { margin: 0 0 15px; }
.pwa-install-modal .modal-body p:last-child { margin-bottom: 0; }
.pwa-install-modal .modal-body b { font-weight: 600; }
.pwa-share-symbol {
    display: inline-flex; width: 22px; height: 22px; margin: 0 4px 0 6px;
    align-items: center; justify-content: center; vertical-align: -5px;
    border: 1.5px solid #1a73e8; border-radius: 4px; color: #1a73e8; font-size: 16px; line-height: 1;
}
.pwa-guide-note {
    margin-top: 18px; padding: 10px 12px; border-radius: 8px;
    background: #f3eafb; color: #6420a8; font-size: 12px; line-height: 1.55;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }

/* ===== Ve dien tu lat hai mat ===== */
.ticket-show-page {
    min-height: calc(100vh - 132px); padding: 8px 0 30px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(255,122,26,.08), transparent 34%), #fff;
}
.ticket-show-actions {
    width: min(100%, 430px); display: flex; justify-content: space-between;
    gap: 10px; margin-bottom: 18px;
}
.ticket-flip {
    appearance: none; width: 380px; height: 620px; max-width: calc(100vw - 48px);
    padding: 0; border: 0; background: transparent; perspective: 1600px;
    cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.ticket-flip:focus-visible { outline: 3px solid #ff8a32; outline-offset: 8px; }
.ticket-flip-inner {
    position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
    transform: rotateY(var(--flip, 0deg));
    transition: transform .75s cubic-bezier(.4,.1,.2,1);
}
.ticket-flip.is-flipped .ticket-flip-inner { --flip: 180deg; }
.digital-ticket {
    position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% 67.42%, calc(100% - 16px) 70%, 100% 72.58%, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 72.58%, 16px 70%, 0 67.42%, 0 24px);
    background: #0a0402; box-shadow: 0 30px 70px -20px rgba(230,20,10,.45);
    font-family: 'Be Vietnam Pro', Arial, sans-serif;
}
.ticket-artwork {
    position: absolute; inset: 0; background: #180300 url('/images/ticket-artwork.png') 50% 30%/cover no-repeat;
}
.ticket-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,rgba(10,4,2,.45) 0%,rgba(10,4,2,0) 28%,rgba(12,3,2,.55) 61%,rgba(10,2,1,.9) 79%,rgba(8,2,1,.94) 100%);
}
.ticket-topline {
    position: absolute; top: 18px; left: 18px; right: 18px; display: flex;
    align-items: center; justify-content: space-between; gap: 12px;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700;
    letter-spacing: .12em; color: rgba(255,255,255,.95);
}
.ticket-topline .ticket-code { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-day { color: #ffb060; font-size: 15px; white-space: nowrap; }
.ticket-perforation {
    position: absolute; top: 433px; left: 18px; right: 18px; height: 2px;
    background-image: linear-gradient(90deg,rgba(255,255,255,.7) 0 6px,transparent 6px 13px);
    background-size: 13px 2px;
}
.ticket-front-info {
    position: absolute; top: 435px; left: 0; right: 0; bottom: 0; padding: 15px 22px 13px;
    color: #fff; display: flex; flex-direction: column;
}
.ticket-front-info h1 {
    position: relative; z-index: 1; margin: 0; text-align: center;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800;
    font-size: 22px; line-height: 1.05; letter-spacing: .025em; text-transform: uppercase;
}
.ticket-subtitle {
    position: relative; z-index: 1; margin: 3px 0 0; text-align: center;
    font-size: 9.5px; font-weight: 500; color: rgba(255,222,214,.92);
}
.ticket-date-watermark {
    position: absolute; z-index: 0; left: 50%; top: 90px; transform: translateX(-50%);
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 42px;
    font-weight: 800; letter-spacing: .08em; color: rgba(255,190,130,.14); pointer-events: none;
}
.ticket-info-grid {
    position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.35fr;
    column-gap: 18px; row-gap: 8px; margin-top: 10px;
}
.ticket-info-item, .ticket-owner { min-width: 0; }
.ticket-info-item .label, .ticket-owner .label {
    display: block; margin-bottom: 1px; font-size: 8px; line-height: 1.15; letter-spacing: .16em;
    color: rgba(255,215,205,.86); font-weight: 700;
}
.ticket-info-item strong, .ticket-owner strong {
    display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 16px; line-height: 1.05; font-weight: 700; letter-spacing: .01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-owner { margin-top: 10px; }
.ticket-back {
    transform: rotateY(180deg); color: #fff;
    background: #b30c05 url('/images/ticket-artwork.png') center/cover no-repeat;
}
.ticket-back-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(190,12,5,.91),rgba(105,5,2,.96)); }
.ticket-back-content {
    position: relative; height: 100%; padding: 28px 26px 23px; display: flex;
    flex-direction: column; align-items: center; text-align: center;
}
.ticket-mini-art img { width: 78px; height: 78px; object-fit: cover; border: 1px solid rgba(255,255,255,.35); }
.ticket-back h2 {
    margin: 12px 0 0; max-width: 290px; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 20px; line-height: 1.08; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.ticket-back-day { margin-top: 6px; font-size: 10px; letter-spacing: .2em; font-weight: 600; color: rgba(255,225,215,.95); }
.ticket-back-date { margin-top: 4px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #fff; }
.ticket-codes-row { margin-top: 16px; display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.ticket-qr-frame { padding: 11px; background: #fff; box-shadow: 0 18px 44px -14px rgba(0,0,0,.5); }
.ticket-qr-frame img { display: block; width: 210px; height: 210px; object-fit: contain; image-rendering: pixelated; }
.ticket-codes-row.has-barcode .ticket-qr-frame img { width: 186px; height: 186px; }
.ticket-barcode-frame {
    width: 72px; padding: 8px; display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 18px 44px -14px rgba(0,0,0,.5);
}
.ticket-barcode-frame img { display: block; width: 100%; height: 186px; object-fit: contain; image-rendering: pixelated; }
.ticket-code-large {
    margin-top: 13px; max-width: 100%; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 18px; font-weight: 700; letter-spacing: .16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-qr-error {
    width: 238px; height: 238px; margin-top: 20px; padding: 24px; background: rgba(255,255,255,.95);
    color: #7d100b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.ticket-qr-error strong { font-size: 17px; }
.ticket-qr-error span { font-size: 12px; line-height: 1.5; }
.ticket-terms { margin-top: auto; width: 100%; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.6); }
.ticket-terms p { margin: 0; font-size: 9.5px; line-height: 1.55; color: rgba(255,220,212,.87); }
.ticket-flip-hint { margin-top: 18px; font-size: 11px; letter-spacing: .14em; color: #777; font-weight: 600; }
.ticket-flip-hint span { display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: #ff6a00; vertical-align: 2px; }

/* ===== Giu & vuot de nghieng ve 3D ===== */
.ticket-flip { touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ticket-tilt {
    position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
    transition: transform .6s cubic-bezier(.2,.8,.25,1);
    will-change: transform;
}
.ticket-flip.is-tilting .ticket-tilt { transition: transform .08s linear; }
.ticket-flip.is-tilting { cursor: grabbing; }
.ticket-flip.is-tilting .ticket-flip-inner { transition: transform .08s linear; }
.ticket-flip.is-snapping .ticket-flip-inner { transition: transform .55s cubic-bezier(.22,.9,.24,1); }
.ticket-glare {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    transition: opacity .5s ease;
    clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% 67.42%, calc(100% - 16px) 70%, 100% 72.58%, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 72.58%, 16px 70%, 0 67.42%, 0 24px);
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255,240,220,.5) 0%, rgba(255,200,150,.18) 32%, rgba(255,180,120,0) 62%);
    mix-blend-mode: screen;
}
.ticket-flip.is-tilting .ticket-glare { opacity: 1; transition: opacity .12s ease; }
.ticket-shadow {
    position: absolute; left: 8%; right: 8%; bottom: -34px; height: 42px; z-index: -1;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(120,10,4,.42), rgba(120,10,4,0) 70%);
    filter: blur(6px);
    transform: translateX(var(--shadow-x, 0px)) scale(var(--shadow-s, 1));
    transition: transform .6s cubic-bezier(.2,.8,.25,1);
}
.ticket-flip.is-tilting .ticket-shadow { transition: transform .08s linear; }

@media (prefers-reduced-motion: reduce) {
    .ticket-tilt, .ticket-flip-inner, .ticket-shadow { transition: none !important; }
    .ticket-glare { display: none; }
}

@media (max-width: 520px) {
    .ticket-show-page { justify-content: flex-start; }
    .ticket-show-actions { max-width: calc(100vw - 24px); }
    .ticket-flip { width: min(380px, calc(100vw - 24px)); height: min(620px, calc((100vw - 24px) * 1.6316)); }
    .ticket-perforation { top: 69.84%; }
    .ticket-front-info { top: 70.16%; padding: 12px 18px 10px; }
    .ticket-front-info h1 { font-size: clamp(17px, 5vw, 22px); }
    .ticket-info-grid { margin-top: 8px; row-gap: 6px; }
    .ticket-info-item strong { font-size: clamp(13px, 4vw, 16px); }
    .ticket-date-watermark { top: 76px; font-size: 36px; }
    .ticket-owner { display: none; }
    .ticket-back-content { padding: 20px 22px 18px; }
    .ticket-mini-art img { width: 64px; height: 64px; }
    .ticket-codes-row { margin-top: 10px; gap: 7px; }
    .ticket-qr-frame { padding: 8px; }
    .ticket-qr-frame img { width: min(190px, 48vw); height: min(190px, 48vw); }
    .ticket-codes-row.has-barcode .ticket-qr-frame img { width: min(168px, 43vw); height: min(168px, 43vw); }
    .ticket-barcode-frame { width: min(62px, 17vw); padding: 6px; }
    .ticket-barcode-frame img { height: min(168px, 43vw); }
}

@media (max-width: 900px) {
    .content { padding: 8px 12px 60px; }
    .topbar .search { display: none; }
    .topbar .brand { font-size: 18px; gap: 8px; }
    .modal-backdrop { padding: 12px; }
    .modal .modal-body { max-height: 70vh; }
    .page-head h2 { font-size: 18px; }
    .pwa-install-banner { bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
    .pwa-install-banner { gap: 9px; padding: 9px 10px; }
    .pwa-install-banner > img { width: 40px; height: 40px; flex-basis: 40px; }
    .pwa-install-banner .btn-primary { height: 34px; min-height: 34px; padding: 0 12px; }
    .pwa-install-copy span { max-width: 150px; }
    .pwa-install-modal .modal-body { font-size: 13.5px; }
}

/* Phones: keep the wordmark, shrink the logo, and push the avatar to the
   right edge (the hidden search form no longer spaces things out). */
@media (max-width: 900px) {
    .topbar .brand { margin-right: auto; min-width: 0; }
}
@media (max-width: 480px) {
    .topbar { gap: 10px; padding: 0 12px; }
    .topbar .brand { font-size: 16px; gap: 8px; }
    .topbar .brand .brand-logo { width: 76px; height: 28px; padding: 4px 5px; }
}
@media (max-width: 360px) {
    .topbar .brand .brand-logo { width: 62px; height: 26px; }
    .topbar .brand { font-size: 15px; }
}

/* Search field relocated into the drawer on narrow screens */
.sidebar-search { display: none; padding: 8px 12px 12px 8px; }
.sidebar-search input {
    width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 8px; font-size: 15px; outline: none;
}
.sidebar-search input:focus { border-color: #8B30E7; }
@media (max-width: 900px) {
    .sidebar-search { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}