:root {
    --bg: #f5f8fa; --card: #fff; --text: #181c32; --muted: #7e8299; --border: #eff2f5;
    --accent: #7239ea; --accent-soft: #f8f5ff; --ok: #50cd89; --ok-text: #2a8f5a; --warn: #ffc700; --err: #f1416c;
    --term-bg: #000080; --term-text: #fff;
}

html, body { background: var(--bg); color: var(--text); font: 13px/1.5 Inter, "Segoe UI", system-ui, sans-serif; }
h1:focus { outline: none; }
a { color: var(--accent); }

.app { display: flex; min-height: 100vh; }
.sidebar { width: 250px; flex: none; background: var(--card); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.logo { display: flex; align-items: center; gap: 10px; padding: 18px 20px; text-decoration: none; border-bottom: 1px solid var(--border); }
.logo-mark { background: var(--accent); color: #fff; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.logo-text { color: #1e3a8a; font-weight: 700; letter-spacing: .5px; }

.menu { padding: 10px 12px 30px; }
.menu-heading { margin: 16px 8px 6px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.menu-group summary { list-style: none; cursor: pointer; padding: 7px 10px; border-radius: 6px; font-weight: 500; color: #3f4254; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group summary::after { content: "›"; float: right; transition: transform .15s; }
.menu-group[open] summary::after { transform: rotate(90deg); }
.menu-group summary:hover { background: var(--bg); }
.menu-group .menu-link { padding-left: 26px; }
.menu-link { display: block; padding: 6px 10px; border-radius: 6px; color: #5e6278; text-decoration: none; }
.menu-link:hover { background: var(--bg); color: var(--accent); }
.menu-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.menu-link.disabled { color: #b5b5c3; cursor: default; }
.menu-link.disabled:hover { background: none; color: #b5b5c3; }
.menu-link em { font-style: normal; font-size: 10px; border: 1px solid #e4e6ef; border-radius: 4px; padding: 0 4px; margin-left: 4px; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--border); min-height: 56px; }
.topbar .user { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .user form { margin: 0; }
.user-name { color: var(--text); text-decoration: none; font-weight: 500; }
.content { padding: 24px; flex: 1; }
.footer { padding: 12px 24px; color: var(--muted); font-size: 12px; }

.pool { display: flex; gap: 8px; flex-wrap: wrap; }
.pool-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 20px; background: var(--bg); color: var(--muted); border: 1px solid transparent; cursor: default; }
.pool-item.active { border-color: currentColor; font-weight: 600; }
.pool-item .pub { font-size: 10px; opacity: .75; }
.rights-box { border: 1px dashed #e4e6ef; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.rights-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; max-height: 180px; overflow: auto; }
.rights-cell { font-size: 12px; color: var(--muted); max-width: 320px; }
.pool-item.clickable { cursor: pointer; }
.pool-item.clickable:hover { border-color: var(--accent); color: var(--accent); }
.modal-backdrop-lite { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1050; }
.confirm-box { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); background: var(--card); border-radius: 12px; padding: 20px 22px; z-index: 1051; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
.confirm-box h5 { font-weight: 600; margin-bottom: 12px; }
.pool-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #b5b5c3; }
.pool-item.on { color: var(--ok-text); } .pool-item.on .dot { background: var(--ok); }
.pool-item.busy { color: #b08800; } .pool-item.busy .dot { background: var(--warn); }
.pool-item.err { color: var(--err); } .pool-item.err .dot { background: var(--err); }

.card-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 0 20px rgba(76, 87, 125, .02); }
.card-box h2, .page-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .form-control, .toolbar .form-select { width: auto; }
.hint { color: var(--muted); font-size: 12px; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus { background: #5014d0; border-color: #5014d0; }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; padding: 8px; border-bottom: 1px dashed #e4e6ef; }
table.grid td { padding: 8px; border-bottom: 1px dashed #eff2f5; vertical-align: middle; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.sel td { background: var(--accent-soft); }
table.grid tr.failed td { color: var(--err); }
.badge-on { background: #e8fff3; color: var(--ok-text); border-radius: 4px; padding: 2px 8px; font-size: 11px; }
.badge-off { background: #fff5f8; color: var(--err); border-radius: 4px; padding: 2px 8px; font-size: 11px; }

/* Terminal giống Bov: nền xanh đậm, chữ trắng */
.terminal { background: var(--term-bg); color: var(--term-text); font: 13px/1.45 Consolas, "Courier New", monospace; border-radius: 8px; padding: 12px 14px; min-height: 420px; max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.terminal .cmd { color: #ffd54f; }
.terminal .meta { color: #9fa8da; font-size: 11px; }
.terminal .err { color: #ff8a80; }
.terminal .help { white-space: normal; font-size: 12px; line-height: 1.7; }
.terminal .help div::before { content: "• "; }
.terminal .help b { color: #ffd54f; font-weight: normal; }
.cmd-input { font-family: Consolas, monospace; text-transform: uppercase; }
.keys .btn { font-family: Consolas, monospace; min-width: 36px; }
.suggest { max-height: 420px; overflow: auto; }
.suggest button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 4px 8px; font: 12px Consolas, monospace; color: #3f4254; border-radius: 4px; }
.suggest button:hover { background: var(--accent-soft); color: var(--accent); }
/* Dashboard Ticketing */
.tour-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 20px; }
.tour-code { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.tour-code b { display: block; }
.tour-code span { color: var(--muted); font-size: 12px; }
.tl-badge { border-radius: 6px; padding: 4px 10px; font-weight: 600; font-size: 12px; }
.tl-badge.danger { background: #fff5f8; color: var(--err); }
.tl-badge.warning { background: #fff8dd; color: #b08800; }
.tl-badge.primary { background: #f1faff; color: #009ef7; }
/* Booking & Sales report */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; border-top: 4px solid var(--accent); }
.kpi.money { border-top-color: #16a34a; }
.kpi-num { font-size: 22px; font-weight: 800; color: #1e3a8a; }
.kpi.money .kpi-num { color: #15803d; }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.st { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700; background: #f1f5f9; color: #475569; white-space: nowrap; }
.st-issued, .st-ticketed { background: #dcfce7; color: #15803d; }
.st-used, .st-exchanged { background: #e0f2fe; color: #0369a1; }
.st-void, .st-cancelled, .st-expired { background: #fee2e2; color: #b91c1c; }
.st-refund { background: #fef3c7; color: #b45309; }
.st-holding { background: #ede9fe; color: #6d28d9; }
.st-ll { background: #fff7ed; color: #c2410c; }
table.grid tr.total-row td { font-weight: 800; border-top: 2px solid #cbd5e1; background: #f8fafc; }
.issue-box { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.issue-title { font-weight: 800; color: #c2410c; }
.confirm-box.booking-info { width: min(820px, calc(100vw - 32px)); top: 8%; max-height: 84vh; overflow: auto; }

/* Trang Booking – bố cục giống Bov: trái Seat Sold, phải Seat Available */
.flight-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.flight-head input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
.dir-tab { border: 0; background: none; color: var(--muted); padding: 6px 4px; border-bottom: 3px solid transparent; font-size: 15px; }
.dir-tab b { font-weight: 700; letter-spacing: .5px; }
.dir-tab .dir-date { font-size: 12px; font-weight: 600; }
.dir-tab.active { color: #1e3a8a; border-bottom-color: var(--accent); }
.dir-tab.active .dir-date { color: var(--accent); }
.dir-tab.done::after { content: " ✓"; color: #198754; font-weight: 700; }
.sector-list { display: flex; flex-wrap: wrap; gap: 0; }
.sector-chip { display: flex; align-items: center; gap: 24px; padding: 10px 16px; border: 1px solid #e5e7eb; background: #fff; }
.sector-chip .seg-date { font-size: 14px; }
.sector-chip .seg-route { margin-top: 2px; }

/* Chữ khóa: mã PNR, hành trình, chuyến bay, hạng, ngày */
.pnr-code { font: 700 15px Consolas, "Courier New", monospace; color: #1e3a8a; letter-spacing: 1px; }
.route-pill { display: inline-block; background: #eef6ff; color: #0b63c5; border: 1px solid #cfe5ff; border-radius: 6px; padding: 2px 10px; font: 700 13px Consolas, monospace; letter-spacing: .5px; white-space: nowrap; }
.seg-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.seg-date { font-weight: 700; color: #b45309; }
.seg-flt { font-weight: 700; color: #fff; background: var(--accent); border-radius: 4px; padding: 0 6px; font-size: 12px; }
.seg-cls { font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid #e3d7ff; border-radius: 4px; min-width: 22px; text-align: center; font-size: 12px; }
.seg-route { font-weight: 700; color: #0b63c5; letter-spacing: .5px; }
.seg-arrow { color: var(--muted); font-weight: 400; margin: 0 3px; }
.pax-name { font-weight: 600; color: var(--text); }
.swap-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--warn); color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 1px; box-shadow: 0 2px 6px rgba(255, 199, 0, .45); transition: transform .2s; }
.swap-btn:hover { transform: rotate(180deg); }
.ft-time { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.ft-airport { font-size: 13px; font-weight: 700; color: #0b63c5; letter-spacing: 1px; }
.flt-no { display: inline-block; background: var(--accent); color: #fff !important; border-radius: 5px; padding: 1px 8px; font-weight: 700; font-size: 13px; }
.flt-ac { color: var(--muted); font-size: 12px; margin-left: 4px; }
.seat-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }

/* Itinerary: khối nổi bật khác hẳn các thẻ trắng còn lại */
.itin-box { background: linear-gradient(135deg, #4b5d8f 0%, #5874c2 55%, #9a75e6 100%); border: 0; color: #fff; box-shadow: 0 8px 24px rgba(30, 58, 138, .22); }
.itin-title { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.itin-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.itin-title { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.itin-route { background: #facc15; color: #1e1b4b; border-radius: 6px; padding: 3px 12px; font: 800 15px Consolas, monospace; letter-spacing: 1px; }
.itin-count { color: #eef2ff; font-size: 12px; font-weight: 600; }
.itin-line { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; background: #fff; color: var(--text); border-radius: 10px; padding: 10px 16px; margin-bottom: 8px; border-left: 8px solid #22c55e; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.itin-line.mode-ll { border-left-color: #f59e0b; }
.itin-line.mode-ds { border-left-color: #0ea5e9; }
.itin-date { font-size: 18px; font-weight: 800; color: #c2410c; min-width: 70px; }
.itin-flt { font-size: 16px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 6px; padding: 2px 10px; }
.itin-cls { font-size: 16px; font-weight: 800; color: #fff; background: #e11d48; border-radius: 6px; min-width: 32px; text-align: center; padding: 2px 8px; }
.itin-od { font: 800 18px Consolas, monospace; color: #1e3a8a; letter-spacing: 1px; }
.itin-arrow { color: #94a3b8; font-size: 14px; margin: 0 8px; }
.itin-mode { font-size: 12px; font-weight: 800; border-radius: 20px; padding: 3px 12px; background: #dcfce7; color: #15803d; }
.mode-ll .itin-mode { background: #fef3c7; color: #b45309; }
.mode-ds .itin-mode { background: #e0f2fe; color: #0369a1; }
.itin-remove { margin-left: auto; border: 0; background: #fee2e2; color: #dc2626; border-radius: 50%; width: 28px; height: 28px; font-weight: 700; }
.itin-remove:hover { background: #dc2626; color: #fff; }
.itin-hint { color: #eef2ff; font-size: 12px; }
.itin-box pre.screen { margin-top: 8px; }
.price-result { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 8px 14px; color: var(--text); }
.price-result.fail { background: #fff1f2; }
.price-kind { font-weight: 800; color: #1e3a8a; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.price-amount { font-size: 20px; font-weight: 800; color: #15803d; }
.price-msg { white-space: pre-line; font-weight: 600; font-size: 13px; }
.price-result.fail .price-msg { color: #be123c; }
.itin-box .text-success { color: #86efac !important; }
.itin-box .text-danger { color: #fda4af !important; }

/* Booking: tiêu đề, nhãn, loại hành trình */
.card-box h2.sec-title { font-size: 17px; font-weight: 700; color: #1e3a8a; padding-left: 10px; border-left: 4px solid var(--accent); line-height: 1.2; display: flex; align-items: center; }
.field-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1e3a8a; margin-bottom: 4px; }
.fi { font-size: 12px; line-height: 1; }
.fi-dep { color: #0b63c5; }
.fi-arr { color: #16a34a; }
.fi-date { color: #e11d48; }
.trip-tabs { display: inline-flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.trip-tab { border: 0; background: none; padding: 6px 16px; border-radius: 6px; font-weight: 600; color: var(--muted); font-size: 14px; }
.trip-tab:hover { color: var(--accent); }
.trip-tab.active { background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgba(114, 57, 234, .35); }
.dob-required { border-color: var(--err); background: #fff5f8; }
table.pax-grid th { color: #1e3a8a; font-weight: 700; }
.mode-ll { color: #b08800; }
.mode-ds { color: #009ef7; }

.f-station { width: 250px; max-width: calc(50% - 30px); }
.f-date { width: 160px; }
.f-num { width: 85px; }
/* Ô chọn sân bay (như Bov) */
.station-picker { position: relative; }
.station-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 4px 10px; height: 31px; font-weight: 600; color: var(--text); text-align: left; }
.station-btn:hover, .station-btn.open { border-color: var(--accent); }
.station-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-caret { color: var(--muted); font-size: 14px; line-height: 1; margin-top: -6px; }
.station-backdrop { position: fixed; inset: 0; z-index: 1060; }
.station-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: 280px; background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .15); padding: 10px; z-index: 1061; }
.station-search { margin-bottom: 6px; }
.station-list { max-height: 300px; overflow-y: auto; }
.station-item { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 6px; color: #3f4254; font-size: 14px; }
.station-item:hover { background: var(--bg); }
.station-item.sel { background: var(--accent-soft); color: var(--accent); }
.station-item b { font-weight: 700; }
.station-check { color: var(--accent); font-weight: 700; }
.sold-title { color: #b45309; }
.flight-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; margin: 16px 20px; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 10px rgba(76, 87, 125, .06); }
.flight-left { padding: 16px; border-right: 1px dashed #e4e6ef; }
.flight-right { padding: 16px; }
.flight-times { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: 12px; text-align: center; }
.flight-line { border-bottom: 1px solid #b5b5c3; position: relative; padding-bottom: 2px; font-size: 12px; color: var(--muted); }
.flight-line span { color: var(--accent); }
.seat-head { background: var(--accent-soft); color: var(--accent); border-radius: 6px; text-align: center; padding: 8px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.seat-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.seat { min-width: 46px; height: 38px; border-radius: 6px; border: 0; font: 600 14px Inter, system-ui, sans-serif; cursor: pointer; }
.seat.sold { background: var(--bg); color: #3f4254; }
.seat.sold:hover { background: #eee5ff; }
.seat.avail { background: var(--accent); color: #fff; }
.seat.avail:hover { background: #5014d0; }
.seat.sel { outline: 3px solid #ffc700; outline-offset: 1px; }
.seat:disabled { opacity: .35; cursor: not-allowed; }
.seat.avail.closed { background: repeating-linear-gradient(45deg, #a78bfa, #a78bfa 4px, #c4b5fd 4px, #c4b5fd 8px); text-decoration: line-through; opacity: .6; }
.badge-mode { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; }
.badge-mode.nn { background: #e8fff3; color: var(--ok-text); }
.badge-mode.ll { background: #fff8dd; color: #b08800; }
.badge-mode.ds { background: #f1faff; color: #009ef7; }
@media (max-width: 900px) { .flight-card { grid-template-columns: 1fr; } .flight-left { border-right: 0; border-bottom: 1px dashed #e4e6ef; } }
pre.screen { background: var(--term-bg); color: var(--term-text); font: 12px/1.45 Consolas, monospace; border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; margin: 0; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }
.validation-message { color: var(--err); }
.darker-border-checkbox.form-check-input { border-color: #929292; }

/* Báo cáo bán Sabre: ô bấm được, cảnh báo trùng tên */
.link-cell { cursor: pointer; text-decoration: none; color: inherit; border-bottom: 1px dashed #8a7cf0; }
.link-cell:hover { color: #6d3df5; border-bottom-style: solid; }
.dup-row td { background: #fff6e0; }
.dup-warning { border-left: 4px solid #f0a020; background: #fffaf0; }
.dup-warning .sec-title { color: #b56a00; }
.dup-item { display: inline-flex; gap: .35rem; align-items: center; margin-right: 1.1rem; white-space: nowrap; }
.st-dup { background: #ffe2a8; color: #8a5200; margin-left: .4rem; }

/* Sabre Agents + chọn code lấy báo cáo bán */
.agent-on td { background: #f3efff; }
.agent-off td { color: #9aa3b5; }
.emp-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.emp-pick { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border: 1px solid #d9dcef; border-radius: 999px; cursor: pointer; font-size: .85rem; background: #fff; user-select: none; }
.emp-pick.on { border-color: #6d3df5; background: #f3efff; color: #4b23c9; font-weight: 600; }
.emp-pick.loaded::after { content: "✓"; color: #1e9e5a; font-weight: 700; }
.emp-pick input { margin: 0; }

/* Administrator › Users */
.new-user-box { border: 1px dashed #b9aef5; background: #faf8ff; border-radius: 10px; padding: .75rem 1rem; }
.role-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.role-chip { border: 1px solid #d9dcef; background: #fff; color: #8a91a8; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; cursor: pointer; }
.role-chip.on { background: #6d3df5; border-color: #6d3df5; color: #fff; font-weight: 600; }
.role-chip:disabled { opacity: .6; cursor: not-allowed; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cfd3e0; margin-right: .4rem; vertical-align: middle; }
.online-dot.on { background: #1fbf6a; box-shadow: 0 0 0 3px #d4f5e3; }
.st-online { background: #d4f5e3; color: #137a44; }
.user-blocked td { background: #fff3f3; }
.users-grid td { vertical-align: middle; }
.users-grid .role-chips { flex-wrap: nowrap; }
.name-input { border-color: transparent; background: #f6f7fb; font-weight: 600; }
.name-input:hover, .name-input:focus { border-color: #b9aef5; background: #fff; }
.name-input.saved { background: #eafaf1; }

/* Logo Air Cambodia (góc trên trái) */
.logo { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px 12px; }
.logo-img { width: 100%; max-width: 200px; height: auto; display: block; }
.logo-sub { font-size: .68rem; font-weight: 700; letter-spacing: 3px; color: #8a93b8; padding-left: 2px; }

/* Họ tên user (góc trên phải) */
.user-name { display: inline-flex; align-items: center; gap: 8px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1f2f6e, #3d56b0); color: #fff; font-weight: 700; font-size: .85rem; flex: none; }
.user-text { display: flex; flex-direction: column; line-height: 1.15; }
.user-full { font-weight: 700; color: #1f2f6e; }
.user-mail { font-size: .72rem; color: #8a93b8; }

/* Hình máy bay: banner trang Home */
.hero { position: relative; border-radius: 16px; overflow: hidden; min-height: 280px; margin-bottom: 20px;
    background: url("img/aircambodia-plane.webp") center 42% / cover no-repeat, #cfe3f7;
    box-shadow: 0 6px 24px rgba(31, 47, 110, .12); display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 32%, rgba(255,255,255,0) 58%); }
.hero-text { position: relative; padding: 28px 32px; max-width: 520px; }
.hero-kicker { font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #c0703a; }
.hero-title { font-size: 1.9rem; font-weight: 800; color: #1f2f6e; margin: 6px 0 4px; }
.hero-sub { color: #4a5578; margin-bottom: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
    .hero { background-position: 70% 42%; min-height: 240px; }
    .hero::before { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55)); }
}

/* Hình máy bay: trang đăng nhập */
.login-wrap { display: flex; max-width: 980px; margin: 24px auto; background: var(--card); border-radius: 18px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(31, 47, 110, .15); min-height: 460px; }
.login-art { flex: 1.25; position: relative; background: url("img/aircambodia-plane.webp") 58% center / cover no-repeat, #cfe3f7; }
.login-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,47,110,0) 55%, rgba(31,47,110,.55) 100%); }
.login-art-text { position: absolute; left: 28px; bottom: 24px; z-index: 1; color: #fff; }
.login-art-text .hero-kicker { color: #ffd7b8; }
.login-art-title { font-size: 2rem; font-weight: 800; letter-spacing: .5px; }
.login-art-sub { opacity: .9; }
.login-form { flex: 1; padding: 36px 36px 28px; display: flex; align-items: center; }
.login-form section { width: 100%; }
.login-logo { width: 220px; max-width: 100%; display: block; margin-bottom: 22px; }
.login-title { font-size: 1.4rem; font-weight: 800; color: #1f2f6e; margin-bottom: 16px; }
@media (max-width: 760px) {
    .login-wrap { flex-direction: column; margin: 8px 0; }
    .login-art { min-height: 200px; }
    .login-form { padding: 24px 16px; }
}

/* Báo cáo bán: dòng đối chiếu tổng văn phòng WY*T */
.station-row td { background: #f4f6fc; border-bottom: 2px solid #d9def0; font-size: .9rem; }
.st-exchange { background: #e3ecff; color: #2c4fa8; }

/* ===== Bảng báo cáo (Booking & Sales report) ===== */
table.report-grid { border-collapse: separate; border-spacing: 0; border: 1px solid #e6e9f4; border-radius: 10px; overflow: hidden; }
table.report-grid thead th { background: linear-gradient(180deg, #f3f0ff, #ebe6ff); color: #2b2f6b; font-weight: 800; font-size: 12px;
    letter-spacing: .4px; padding: 11px 10px; border-bottom: 2px solid #7239ea; white-space: nowrap; }
table.report-grid tbody td { padding: 9px 10px; border-bottom: 1px solid #eef0f6; }
table.report-grid tbody tr:nth-child(even) td { background: #fafbfe; }
table.report-grid tbody tr:hover td { background: #f1edff; }
table.report-grid tbody tr:last-child td { border-bottom: 0; }
table.report-grid tr.day-start td { border-top: 2px solid #dfe3f1; }
table.report-grid tbody tr:first-child td { border-top: 0; }
table.report-grid .money { font-variant-numeric: tabular-nums; font-weight: 700; color: #1f2f6e; white-space: nowrap; }
table.report-grid .money.neg { color: #c2410c; }
table.report-grid .num { font-variant-numeric: tabular-nums; font-weight: 600; }
table.report-grid .zero { color: #c3c7d6; }
.day-cell { font-weight: 700; color: #1f2f6e; white-space: nowrap; }
.emp-tag { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 12px; color: #4b23c9;
    background: #f1edff; border: 1px solid #ddd3ff; border-radius: 6px; padding: 1px 7px; }
.emp-name { color: #7e8299; font-size: 12.5px; margin-left: 4px; }
/* Summary: mỗi ngày một dải màu xen kẽ */
table.report-grid tbody tr.band-a td { background: #ffffff; }
table.report-grid tbody tr.band-b td { background: #f7f8fd; }
table.report-grid tbody tr.band-a:hover td, table.report-grid tbody tr.band-b:hover td, table.report-grid tbody tr.band-a:nth-child(n):hover td { background: #f1edff; }
table.report-grid tbody tr.station-row td { background: #eef4ff; border-bottom: 2px solid #c9d6f5; font-size: 13px; }
table.report-grid tbody tr.station-row.band-b td { background: #e8effd; }
.station-label { font-weight: 700; color: #2c4fa8; }
table.report-grid tbody tr.total-row td, table.report-grid tbody tr.total-row:hover td { background: linear-gradient(180deg, #2b2f6b, #1f2f6e); color: #fff; font-weight: 800; border-top: 0; }
table.report-grid tbody tr.total-row td .money, table.report-grid tbody tr.total-row td.money { color: #fff; }
table.report-grid tbody tr.dup-row td { background: #fff6e0; }

/* ===== Tải chuyến (Home, Advance Booking) ===== */
.hero.hero-sm { min-height: 190px; }
.hero.hero-sm .hero-title { font-size: 1.6rem; }
.lf-wrap { overflow-x: auto; border: 1px solid #e6e9f4; border-radius: 12px; }
table.lf-grid { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 760px; }
table.lf-grid thead th { background: linear-gradient(180deg, #f3f0ff, #ebe6ff); color: #2b2f6b; text-align: center; padding: 8px 6px;
    border-radius: 8px; border-bottom: 2px solid #7239ea; white-space: nowrap; }
table.lf-grid thead th.today { background: linear-gradient(180deg, #7239ea, #5b2bc4); color: #fff; }
table.lf-grid thead th.lf-flt-h { text-align: left; min-width: 120px; }
.lf-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
.lf-date { font-size: 14px; font-weight: 800; }
tr.lf-point-row td { padding: 10px 4px 2px; font-weight: 800; color: #1f2f6e; font-size: 14px; border-bottom: 2px solid #dfe3f1; }
.lf-point-name { color: #7e8299; font-weight: 600; font-size: 12.5px; }
td.lf-flt { padding: 4px 6px; white-space: nowrap; vertical-align: middle; }
.lf-sector { font-size: 11.5px; color: #7e8299; font-weight: 600; margin-top: 2px; letter-spacing: .3px; }
td.lf-cell { text-align: center; color: #fff; border-radius: 8px; padding: 6px 4px; cursor: pointer; min-width: 86px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); transition: transform .08s, box-shadow .08s; }
td.lf-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31,47,110,.25); }
td.lf-cell.empty { background: #f4f5f9; color: #b8bdcc; cursor: default; box-shadow: none; }
td.lf-cell.empty:hover { transform: none; }
.lf-pct { font-size: 18px; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.lf-seats { font-size: 12px; font-weight: 600; opacity: .95; }
.lf-diff { display: inline-block; margin-left: 4px; background: rgba(255,255,255,.25); border-radius: 6px; padding: 0 4px; font-size: 11px; font-weight: 800; }
.lf-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7e8299; margin-top: 8px; max-width: 360px; }
.lf-bar { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, hsl(0,68%,44%), hsl(60,68%,44%), hsl(120,68%,44%)); }
.lf-detail { width: min(520px, calc(100vw - 32px)); top: 6%; max-height: 86vh; overflow-y: auto; }
.lf-detail-head { color: #fff; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; }
.lf-detail-head .lf-pct { font-size: 26px; }
.lf-pill { display: inline-block; color: #fff; font-weight: 800; border-radius: 6px; padding: 1px 8px; font-size: 12.5px; }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* ===== Advance Booking ===== */
.ab-filter .ab-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed #eceef5; }
.ab-filter .ab-row:first-of-type { border-top: 0; }
.ab-label { width: 92px; flex: none; font-size: 12px; font-weight: 800; color: #2b2f6b; text-transform: uppercase; letter-spacing: .5px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chip { border: 1px solid #d9dcef; background: #fff; color: #3a3f6b; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13px; cursor: pointer; }
.ab-chip:hover { border-color: #7239ea; color: #7239ea; }
.ab-chip.on { background: #7239ea; border-color: #7239ea; color: #fff; box-shadow: 0 2px 6px rgba(114,57,234,.3); }
.ab-chip-n { display: inline-block; margin-left: 4px; font-size: 11px; opacity: .7; }
.ab-actions { padding-top: 12px; }
.ab-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ab-kpi { background: #fff; border: 1px solid #e6e9f4; border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(31,47,110,.05); }
.ab-kpi-num { font-size: 26px; font-weight: 800; color: #1f2f6e; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ab-kpi-num.up, .ab-kpi-num.good { color: #15803d; }
.ab-kpi-num.down, .ab-kpi-num.bad { color: #c2410c; }
.ab-kpi-label { font-size: 12px; font-weight: 700; color: #7e8299; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.ab-kpi-sub { font-size: 12px; color: #9aa0b8; margin-top: 2px; }
.ab-kpi.lf { border: 0; color: #fff; }
.ab-kpi.lf .ab-kpi-num, .ab-kpi.lf .ab-kpi-label { color: #fff; }
.ab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 1100px) { .ab-two { grid-template-columns: 1fr; } }
.ab-chart { display: flex; align-items: flex-end; gap: 10px; height: 240px; padding: 8px 4px 0; overflow-x: auto; }
.ab-col { flex: 1; min-width: 46px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ab-col-val { font-weight: 800; color: #1f2f6e; font-size: 13px; }
.ab-col-track { flex: 1; width: 70%; max-width: 48px; background: #f1f2f8; border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; margin: 4px 0; }
.ab-col-bar { width: 100%; border-radius: 8px 8px 0 0; }
.ab-col-day { font-size: 11px; font-weight: 800; color: #7239ea; text-transform: uppercase; }
.ab-col-date { font-size: 12px; font-weight: 700; color: #2b2f6b; }
.ab-col-sub { font-size: 11px; color: #9aa0b8; white-space: nowrap; }
.ab-bar { position: relative; height: 20px; background: #f1f2f8; border-radius: 6px; overflow: hidden; min-width: 110px; }
.ab-bar-fill { height: 100%; border-radius: 6px; }
.ab-bar-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #1f2f6e;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.chg { font-weight: 800; font-size: 12.5px; }
.chg.up { color: #15803d; } .chg.down { color: #c2410c; }
.cls-chips { display: flex; flex-wrap: wrap; gap: 3px; max-width: 380px; }
.cls-chip { display: inline-flex; align-items: baseline; gap: 2px; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; font-weight: 700;
    border-radius: 5px; padding: 0 5px; border: 1px solid; }
.cls-chip b { font-weight: 800; }
.cls-chip.avail { background: #ecfdf3; border-color: #b7ebc9; color: #15803d; }
.cls-chip.over { background: #fff1f0; border-color: #ffc9c2; color: #c2410c; }
.cls-chip.sold { background: #f3efff; border-color: #ddd3ff; color: #4b23c9; }
.ab-legend { font-size: 12px; color: #7e8299; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ô tổng trong bảng tải chuyến */
table.lf-grid th.lf-total-h { background: linear-gradient(180deg, #2b2f6b, #1f2f6e); color: #fff; }
table.lf-grid td.lf-total { text-align: center; background: #f6f7fc; border-radius: 8px; padding: 6px 4px; min-width: 86px; }
table.lf-grid td.lf-total.grand { background: #e9ecf8; }
.lf-total-sub { font-size: 11px; color: #7e8299; font-weight: 600; margin-top: 2px; white-space: nowrap; }
table.lf-grid tfoot td { border-top: 2px solid #dfe3f1; }
.lf-foot-label { font-weight: 800; color: #1f2f6e; }
.ab-scroll { max-height: 262px; overflow-y: auto; border-radius: 10px; }
.ab-scroll thead th { position: sticky; top: 0; z-index: 1; }
table.ab-sector tbody td { padding-top: 6px; padding-bottom: 6px; }
table.ab-sector .ab-bar { min-width: 70px; }
table.ab-sector th, table.ab-sector td { padding-left: 7px; padding-right: 7px; }
/* By sector: header đứng yên, chỉ cuộn các chặng (bảng không được overflow:hidden thì sticky mới chạy) */
.ab-scroll table.report-grid { overflow: visible; border-radius: 0; border: 0; }
.ab-scroll { border: 1px solid #e6e9f4; }
.ab-scroll thead th { position: sticky; top: 0; z-index: 2; background: #efeaff; box-shadow: inset 0 -2px 0 #7239ea; border-bottom: 0; }

/* ===== Bảng tải chuyến – bản gọn (06/11) ===== */
table.lf-grid { border-spacing: 3px; min-width: 640px; font-size: 13px; }
table.lf-grid thead th { padding: 5px 4px; border-radius: 6px; border-bottom-width: 2px; }
.lf-dow { font-size: 10px; letter-spacing: .6px; }
.lf-date { font-size: 12.5px; font-weight: 800; }
tr.lf-point-row td { padding: 8px 4px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #7239ea; border-bottom: 1px solid #e6e2fb; }
.lf-point-name { text-transform: none; letter-spacing: 0; }
td.lf-flt { padding: 2px 6px; }
.lf-fno { display: inline-block; min-width: 38px; text-align: center; font-weight: 800; font-size: 12.5px; color: #fff; background: #4b23c9; border-radius: 5px; padding: 1px 6px; }
.lf-sector { display: inline; margin-left: 6px; font-size: 11px; }
td.lf-cell { padding: 3px 6px; min-width: 70px; border-radius: 6px; box-shadow: none; text-align: left; white-space: nowrap; line-height: 1.15; }
td.lf-cell:hover { transform: none; box-shadow: 0 0 0 2px #7239ea; }
.lf-pct { font-size: 14px; font-weight: 800; text-shadow: none; }
.lf-pct small { font-size: 10px; font-weight: 700; margin-left: 1px; }
.lf-seats { display: block; font-size: 10.5px; font-weight: 600; opacity: .8; }
.lf-diff { float: right; background: none; padding: 0; font-size: 10.5px; margin: 2px 0 0 4px; }
.lf-diff.up { color: #15803d; } .lf-diff.down { color: #c2410c; }
td.lf-cell.empty { background: #f6f7fb; color: #c3c7d6; text-align: center; border-left: 3px solid #eceef5; }
table.lf-grid td.lf-total { padding: 3px 4px; min-width: 72px; }
table.lf-grid td.lf-total .lf-pill { font-size: 12px; padding: 0 6px; }
.lf-total-sub { font-size: 10px; }

/* ===== Advance Booking – phần đầu nhiều màu (06/11) ===== */
.ab-filter { padding-top: 0; overflow: hidden; }
.ab-head { margin: 0 -20px 14px; padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: linear-gradient(120deg, #3b1d8f 0%, #6a35e8 38%, #2f6fe0 72%, #14a3b8 100%); color: #fff; position: relative; }
.ab-head::after { content: ""; position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); pointer-events: none; }
.ab-head-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ffd7b8; }
.ab-head-title { font-size: 22px; font-weight: 800; margin: 0; color: #fff; }
.ab-tabs { display: flex; background: rgba(255,255,255,.14); border-radius: 12px; padding: 4px; gap: 4px; }
.ab-tabs button { border: 0; background: none; color: #e9e4ff; font-weight: 700; font-size: 13.5px; padding: 6px 14px; border-radius: 9px; }
.ab-tabs button:hover { background: rgba(255,255,255,.12); }
.ab-tabs button.on { background: #fff; color: #4b23c9; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ab-head-info { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #e6eeff; flex-wrap: wrap; position: relative; z-index: 1; }
.ab-head-last { background: rgba(255,255,255,.16); border-radius: 999px; padding: 2px 10px; }
.ab-gear { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; border-radius: 8px; padding: 3px 10px; font-weight: 700; font-size: 12.5px; }
.ab-gear:hover { background: rgba(255,255,255,.25); }
.ab-label { display: flex; align-items: center; gap: 6px; }
.ab-label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: #c9cde0; flex: none; }
.ab-label.c1 { color: #6a35e8; } .ab-label.c1::before { background: #6a35e8; }
.ab-label.c2 { color: #2f6fe0; } .ab-label.c2::before { background: #2f6fe0; }
.ab-label.c3 { color: #0f9aad; } .ab-label.c3::before { background: #14a3b8; }
.ab-label.c4 { color: #d9640f; } .ab-label.c4::before { background: #f08a24; }
.ab-label:empty::before { display: none; }
/* Nút điểm: mỗi điểm một màu (--hue) */
.ab-chip { --hue: 262; border-color: hsl(var(--hue), 60%, 82%); color: hsl(var(--hue), 55%, 34%); background: hsl(var(--hue), 80%, 97%); }
.ab-chip:hover { border-color: hsl(var(--hue), 65%, 55%); color: hsl(var(--hue), 65%, 35%); }
.ab-chip.on { background: hsl(var(--hue), 65%, 50%); border-color: hsl(var(--hue), 65%, 50%); color: #fff; box-shadow: 0 2px 8px hsla(var(--hue), 65%, 45%, .35); }
.ab-chip.all { --hue: 230; }
.ab-chip-n { background: hsla(var(--hue), 60%, 50%, .15); border-radius: 999px; padding: 0 6px; opacity: 1; }
.ab-chip.on .ab-chip-n { background: rgba(255,255,255,.25); }
.ab-quick { display: flex; gap: 4px; margin-left: 4px; }
.ab-quick button { border: 1px solid #b9e6ec; background: #effbfc; color: #0d7f8f; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 12.5px; }
.ab-quick button:hover { border-color: #14a3b8; }
.ab-quick button.on { background: #14a3b8; border-color: #14a3b8; color: #fff; }
.ab-actions .btn-primary { background: linear-gradient(90deg, #6a35e8, #2f6fe0); border: 0; padding-left: 20px; padding-right: 20px; }
/* Cài đặt tự quét */
.ab-settings { background: #fff8f0; border: 1px solid #ffe0bf; border-radius: 12px; padding: 6px 14px; margin-bottom: 10px; }
.ab-settings .ab-row { border-top-color: #ffe7cc; }
.ab-time { display: inline-flex; align-items: center; gap: 4px; background: #f08a24; color: #fff; font-weight: 800; border-radius: 999px; padding: 2px 4px 2px 12px; font-size: 13px; }
.ab-time button { border: 0; background: rgba(255,255,255,.3); color: #fff; width: 20px; height: 20px; border-radius: 50%; line-height: 18px; padding: 0; font-weight: 800; }
/* Thẻ KPI nhiều màu */
.ab-kpi { border-top: 4px solid #c9cde0; }
.ab-kpis .ab-kpi:nth-child(1) { border-top-color: #6a35e8; }
.ab-kpis .ab-kpi:nth-child(2) { border-top-color: #2f6fe0; }
.ab-kpis .ab-kpi:nth-child(3) { border-top-color: #14a3b8; }
.ab-kpis .ab-kpi:nth-child(5) { border-top-color: #f08a24; }
.ab-kpis .ab-kpi:nth-child(6) { border-top-color: #22a35a; }
.ab-kpis .ab-kpi:nth-child(7) { border-top-color: #e2552d; }
.ab-kpi.lf { border-top: 0; }
/* Phân bố LF */
.ab-hist { display: flex; align-items: flex-end; gap: 12px; height: 210px; padding-top: 6px; }
.ab-hcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ab-hval { font-weight: 800; color: #1f2f6e; font-size: 14px; }
.ab-htrack { flex: 1; width: 72%; max-width: 64px; display: flex; align-items: flex-end; margin: 4px 0; border-bottom: 2px solid #e3e6f0; }
.ab-hbar { width: 100%; border-radius: 6px 6px 0 0; min-height: 3px; }
.ab-hlabel { font-size: 12px; font-weight: 700; color: #5a6080; white-space: nowrap; }
/* Pickup */
.ab-pick-head { font-size: 13px; color: #5a6080; margin-bottom: 4px; }
.ab-pick-num { font-size: 22px; font-weight: 800; color: #1f2f6e; }
.ab-svg { width: 100%; height: auto; display: block; }
.ab-grid-line { stroke: #eceef5; stroke-width: 1; }
.ab-axis { font-size: 10.5px; fill: #8a90a8; }
.ab-pt:hover circle:nth-child(2) { r: 6; fill: #7239ea; }
/* Chuyến yếu / mạnh */
.ab-top.weak { border-top: 4px solid #e2552d; }
.ab-top.strong { border-top: 4px solid #22a35a; }
.ab-top-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #eef0f6; }
.ab-top-row:last-child { border-bottom: 0; }
.ab-top-sec { width: 62px; font-size: 12px; font-weight: 700; color: #5a6080; }
.ab-top-date { width: 140px; font-size: 12.5px; font-weight: 700; color: #1f2f6e; white-space: nowrap; }
.ab-dleft { font-size: 11px; font-weight: 700; color: #8a90a8; margin-left: 4px; }
.ab-dleft.soon { color: #e2552d; }

/* ===== Doanh thu BOV (Advance Booking) ===== */
.ab-rev { border-top: 4px solid #14a3b8; }
.ab-rev-tabs { display: flex; gap: 4px; }
.ab-rev-tabs button { border: 1px solid #b9e6ec; background: #effbfc; color: #0d7f8f; border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: 12px; }
.ab-rev-tabs button.on { background: #14a3b8; border-color: #14a3b8; color: #fff; }
.ab-rev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ab-revchart { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 4px; }
.ab-revchart.dense { gap: 2px; }
.ab-rcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ab-rval { font-size: 10.5px; font-weight: 800; color: #1f2f6e; white-space: nowrap; min-height: 14px; }
.ab-rtrack { flex: 1; width: 78%; max-width: 40px; display: flex; align-items: flex-end; margin: 3px 0; border-bottom: 2px solid #e3e6f0; }
.ab-rbar { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2f6fe0, #14a3b8); }
.ab-rcol.we .ab-rbar { background: linear-gradient(180deg, #8fb3f0, #8fd6e0); }
.ab-rcol:hover .ab-rbar { background: linear-gradient(180deg, #6a35e8, #2f6fe0); }
.ab-rday { font-size: 10.5px; font-weight: 800; color: #0d7f8f; text-transform: uppercase; }
/* Phần đầu Booking & Sales report: tông xanh lá → xanh dương */
.ab-head.sr-head { background: linear-gradient(120deg, #0f5e6e 0%, #14a3b8 35%, #2f6fe0 70%, #6a35e8 100%); }
.ab-settings .ab-label { width: 110px; white-space: nowrap; }

/* Doanh thu BOV: mỗi tháng một màu, cuối tuần nhạt + nhãn cam đỏ */
.ab-rcol.m0 .ab-rbar { background: linear-gradient(180deg, #2f6fe0, #14a3b8); }
.ab-rcol.m1 .ab-rbar { background: linear-gradient(180deg, #7239ea, #c04fd8); }
.ab-rcol.m0.we .ab-rbar { background: linear-gradient(180deg, #9cbcf3, #9fdde6); }
.ab-rcol.m1.we .ab-rbar { background: linear-gradient(180deg, #c3a8f6, #e2b2ee); }
.ab-rcol.we .ab-rday { color: #e2552d; }
.ab-rcol.m1 .ab-rday { color: #7239ea; }
.ab-rcol.m1.we .ab-rday { color: #e2552d; }
.ab-rcol.mstart { border-left: 2px dashed #c9cde0; padding-left: 2px; }
.ab-rcol.missing .ab-rtrack { background: repeating-linear-gradient(135deg, #f4f5f9 0 4px, #e9ebf3 4px 8px); }
.ab-rcol.missing .ab-rval { color: #c2410c; }
.ab-rcol:hover .ab-rbar { filter: brightness(.88); }
.ab-rev-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; color: #5a6080; font-weight: 600; }
.ab-rev-key { display: inline-flex; align-items: center; gap: 5px; }
.ab-rev-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ab-rev-key.m0 i { background: linear-gradient(180deg, #2f6fe0, #14a3b8); }
.ab-rev-key.m1 i { background: linear-gradient(180deg, #7239ea, #c04fd8); }
.ab-rev-key.we i { background: #f3c6b6; }
.ab-rev-key.we { color: #e2552d; }
.ab-rev-key.miss i { background: repeating-linear-gradient(135deg, #f4f5f9 0 3px, #d9dce8 3px 6px); }

/* =====================================================================
   Giao diện chung (06/11): dải tiêu đề màu + bảng có header cố định, dòng xen kẽ, chữ to hơn
   ===================================================================== */
.ph { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 22px; margin-bottom: 18px; color: #fff;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; box-shadow: 0 8px 24px rgba(31,47,110,.14); }
.ph::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.2), rgba(255,255,255,0) 70%); pointer-events: none; }
.ph-violet { background: linear-gradient(120deg, #3b1d8f 0%, #6a35e8 40%, #2f6fe0 75%, #14a3b8 100%); }
.ph-ocean  { background: linear-gradient(120deg, #0b3d91 0%, #2f6fe0 45%, #14a3b8 100%); }
.ph-teal   { background: linear-gradient(120deg, #0f5e6e 0%, #14a3b8 40%, #2f6fe0 75%, #6a35e8 100%); }
.ph-sunset { background: linear-gradient(120deg, #9a2b6e 0%, #e2552d 45%, #f5a623 100%); }
.ph-rose   { background: linear-gradient(120deg, #6a1b9a 0%, #c2185b 50%, #f06292 100%); }
.ph-forest { background: linear-gradient(120deg, #0d5c3a 0%, #1f9d6b 45%, #14a3b8 100%); }
.ph-indigo { background: linear-gradient(120deg, #1f2f6e 0%, #3d56b0 50%, #7239ea 100%); }
.ph-amber  { background: linear-gradient(120deg, #8a4b08 0%, #d9640f 45%, #f5b82e 100%); }
.ph-title-wrap { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.ph-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); flex: none; }
.ph-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.78); }
.ph-title { font-size: 24px; font-weight: 800; margin: 0; color: #fff; line-height: 1.15; }
.ph-sub { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 3px; max-width: 720px; }
.ph-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.ph-stat { background: rgba(255,255,255,.16); border-radius: 12px; padding: 6px 14px; text-align: center; min-width: 78px; }
.ph-stat b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.ph-stat span { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: .85; }
.ph-btn { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; border-radius: 10px; padding: 6px 14px;
    font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ph-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.ph-btn.solid { background: #fff; color: #4b23c9; border-color: #fff; }
.ph-btn.solid:hover { background: #f3efff; color: #4b23c9; }
.ph-tabs { display: flex; background: rgba(255,255,255,.14); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.ph-tabs a, .ph-tabs button { border: 0; background: none; color: #eef; font-weight: 700; font-size: 13.5px; padding: 6px 14px; border-radius: 9px; text-decoration: none; }
.ph-tabs a:hover, .ph-tabs button:hover { background: rgba(255,255,255,.14); color: #fff; }
.ph-tabs a.on, .ph-tabs button.on { background: #fff; color: #4b23c9; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Bảng chung: chữ to hơn, header đậm cố định khi cuộn, dòng xen kẽ */
table.grid { font-size: 14px; }
table.grid thead th { position: sticky; top: 0; z-index: 2; background: #efeaff; color: #2b2f6b; font-weight: 800; font-size: 12.5px;
    letter-spacing: .4px; padding: 10px 10px; border-bottom: 0; box-shadow: inset 0 -2px 0 #7239ea; }
table.grid tbody td { padding: 9px 10px; border-bottom: 1px solid #eef0f6; }
table.grid tbody tr:nth-child(even) td { background: #f8f9fd; }
table.grid tbody tr:hover td { background: #f1edff; }
table.report-grid { overflow: visible; }
.tbl-scroll { max-height: 64vh; overflow: auto; border: 1px solid #e6e9f4; border-radius: 12px; }
.tbl-scroll.short { max-height: 42vh; }
.tbl-scroll table.grid { border: 0; border-radius: 0; margin: 0; }
.tbl-scroll table.grid thead th:first-child { border-top-left-radius: 11px; }
.tbl-scroll table.grid thead th:last-child { border-top-right-radius: 11px; }

/* Thanh lọc chung (giống Advance Booking) */
.fbar { background: #fff; border: 1px solid #e6e9f4; border-radius: 14px; padding: 8px 16px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(31,47,110,.04); }
.fbar .ab-row:first-child { border-top: 0; }
.card-box h2.sec-title { font-size: 18px; }
.empty-state { text-align: center; padding: 34px 10px; color: #8a90a8; }
.empty-state .es-icon { font-size: 34px; margin-bottom: 6px; }

/* Thông báo một dòng */
.alert-line { border-radius: 10px; padding: 8px 14px; margin-bottom: 14px; font-weight: 700; font-size: 13.5px; }
.alert-line.ok { background: #e8f8ef; color: #15803d; border: 1px solid #bfe8cf; }
.alert-line.err { background: #fff1f0; color: #c2410c; border: 1px solid #ffc9c2; }

/* ===== Define Command ===== */
.dc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dc-layout { grid-template-columns: 1fr; } }
.dc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; max-height: 70vh; overflow-y: auto; padding: 2px 4px 6px 2px; }
.dc-card { --hue: 230; background: #fff; border: 1px solid hsl(var(--hue), 50%, 88%); border-left: 5px solid hsl(var(--hue), 60%, 52%); border-radius: 12px;
    padding: 10px 12px; box-shadow: 0 2px 8px rgba(31,47,110,.05); display: flex; flex-direction: column; gap: 6px; }
.dc-card:hover { box-shadow: 0 6px 18px rgba(31,47,110,.12); }
.dc-card.editing { outline: 2px solid #7239ea; }
.dc-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: hsl(var(--hue), 60%, 35%);
    background: hsl(var(--hue), 80%, 95%); border-radius: 999px; padding: 1px 8px; }
.dc-name { font-weight: 800; color: #1f2f6e; font-size: 15px; }
.dc-flags { margin-left: auto; display: flex; gap: 4px; }
.dc-flag { font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 0 6px; }
.dc-flag.v { background: #e3ecff; color: #2c4fa8; }
.dc-flag.e { background: #fff1e6; color: #c2410c; }
.dc-cmd { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: #f6f7fb; border-radius: 8px; padding: 6px 8px; color: #1f2f6e; word-break: break-all; }
.tk { border-radius: 4px; padding: 0 3px; font-weight: 800; }
.tk-v { background: #dbe6ff; color: #2c4fa8; }
.tk-e { background: #ffe1cf; color: #c2410c; }
.tk-s { background: #ece8ff; color: #6a35e8; }
.dc-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dc-actions .btn { padding: 1px 10px; }
.dc-form { position: sticky; top: 12px; border-top: 4px solid #3d56b0; }
.dc-insert { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-preview { background: #f8f7ff; border: 1px dashed #c9bdf7; border-radius: 10px; padding: 8px 10px; }
.dc-preview-title { font-size: 12px; font-weight: 800; color: #4b23c9; margin-bottom: 4px; }
.dc-step { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.dc-step span { width: 20px; height: 20px; border-radius: 50%; background: #7239ea; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }

/* ===== Sabre Logs ===== */
.sl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.sl-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1200px) { .sl-layout { grid-template-columns: 1fr; } }
.sl-layout .card-box.p-0 { overflow: hidden; }
.sl-cmd { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #1f2f6e; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-sid { display: inline-block; background: #e6f7f9; color: #0d7f8f; border-radius: 6px; padding: 0 7px; font-weight: 800; font-size: 12.5px; }
.sl-speed { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sl-speed.fast { background: #e8f8ef; color: #15803d; }
.sl-speed.mid { background: #fff6e0; color: #a16207; }
.sl-speed.slow { background: #fff1f0; color: #c2410c; }
table.grid tbody tr.sl-err td { background: #fff6f5; }
table.grid tbody tr.sel td { background: #e9e2ff !important; box-shadow: inset 0 1px 0 #c9bdf7, inset 0 -1px 0 #c9bdf7; }
.sl-screen { position: sticky; top: 12px; border-top: 4px solid #14a3b8; }
.sl-screen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sl-screen-cmd { font-family: ui-monospace, Consolas, monospace; font-size: 17px; font-weight: 800; color: #1f2f6e; word-break: break-all; }
.sl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: #5a6080; margin-bottom: 8px; align-items: center; }
.sl-pre { max-height: 60vh; overflow: auto; margin: 0; }

/* ===== Catalog ===== */
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.cat-layout.ro { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .cat-layout { grid-template-columns: 1fr; } }
.cat-form { position: sticky; top: 12px; border-top: 4px solid #7239ea; }
.cat-code { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-weight: 800; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, #3d56b0, #7239ea); border-radius: 7px; padding: 1px 9px; letter-spacing: .5px; }
.cat-code.tour { background: linear-gradient(135deg, #d9640f, #e2552d); }
.cat-flights { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cat-flt { display: inline-block; background: #eef7f2; color: #157347; border: 1px solid #bfe3cf; border-radius: 6px; padding: 0 7px; font-weight: 800;
    font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
.cat-default { display: inline-block; background: #fff4d6; color: #a16207; border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 12px; }

/* ===== Command Note ===== */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start; }
.cn-card { --hue: 262; background: #fff; border-radius: 12px; padding: 12px 14px; border: 1px solid hsl(var(--hue), 50%, 88%);
    border-top: 4px solid hsl(var(--hue), 60%, 52%); box-shadow: 0 2px 8px rgba(31,47,110,.05); display: flex; flex-direction: column; gap: 6px; }
.cn-card.editing { outline: 2px solid #7239ea; }
.cn-title { font-weight: 800; color: hsl(var(--hue), 55%, 30%); font-size: 15px; }
.cn-note { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: hsl(var(--hue), 80%, 97%); border-radius: 8px; padding: 6px 8px;
    color: #1f2f6e; white-space: pre-wrap; flex: 1; }
/* Dải tiêu đề mỏng (trang Command) */
.ph.ph-slim { padding: 10px 18px; margin-bottom: 12px; border-radius: 12px; }
.ph.ph-slim .ph-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.ph.ph-slim .ph-title { font-size: 19px; }
.ph.ph-slim .ph-sub { font-size: 12px; }
.ph label.ph-btn input { width: 15px; height: 15px; }
.fbar .ab-row, .ab-settings .ab-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed #eceef5; }
.fbar .ab-row:first-child { border-top: 0; }
.fbar .ab-actions { padding-top: 10px; }
table.grid thead th { white-space: nowrap; }
.sl-cmd { max-width: 230px; }
.sl-layout table.grid td, .sl-layout table.grid th { padding-left: 8px; padding-right: 8px; }
.sl-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.sl-cmd { max-width: 200px; }
.sl-layout table.grid td:nth-child(2) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* ===== Booking – ô tìm chuyến (06/11) ===== */
.bk-search { background: #fff; border: 1px solid #e6e9f4; border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(31,47,110,.07); }
.bk-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bk-row2 { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e3e6f0; align-items: stretch; }
.bk-field { --c: #2f6fe0; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff);
    border-radius: 12px; padding: 8px 10px 10px; min-width: 170px; }
.bk-field.bk-st { min-width: 250px; flex: 1; max-width: 320px; }
.bk-field.c-dep { --c: #2f6fe0; } .bk-field.c-arr { --c: #1f9d6b; } .bk-field.c-date { --c: #e2552d; } .bk-field.c-ret { --c: #d9640f; }
.bk-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--c); margin-bottom: 4px; }
.bk-ico { font-size: 15px; }
.bk-field .form-control { font-weight: 700; color: #1f2f6e; border-color: color-mix(in srgb, var(--c) 30%, #fff); }
.bk-swap { align-self: center; margin-top: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; font-size: 18px; font-weight: 800;
    background: linear-gradient(135deg, #f5a623, #e2552d); box-shadow: 0 4px 12px rgba(226,85,45,.35); transition: transform .15s; }
.bk-swap:hover { transform: rotate(180deg); }
.bk-add { align-self: center; margin-top: 18px; border: 2px dashed #f5a623; background: #fff8eb; color: #b45309; font-weight: 800; border-radius: 12px; padding: 10px 16px; }
.bk-pax { --c: #6a35e8; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); background: color-mix(in srgb, var(--c) 5%, #fff);
    border-radius: 12px; padding: 8px 12px; min-width: 210px; }
.bk-pax.c-adt { --c: #6a35e8; } .bk-pax.c-chd { --c: #14a3b8; } .bk-pax.c-inf { --c: #c2185b; }
.bk-pax-ico { font-size: 22px; }
.bk-pax-txt { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
.bk-pax-txt b { color: var(--c); font-size: 14px; }
.bk-pax-txt span { font-size: 11px; color: #8a90a8; }
.bk-step { display: flex; align-items: center; gap: 6px; }
.bk-step button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 40%, #fff); background: #fff; color: var(--c); font-weight: 800; font-size: 16px; line-height: 1; }
.bk-step button:hover:not(:disabled) { background: var(--c); color: #fff; }
.bk-step button:disabled { opacity: .35; }
.bk-step span { min-width: 22px; text-align: center; font-size: 18px; font-weight: 800; color: #1f2f6e; }
.bk-go { margin-left: auto; border: 0; border-radius: 12px; padding: 0 28px; min-height: 48px; color: #fff; font-weight: 800; font-size: 15px;
    background: linear-gradient(90deg, #6a35e8, #2f6fe0, #14a3b8); box-shadow: 0 6px 16px rgba(47,111,224,.35); }
.bk-go:hover:not(:disabled) { filter: brightness(1.08); }
.bk-go:disabled { opacity: .7; }

/* ===== Command – thanh công cụ (06/11) ===== */
.cmd-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(90deg, #f6f3ff, #eef6ff); border: 1px solid #e3ddfb;
    border-radius: 14px; padding: 8px 10px; margin-bottom: 12px; }
.cmd-group { --c: #6a35e8; display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 10px; overflow: hidden; min-width: 200px; }
.cmd-group.c1 { --c: #3d56b0; } .cmd-group.c2 { --c: #6a35e8; max-width: 520px; }
.cmd-glabel { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
    padding: 6px 10px; white-space: nowrap; border-right: 1px solid color-mix(in srgb, var(--c) 20%, #fff); }
.cmd-group .form-select { border: 0; box-shadow: none; font-weight: 700; color: #1f2f6e; }
.cmd-toggle { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d9dcef; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 13px; color: #8a90a8; cursor: pointer; margin: 0; }
.cmd-toggle input { display: none; }
.cmd-dot { width: 30px; height: 16px; border-radius: 999px; background: #d9dcef; position: relative; transition: background .15s; }
.cmd-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.cmd-toggle.on { color: #15803d; border-color: #9fdcb6; background: #effaf3; }
.cmd-toggle.on .cmd-dot { background: #22a35a; }
.cmd-toggle.on .cmd-dot::after { left: 16px; }
.cmd-keys { display: flex; gap: 5px; }
.cmd-keys button { width: 38px; height: 34px; border-radius: 8px; border: 1px solid #c9bdf7; background: #fff; color: #4b23c9; font-size: 16px; font-weight: 800;
    box-shadow: 0 3px 0 #d9d0fb; transition: transform .05s; }
.cmd-keys button:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9d0fb; }
.cmd-keys button:hover { background: #f3efff; }
.cmd-clear { margin-left: auto; border: 1px solid #ffd0bf; background: #fff6f2; color: #c2410c; font-weight: 800; font-size: 13px; border-radius: 10px; padding: 6px 12px; }
.cmd-clear:hover { background: #ffe9df; }
.cmd-line { display: flex; align-items: stretch; border: 2px solid #c9bdf7; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(114,57,234,.1); }
.cmd-line:focus-within { border-color: #7239ea; box-shadow: 0 0 0 4px rgba(114,57,234,.12); }
.cmd-prompt { display: flex; align-items: center; padding: 0 12px; background: linear-gradient(135deg, #3b1d8f, #6a35e8); color: #fff; font: 800 18px Consolas, monospace; }
.cmd-line .cmd-input { border: 0; box-shadow: none; font-size: 16px; font-weight: 700; color: #1f2f6e; padding: 10px 12px; }
.cmd-run { border: 0; padding: 0 18px; color: #fff; font-weight: 800; background: linear-gradient(90deg, #6a35e8, #2f6fe0); white-space: nowrap; }
.cmd-run:disabled { opacity: .5; }
.terminal { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,64,.25); }
.cmd-sug-head { font-weight: 800; color: #1f2f6e; font-size: 14px; background: linear-gradient(90deg, #efeaff, #e6f3ff); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; }
.cmd-sug-head span { display: block; font-size: 11px; font-weight: 600; color: #8a90a8; }
.suggest { border: 1px solid #e6e9f4; border-radius: 10px; padding: 4px; max-height: 70vh; }
.suggest button { font-size: 13px; font-weight: 700; color: #1f2f6e; padding: 5px 8px; }
.suggest button:nth-child(even) { background: #f8f9fd; }
.suggest button:hover { background: #ebe5ff; color: #4b23c9; }
.cmd-group.c2 { max-width: 400px; }
.cmd-group.c1 { min-width: 0; max-width: 230px; }

/* ===== Menu bên trái (06/11): mỗi khu một màu, có biểu tượng ===== */
.sidebar { background: linear-gradient(180deg, #ffffff 0%, #fbfaff 60%, #f6f8ff 100%); box-shadow: 2px 0 14px rgba(31,47,110,.05); }
.logo { padding: 18px 20px 14px; }
.menu { padding: 10px 12px 30px; }
.menu-sec { --c: #6a35e8; margin-top: 10px; }
.menu-sec.s-tkt { --c: #6a35e8; } .menu-sec.s-fm { --c: #0f9aad; } .menu-sec.s-adm { --c: #d9640f; } .menu-sec.s-acc { --c: #c2185b; }
.menu-heading { display: flex; align-items: center; gap: 8px; margin: 8px 4px 6px; padding: 6px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 800;
    letter-spacing: 1px; color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); border-left: 4px solid var(--c); }
.menu-heading span { font-size: 14px; }
.menu-group summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; font-weight: 800; color: #2b2f6b; font-size: 14px; }
.menu-group summary::after { content: "›"; margin-left: auto; color: var(--c); font-size: 16px; font-weight: 800; }
.menu-group summary:hover { background: color-mix(in srgb, var(--c) 7%, #fff); }
.menu-group summary i, .menu-link i { font-style: normal; width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; flex: none; background: color-mix(in srgb, var(--c) 10%, #fff); }
.menu-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 1px 0; border-radius: 9px; color: #4a5070; font-weight: 600; font-size: 13.5px; }
.menu-group .menu-link { padding-left: 18px; }
.menu-link:hover { background: color-mix(in srgb, var(--c, #6a35e8) 8%, #fff); color: var(--c, #6a35e8); }
.menu-link.active { background: linear-gradient(90deg, var(--c, #6a35e8), color-mix(in srgb, var(--c, #6a35e8) 65%, #2f6fe0)); color: #fff; font-weight: 800;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--c, #6a35e8) 35%, transparent); }
.menu-link.active i { background: rgba(255,255,255,.22); }
.menu-link.home { --c: #2f6fe0; font-weight: 800; color: #2b2f6b; }
.menu-link.disabled { opacity: .55; color: #9aa0b8; }
.menu-link.disabled i { filter: grayscale(1); }
.menu-link em { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); border-radius: 5px; padding: 0 5px; }

/* ===== Menu bên trái – bản dễ nhìn (06/11): mỗi khu một khung màu, ít ô màu nhỏ ===== */
.sidebar { background: #fbfbfe; }
.menu { padding: 8px 10px 30px; }
.menu-link.home { margin: 2px 2px 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #e6e9f4; }
.menu-sec { margin: 0 0 10px; padding: 0 0 6px; border-radius: 12px; background: color-mix(in srgb, var(--c) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--c) 18%, #fff); overflow: hidden; }
.menu-heading { margin: 0 0 4px; padding: 8px 12px; border-radius: 0; border-left: 0; color: #fff; font-size: 11.5px; letter-spacing: 1.2px;
    background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); }
.menu-heading span { font-size: 13px; filter: brightness(1.15); }
.menu-group summary { font-weight: 700; font-size: 13.5px; color: color-mix(in srgb, var(--c) 70%, #1f2f6e); padding: 6px 12px; margin: 2px 4px 0; }
.menu-group summary i { background: none; width: 18px; font-size: 13px; }
.menu-group .menu-link { margin: 0 6px 0 22px; padding: 5px 10px 5px 12px; border-left: 2px solid color-mix(in srgb, var(--c) 25%, #fff); border-radius: 0 8px 8px 0; }
.menu-link i { background: none; width: 18px; font-size: 12.5px; opacity: .8; }
.menu-link { color: #3f4566; font-weight: 600; font-size: 13.5px; }
.menu-link:hover { background: color-mix(in srgb, var(--c, #6a35e8) 10%, #fff); color: color-mix(in srgb, var(--c, #6a35e8) 80%, #1f2f6e); }
.menu-group .menu-link:hover { border-left-color: var(--c); }
.menu-link.active { background: var(--c, #6a35e8); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--c, #6a35e8) 30%, transparent); }
.menu-group .menu-link.active { border-left-color: color-mix(in srgb, var(--c) 60%, #000); }
.menu-link.active i { background: none; opacity: 1; }
.menu-sec > .menu-link { margin: 0 6px; }
.menu-link.disabled { opacity: .5; }
.menu-link em { color: #8a90a8; border-color: #d9dcea; }

/* =====================================================================
   Chữ & ô nhập đồng nhất toàn website (06/11)
   Một cỡ chữ cho mọi input / select / date / textarea / nút, kể cả bản -sm của Bootstrap.
   ===================================================================== */
html, body { font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif; font-size: 14px; }
.form-control, .form-select, .form-control-sm, .form-select-sm {
    font-family: inherit; font-size: 14px; font-weight: 600; color: #1f2f6e; line-height: 1.4;
    min-height: 36px; padding: 6px 12px; border: 1px solid #d5d9ea; border-radius: 9px; background-color: #fff;
    transition: border-color .12s, box-shadow .12s; }
.form-select, .form-select-sm { padding-right: 34px; background-position: right 10px center; cursor: pointer; }
.form-control:hover, .form-select:hover { border-color: #b9aef5; }
.form-control:focus, .form-select:focus { border-color: #7239ea; box-shadow: 0 0 0 3px rgba(114,57,234,.15); color: #1f2f6e; }
.form-control::placeholder { color: #9aa0b8; font-weight: 500; }
.form-control:disabled, .form-select:disabled { background-color: #f4f5f9; color: #8a90a8; }
.form-select option { font-size: 14px; font-weight: 600; color: #1f2f6e; padding: 4px 8px; }
textarea.form-control { min-height: 0; }
input[type=date].form-control, input[type=time].form-control, input[type=number].form-control { font-variant-numeric: tabular-nums; }
.form-control.mono, textarea.mono, .mono.form-control { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.form-check-label { font-size: 13.5px; font-weight: 600; color: #3f4566; }
.form-check-input { width: 1.05em; height: 1.05em; cursor: pointer; }
.form-check-input:checked { background-color: #7239ea; border-color: #7239ea; }
.field-label, .form-label { font-size: 12.5px; font-weight: 800; color: #2b2f6b; margin-bottom: 4px; }
.hint { font-size: 12.5px; }

/* Nút: một cỡ chung */
.btn { font-family: inherit; font-weight: 700; font-size: 14px; border-radius: 9px; padding: 6px 14px; }
.btn-sm { font-size: 13px; padding: 4px 11px; border-radius: 8px; }
.btn-lg { font-size: 15.5px; padding: 9px 18px; }
.btn-light { background: #f3f4f9; border-color: #e3e6f0; color: #2b2f6b; }
.btn-light:hover { background: #ebe5ff; border-color: #d5c9fb; color: #4b23c9; }
.btn-primary { background: linear-gradient(90deg, #6a35e8, #4f46e5); border: 0; }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(90deg, #5b2bd6, #4338ca); }
.btn-link { font-weight: 700; }

/* Các chỗ có kiểu riêng vẫn giữ (không viền / chữ to) */
.cmd-group .form-select { border: 0; box-shadow: none; min-height: 34px; border-radius: 0; }
.cmd-line .cmd-input { min-height: 44px; border: 0; border-radius: 0; box-shadow: none; font-size: 16px; }
.bk-field .form-control { min-height: 38px; }
.dc-actions .btn, table.grid .btn-sm { font-size: 12.5px; padding: 2px 10px; }
/* Ô chọn sân bay cùng kiểu với các ô khác */
.station-btn { height: auto; min-height: 38px; border: 1px solid #d5d9ea; border-radius: 9px; padding: 6px 12px; font-size: 14px; font-weight: 700; color: #1f2f6e; }
.station-btn:hover, .station-btn.open { border-color: #7239ea; box-shadow: 0 0 0 3px rgba(114,57,234,.12); }
.station-item { font-size: 14px; font-weight: 600; color: #1f2f6e; }
.station-item:hover { background: #f3efff; }
.sl-layout table.grid { font-size: 13.5px; }

/* ===== Sabre Logs – nhóm theo lệnh lớn ===== */
.sl-mode { background: #eef0f8; }
.sl-mode button { color: #5a6080; }
.sl-mode button.on { background: #fff; color: #0d7f8f; }
.sl-groups { max-height: 70vh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sl-g { --hue: 230; border: 1px solid hsl(var(--hue), 45%, 88%); border-left: 4px solid hsl(var(--hue), 60%, 52%); border-radius: 10px; background: #fff; }
.sl-g.err { border-left-color: #e2552d; }
.sl-g.open { box-shadow: 0 4px 14px rgba(31,47,110,.1); }
.sl-g-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.sl-g-head:hover { background: hsl(var(--hue), 80%, 97%); border-radius: 8px; }
.sl-g-caret { color: hsl(var(--hue), 55%, 45%); font-size: 13px; width: 12px; }
.sl-g-time { display: flex; flex-direction: column; line-height: 1.1; min-width: 64px; }
.sl-g-time b { font-size: 13.5px; color: #1f2f6e; }
.sl-g-time span { font-size: 11px; color: #9aa0b8; }
.sl-g-kind { font-size: 11px; font-weight: 800; white-space: nowrap; color: hsl(var(--hue), 60%, 32%); background: hsl(var(--hue), 80%, 95%); border-radius: 999px; padding: 2px 9px; }
.sl-g-main { flex: 1; min-width: 0; }
.sl-g-title { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: #1f2f6e; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-g-sub { font-size: 12px; color: #7e8299; }
.sl-g-right { display: flex; align-items: center; gap: 6px; flex: none; }
.sl-g-body { border-top: 1px dashed hsl(var(--hue), 45%, 85%); padding: 4px 8px 8px 34px; background: hsl(var(--hue), 60%, 99%); border-radius: 0 0 10px 10px; }
.sl-c { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 7px; cursor: pointer; border-left: 2px solid hsl(var(--hue), 45%, 82%); margin-top: 2px; }
.sl-c:nth-child(even) { background: #f8f9fd; }
.sl-c:hover { background: hsl(var(--hue), 80%, 95%); }
.sl-c.sel { background: #e9e2ff; border-left-color: #7239ea; }
.sl-c.bad { background: #fff3f1; border-left-color: #e2552d; }
.sl-c-n { width: 20px; height: 20px; border-radius: 50%; background: hsl(var(--hue), 60%, 52%); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.sl-c-cmd { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 13px; color: #1f2f6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-act { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-meta-act { font-weight: 800; color: #0d7f8f; }

/* ===== Command – khung Find passenger ===== */
.cmd-find { border: 1px solid #f3b6cf; background: #fff4f8; color: #c2185b; font-weight: 800; font-size: 13px; border-radius: 10px; padding: 6px 12px; margin-left: auto; }
.cmd-find:hover { background: #ffe6ef; }
.cmd-find.on { background: linear-gradient(90deg, #c2185b, #e2552d); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(194,24,91,.3); }
.cmd-find + .cmd-clear { margin-left: 0; }
.pf-panel { border: 1px solid #f3c6d8; border-left: 5px solid #c2185b; background: linear-gradient(180deg, #fff7fa, #fff); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(194,24,91,.08); }
.pf-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pf-row + .pf-row { margin-top: 10px; }
.pf-f { display: flex; flex-direction: column; gap: 4px; }
.pf-f label { font-size: 12px; font-weight: 800; color: #9a2b6e; text-transform: uppercase; letter-spacing: .5px; }
.pf-name { flex: 2; min-width: 300px; }
.pf-name input { font-size: 16px; font-weight: 800; }
.pf-flights { flex: 1; min-width: 200px; }
.pf-go { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pf-btn { border-radius: 10px; min-height: 40px; padding: 0 22px; background: linear-gradient(90deg, #c2185b, #6a35e8); }
.pf-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pf-msg { font-weight: 700; font-size: 13px; }
.pf-msg.ok { color: #15803d; } .pf-msg.err { color: #c2410c; }
table.grid tbody tr.pf-x td { color: #9aa0b8; text-decoration: line-through; text-decoration-color: rgba(194,65,12,.35); }
table.grid tbody tr.pf-x td .btn, table.grid tbody tr.pf-x td .st { text-decoration: none; }
.cmd-group.c2 { max-width: 330px; min-width: 0; }
.cmd-group.c1 { max-width: 200px; }
.cmd-group.c2 { max-width: 300px; }
.pf-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-tabs button { border: 1px solid #f3c6d8; background: #fff; color: #9a2b6e; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 4px 14px; }
.pf-tabs button.on { background: #c2185b; border-color: #c2185b; color: #fff; }
.pf-norm { font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; color: #6a35e8; }
.pf-match { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 800; }
.pf-match.m-exact { background: #dcfce7; color: #15803d; }
.pf-match.m-close { background: #fff4d6; color: #a16207; }
.pf-match.m-samesurname { background: #eef0f8; color: #5a6080; }

/* Bảng Flights (Home, Advance Booking): khung một màn hình, header + cột chuyến cố định khi cuộn */
.lf-wrap { max-height: 72vh; overflow: auto; position: relative; }
table.lf-grid thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 2px 0 #fff, 0 -3px 0 #fff; }
table.lf-grid td.lf-flt { position: sticky; left: 0; z-index: 2; background: #fff; }
table.lf-grid thead th.lf-flt-h { left: 0; z-index: 4; }
tr.lf-point-row td { position: sticky; left: 0; background: #fff; }
table.lf-grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: #f6f7fc; box-shadow: 0 -2px 0 #dfe3f1; }
table.lf-grid tfoot td.lf-flt { z-index: 3; }

/* Find pax: PNR / số vé bấm được */
button.pnr-link, button.tkt-link { border: 0; cursor: pointer; font-family: ui-monospace, Consolas, monospace; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin: 1px 4px 1px 0; }
button.pnr-link { background: #e8edff; color: #2f47b8; letter-spacing: .5px; }
button.pnr-link:hover:not(:disabled) { background: #2f47b8; color: #fff; }
button.tkt-link { background: #e7f7ee; color: #17784a; font-size: .85em; }
button.tkt-link:hover:not(:disabled) { background: #17784a; color: #fff; }
button.pnr-link:disabled, button.tkt-link:disabled { opacity: .55; cursor: default; }

/* Ticketing: tình trạng đóng báo cáo bán */
.close-status { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; margin: 0 0 14px; border: 1px solid; font-size: .95rem; }
.close-status.cs-ok { background: #ecf9f1; border-color: #9fdcb8; color: #135c37; }
.close-status.cs-warn { background: #fff8e6; border-color: #f2d27a; color: #7a5300; }
.close-status.cs-bad { background: #fdeeee; border-color: #f1a9a9; color: #8f1d1d; }
.close-status .cs-icon { font-size: 1.5rem; line-height: 1; }
.close-status .cs-main { flex: 1; min-width: 0; }
.close-status .cs-title b { font-weight: 800; }
.close-status .cs-tag { margin-left: 6px; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(0,0,0,.08); }
.close-status .cs-msg { font-weight: 600; margin-top: 2px; }
.close-status .cs-detail { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.close-status .cs-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .85rem; white-space: nowrap; }
.close-status .cs-side a { font-weight: 700; color: inherit; }
@media (max-width: 700px) { .close-status { flex-wrap: wrap; } .close-status .cs-side { align-items: flex-start; } }

/* Ticketing: thẻ Tour code */
.tour-codes { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tour-code { position: relative; overflow: hidden; border: 1px solid hsl(var(--hue,262) 60% 88%); border-radius: 14px; padding: 12px 16px 14px 20px;
  background: linear-gradient(135deg, hsl(var(--hue,262) 80% 97%), #fff 70%); box-shadow: 0 2px 8px hsl(var(--hue,262) 40% 50% / .08); transition: transform .15s, box-shadow .15s; }
.tour-code::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, hsl(var(--hue,262) 75% 58%), hsl(calc(var(--hue,262) + 30) 75% 55%)); }
.tour-code:hover { transform: translateY(-2px); box-shadow: 0 6px 18px hsl(var(--hue,262) 40% 45% / .16); }
.tour-code .tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tour-code .tc-kicker { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: hsl(var(--hue,262) 45% 45%); }
.tour-code .tc-copy { border: 0; border-radius: 99px; padding: 1px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
  background: hsl(var(--hue,262) 70% 92%); color: hsl(var(--hue,262) 55% 35%); }
.tour-code .tc-copy:hover { background: hsl(var(--hue,262) 65% 50%); color: #fff; }
.tour-code b { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: 1px; color: hsl(var(--hue,262) 55% 28%); }
.tour-code span { display: block; color: #4b5470; font-size: 13px; line-height: 1.45; margin-top: 2px; }

/* Cảnh báo chưa close sale khi vào phần mềm */
.csa-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 24, 50, .45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.csa-box { width: min(520px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; border-top: 6px solid #e0892b; }
.csa-head { display: flex; gap: 14px; align-items: center; padding: 18px 22px 8px; }
.csa-icon { font-size: 2.2rem; line-height: 1; }
.csa-title { font-size: 1.25rem; font-weight: 800; color: #7a3b00; }
.csa-sub { color: #5b6380; font-size: .95rem; }
.csa-text { padding: 0 22px; margin: 8px 0 4px; font-size: .97rem; }
.csa-hint { padding: 0 22px; margin: 0 0 6px; font-size: .85rem; color: #6b7390; }
.csa-result { margin: 10px 22px 4px; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.csa-result.ok { background: #ecf9f1; color: #135c37; }
.csa-result.bad { background: #fdeeee; color: #8f1d1d; }
.csa-screen { margin: 6px 22px 0; font-size: .8rem; }
.csa-screen pre { max-height: 180px; overflow: auto; background: #0d1b5e; color: #e6ecff; padding: 8px 10px; border-radius: 8px; margin: 6px 0 0; }
.csa-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; }

/* Booking – Multi-city: hàng chặng đánh số */
.ml-legs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ml-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 0 minmax(0,1fr) minmax(170px,.8fr) 36px; align-items: stretch; gap: 0 10px; }
.ml-no { display: flex; align-items: center; justify-content: center; background: #2f6fe0; color: #fff; font-weight: 800; font-size: 18px; border-radius: 10px 0 0 10px; margin-right: -10px; }
.ml-cell { position: relative; background: #fff; border: 1px solid #d8deec; border-radius: 10px; min-height: 64px; padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; transition: border-color .15s, box-shadow .15s; }
.ml-cell:hover, .ml-cell:focus-within { border-color: #2f6fe0; box-shadow: 0 0 0 3px rgba(47,111,224,.12); }
.ml-from { border-radius: 0 10px 10px 0; }
.ml-cap { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #8a93ad; }
.ml-cell .station-picker { width: 100%; }
.ml-cell .station-btn { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0; width: 100%; text-align: left; }
.ml-cell .station-text { font-size: 16px; font-weight: 800; color: #1f2f6e; }
.ml-cell .station-text.empty { color: #8a93ad; font-weight: 700; }
.ml-cell .station-caret { display: none; }
.ml-swap { position: relative; z-index: 2; align-self: center; justify-self: center; width: 40px; height: 40px; margin: 0 -20px; border-radius: 50%; border: 1px solid #d8deec; background: #fff; color: #2f6fe0; font-size: 17px; font-weight: 800; box-shadow: 0 2px 6px rgba(31,47,110,.12); transition: transform .2s, background .15s; }
.ml-swap:hover { transform: rotate(180deg); background: #eef3ff; }
.ml-date { cursor: pointer; }
.ml-date .ml-date-txt { font-size: 16px; font-weight: 800; color: #1f2f6e; pointer-events: none; }
.ml-date.empty .ml-date-txt { color: #8a93ad; font-weight: 700; }
.ml-date .ml-date-in { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; }
.ml-date .ml-date-in::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ml-del { display: flex; align-items: center; justify-content: center; }
.ml-del button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #f3f4f8; color: #8a93ad; font-weight: 800; }
.ml-del button:hover { background: #fdeeee; color: #c62828; }
.ml-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 18px; border: 1.5px dashed #c9d2e6; border-radius: 10px; background: #fff; color: #2f6fe0; font-size: 16px; font-weight: 800; text-align: left; }
.ml-add span { font-size: 20px; }
.ml-add:hover { background: #f4f7ff; border-color: #2f6fe0; }
@media (max-width: 900px) {
  .ml-row { grid-template-columns: 34px 1fr 36px; gap: 8px; }
  .ml-swap { display: none; }
  .ml-row .ml-to, .ml-row .ml-date { grid-column: 2; }
  .ml-from { border-radius: 10px; } .ml-no { margin-right: 0; border-radius: 10px; grid-row: span 3; }
  .ml-del { grid-column: 3; grid-row: 1; }
}

/* Routes & Flights (gom Route / Sector / Scan Schedule) */
.net-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.net-bar > input { max-width: 340px; }
.net-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #5b6380; }
.net-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 700px) { .net-grid { grid-template-columns: 1fr; } }
.net-card { background: #fff; border: 1px solid #e3e8f4; border-top: 4px solid #2f6fe0; border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(31,47,110,.06); }
.net-card.quiet { border-top-color: #c9d2e6; background: #fafbfe; }
.net-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.net-code { font-family: ui-monospace, Consolas, monospace; font-weight: 800; font-size: 15px; background: #2f6fe0; color: #fff; border-radius: 8px; padding: 3px 9px; letter-spacing: .5px; }
.net-card.quiet .net-code { background: #8a93ad; }
.net-code.new { background: #1f9d6b; }
.net-name { font-weight: 800; color: #1f2f6e; font-size: 16px; }
.net-rename { max-width: 220px; }
.net-icon { border: 0; background: transparent; color: #8a93ad; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.net-icon:hover { background: #eef3ff; color: #2f6fe0; }
.net-icon.danger:hover { background: #fdeeee; color: #c62828; }
.net-scan-count { font-size: 12px; font-weight: 700; color: #17784a; background: #e7f7ee; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
.net-mini { border: 1px solid #cfe9da; background: #fff; color: #17784a; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 9px; }
.net-mini:hover { background: #17784a; color: #fff; }
.net-route { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed #e3e8f4; }
.net-dest { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.net-dest b { font-family: ui-monospace, Consolas, monospace; color: #1f2f6e; }
.net-arrow { color: #2f6fe0; font-weight: 800; }
.net-dest-name { color: #6b7390; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-flights { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.net-chip { position: relative; display: inline-flex; align-items: center; gap: 3px; font-family: ui-monospace, Consolas, monospace; font-weight: 800; font-size: 13px;
  padding: 3px 9px; border-radius: 8px; background: #f1f3f9; color: #6b7390; border: 1px solid #e0e4ef; user-select: none; }
.net-chip i { font-style: normal; font-size: 11px; }
.net-chip.on { background: #e3f6ec; color: #17784a; border-color: #9fdcb8; }
.net-chip.warn { background: #fff4e0; color: #8a5300; border-color: #f2d27a; }
.net-chip.click { cursor: pointer; }
.net-chip.click:hover { box-shadow: 0 0 0 2px rgba(47,111,224,.25); }
.net-chip.demo { cursor: default; }
.net-x { display: none; position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; line-height: 15px; padding: 0; border-radius: 50%; border: 0;
  background: #c62828; color: #fff; font-size: 12px; font-weight: 800; }
.net-chip:hover .net-x, .net-x.show { display: block; }
.net-x.show { position: static; margin-left: 3px; }
.net-add-flt { width: 78px; border: 1px dashed #c9d2e6; border-radius: 8px; padding: 2px 8px; font-size: 13px; font-family: ui-monospace, Consolas, monospace; }
.net-add-flt:focus { outline: none; border-color: #2f6fe0; border-style: solid; }
.net-empty { color: #8a93ad; font-size: 13px; padding: 6px 0; border-top: 1px dashed #e3e8f4; }
.net-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fff8e6; color: #7a5300; font-size: 13px; }
.net-add-route { margin-top: 8px; width: 100%; border: 1.5px dashed #c9d2e6; background: #fff; color: #2f6fe0; font-weight: 800; border-radius: 10px; padding: 6px 12px; text-align: left; }
.net-add-route:hover { background: #f4f7ff; border-color: #2f6fe0; }
.net-new-route { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.net-new-route select { max-width: 200px; }
.net-new-route input.mono { max-width: 170px; }
.net-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #17784a; margin: 0; }
.net-new-st { border-top-color: #1f9d6b; border-style: dashed; }

/* PCC & Tour Codes: hai khung cạnh nhau */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 700px) { .cp-grid { grid-template-columns: 1fr; } }
.cp-panel { border-top: 4px solid var(--acc); }
.cp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: color-mix(in srgb, var(--acc) 12%, #fff); }
.cp-search { max-width: 170px; }
.cp-scroll { max-height: 55vh; }
.cp-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 6%, #fff); border: 1px dashed color-mix(in srgb, var(--acc) 35%, #fff); }
.cp-form-title { font-weight: 800; color: var(--acc); white-space: nowrap; }
.cp-form .cp-code { max-width: 140px; }
.cp-form input:not(.cp-code) { flex: 1; min-width: 160px; }

/* My account */
.acct-layout { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 18px; align-items: start; }
@media (max-width: 800px) { .acct-layout { grid-template-columns: 1fr; } }
.acct-tabs { display: flex; flex-direction: column; gap: 6px; }
.acct-tab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #e3e8f4; color: #1f2f6e; font-weight: 700; text-decoration: none; }
.acct-tab i { font-style: normal; }
.acct-tab:hover { background: #f4f7ff; }
.acct-tab.active { background: linear-gradient(135deg, #6a3de8, #8e5cf2); color: #fff; border-color: transparent; }
.acct-body h3 { font-size: 1.2rem; font-weight: 800; color: #1f2f6e; }

/* Automation */
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 700px) { .auto-grid { grid-template-columns: 1fr; } }
.auto-card { border-top: 4px solid var(--acc); }
.auto-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.auto-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: color-mix(in srgb, var(--acc) 12%, #fff); }
.auto-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px dashed #e3e8f4; }
.auto-label { width: 100px; margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--acc); }
.auto-emp { font-family: ui-monospace, Consolas, monospace; font-weight: 800; font-size: 12px; background: #fff1ea; color: #a63a14; border-radius: 8px; padding: 2px 8px; }
.auto-last { margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: #ecf9f1; color: #135c37; font-size: 13px; }
.auto-last.bad { background: #fdeeee; color: #8f1d1d; }
.auto-leader { margin-bottom: 16px; padding: 12px 16px; border-left: 4px solid #1f9d63; font-size: 14px; }
.auto-leader.bad { border-left-color: #c0392b; }
.auto-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
a.ab-gear { text-decoration: none; }

/* Command: Recent & suggestions – thấy khoảng 10 dòng gần nhất, còn lại cuộn */
.suggest { max-height: calc(10 * 25px + 10px); overflow-y: auto; }

/* FM – Link FM Account */
.fm-acc-grid { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .fm-acc-grid { grid-template-columns: 1fr; } }
.fm-acc-card { border-top: 4px solid #14a3b8; }
.fm-last { margin-top: 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: #ecf9f1; color: #135c37; }
.fm-last.bad { background: #fdeeee; color: #8f1d1d; }

/* FM – Service Flight */
.sf-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px; margin-bottom: 14px; border-top: 4px solid #14a3b8; }
.sf-dates, .sf-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sf-dates input[type=date] { width: 150px; }
.sf-dir button:disabled { opacity: .45; }
.sf-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.sf-layout.with-detail { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
@media (max-width: 1100px) { .sf-layout.with-detail { grid-template-columns: 1fr; } }
.sf-scroll { max-height: 72vh; }
.sf-row { cursor: pointer; }
.sf-row:hover td { background: #eef9fb !important; }
.sf-row.sel td { background: #d9f3f7 !important; }
.sf-day td { position: sticky; top: 38px; background: #e9f6f8 !important; font-weight: 800; color: #0f6f7d; font-size: 12px; letter-spacing: .4px; }
.sf-st { background: #14a3b8; color: #fff; border-radius: 5px; padding: 0 4px; }
.sf-detail { position: sticky; top: 12px; max-height: 82vh; overflow: auto; border-top: 4px solid #14a3b8; }
.sf-detail-head { display: flex; align-items: center; gap: 10px; }
.sf-detail-sub { color: #5b6380; font-size: 13px; margin: 4px 0 10px; }
.sf-empty-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7390; margin-bottom: 8px; }
.sf-fields { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid #e6e9f4; border-radius: 10px; overflow: hidden; }
.sf-field { display: grid; grid-template-columns: 46% 54%; gap: 8px; padding: 5px 10px; font-size: 12.5px; border-bottom: 1px solid #f0f2f8; }
.sf-field:nth-child(even) { background: #f8f9fd; }
.sf-field .sf-k { font-family: ui-monospace, Consolas, monospace; color: #5b6380; word-break: break-all; }
.sf-field .sf-v { font-weight: 700; color: #1f2f6e; word-break: break-word; }
.sf-field.empty .sf-v { color: #b3b9cc; font-weight: 400; }
.sf-sec { margin-top: 12px; }
.sf-sec-title { font-weight: 800; color: #0f6f7d; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sf-sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.sf-kv { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 7px; background: #f4f9fa; font-size: 12.5px; }
.sf-kv span { color: #5b6380; }
.sf-kv b { color: #1f2f6e; text-align: right; word-break: break-word; }
.sf-kv.zero b { color: #b3b9cc; font-weight: 500; }
.sf-screen { border: 1px solid #e3e8f4; border-radius: 8px; margin-bottom: 6px; background: #fff; }
.sf-screen summary { padding: 5px 10px; cursor: pointer; font-size: 12.5px; }
.sf-screen pre { margin: 0; max-height: 260px; overflow: auto; background: #0d1b5e; color: #e6ecff; padding: 8px 10px; font-size: 11.5px; border-radius: 0 0 8px 8px; }
.sf-dir { background: #eef6f8; border-radius: 99px; padding: 2px; }
.sf-dir button { color: #0f6f7d !important; }
.sf-dir button.on { background: #14a3b8 !important; color: #fff !important; }
.sf-actions { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; flex-wrap: wrap; }
table.sf-cmp { width: 100%; font-size: 12.5px; border-collapse: collapse; }
table.sf-cmp th { text-align: left; font-size: 11px; text-transform: uppercase; color: #6b7390; padding: 4px 6px; border-bottom: 2px solid #d9f3f7; }
table.sf-cmp td { padding: 4px 6px; border-bottom: 1px solid #f0f2f8; vertical-align: top; }
table.sf-cmp tr.diff td { background: #fff4e0; }
table.sf-cmp tr.diff td:last-child { color: #b45309; }
table.sf-cmp summary { cursor: pointer; }
.sf-pre { max-height: 220px; overflow: auto; background: #0d1b5e; color: #e6ecff; padding: 6px 8px; border-radius: 6px; font-size: 11px; margin: 4px 0 0; white-space: pre-wrap; }
table.sf-cmp tr.sf-last td { background: #e3f6ec; font-weight: 700; }
.sf-report { border: 1px dashed #f0b44c; border-radius: 12px; padding: 10px 12px; background: #fffaf0; }
.sf-form-title { font-weight: 800; font-size: 12px; color: #8a5300; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .4px; }
.sf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.sf-form-grid.wide { grid-template-columns: 1fr; }
.sf-in { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: 11.5px; color: #5b6380; }
.sf-in input.num { text-align: right; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.sf-in.changed span { color: #b45309; font-weight: 800; }
.sf-in.changed input, .sf-in.changed textarea { border-color: #f0b44c; background: #fff4e0; }
.sf-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* FM – Service Flight: thẻ chuyến (kiểu Bov) + cửa sổ chi tiết */
.sf-cards { display: flex; flex-direction: column; gap: 12px; }
.sf-daybar { font-weight: 800; color: #0f6f7d; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; margin-top: 4px; }
.sf-daybar.click { cursor: pointer; background: #eef7f8; border: 1px solid #cfe7ea; border-radius: 8px; padding: 6px 10px; user-select: none; }
.sf-daybar.click:hover { background: #e2f1f3; }
.sf-daybar .sf-dayarrow { font-style: normal; display: inline-block; width: 14px; }
.sf-daybar .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sf-card { display: grid; grid-template-columns: 150px minmax(280px, 1.25fr) minmax(320px, 1fr); gap: 18px; align-items: center; cursor: pointer;
  background: #fff; border: 1px solid #e3e8f4; border-radius: 14px; padding: 14px 18px; box-shadow: 0 2px 10px rgba(31,47,110,.05); transition: box-shadow .15s, border-color .15s; }
.sf-card:nth-child(even) { background: #fafbfe; }
.sf-card:hover { border-color: #8e5cf2; box-shadow: 0 6px 18px rgba(106,61,232,.14); }
.sf-card.sel { border: 2px solid #6a3de8; }
@media (max-width: 1100px) { .sf-card { grid-template-columns: 1fr; } }
.sf-c-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sf-c-date { background: #f1ecff; color: #6a3de8; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.sf-c-air img { height: 26px; }
.sf-c-rep { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; }
.sf-c-rep.sent { background: #e3f6ec; color: #17784a; }
.sf-c-rep.draft { background: #fff4e0; color: #8a5300; }
.sf-c-rep.fail { background: #fdeeee; color: #8f1d1d; }
.sf-c-banner { background: linear-gradient(90deg, #f05a28, #f47b3f); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .5px; padding: 6px 14px; border-radius: 6px; margin-bottom: 10px; }
.sf-c-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.sf-c-pt { display: flex; flex-direction: column; }
.sf-c-pt.end { align-items: flex-end; }
.sf-c-pt b { font-size: 15px; color: #1f2f6e; }
.sf-c-pt span { font-size: 28px; font-weight: 800; color: #9aa3bd; line-height: 1.1; }
.sf-c-pt span.me { color: #0f6f7d; }
.sf-c-path { position: relative; text-align: center; border-top: 2px dotted #c9d2e6; margin-top: 4px; }
.sf-c-path i { position: relative; top: -13px; font-style: normal; font-size: 20px; color: #6a3de8; background: inherit; }
.sf-c-path small { position: relative; top: -12px; display: block; color: #8a93ad; }
.sf-c-stats { border-left: 2px dotted #c9d2e6; padding-left: 16px; font-size: 13.5px; }
.sf-s { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; color: #1f2f6e; }
.sf-s.t-time { color: #6a3de8; }
.sf-s.t-book { color: #d99a00; }
.sf-s.t-board { color: #1f9d55; }
.sf-s.muted { color: #6b7390; font-size: 12.5px; }
.sf-modal { position: fixed; z-index: 1060; top: 3vh; left: 50%; transform: translateX(-50%); width: min(1100px, 96vw); max-height: 94vh; overflow: auto;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.3); padding: 16px 20px 20px; border-top: 6px solid #14a3b8; }
.sf-modal .sf-detail-head { position: sticky; top: -16px; background: #fff; padding: 8px 0; z-index: 2; font-size: 18px; }
.sf-modal .sf-sec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-modal .sf-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-modal .sf-form-grid.wide { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .sf-modal .sf-sec-grid, .sf-modal .sf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid #e3e8f4; margin: 8px 0 4px; }
.sf-tabs button { border: 0; background: transparent; padding: 8px 14px; font-weight: 700; color: #5b6380; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.sf-tabs button.on { color: #0f6f7d; border-bottom-color: #14a3b8; }
.sf-tabs button:hover:not(:disabled) { color: #0f6f7d; }

/* FM – phiếu chuyến bay (popup kiểu Bov) */
.fp { position: fixed; z-index: 1060; top: 2vh; left: 50%; transform: translateX(-50%); width: min(1280px, 97vw); height: 96vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden; }
.fp-head { display: grid; grid-template-columns: minmax(330px, 1.2fr) auto auto; gap: 18px; align-items: center; padding: 14px 52px 10px 18px; background: linear-gradient(180deg, #f7f5ff, #fff); position: relative; }
.fp-close { position: absolute; top: 10px; right: 12px; }
.fp-banner { background: linear-gradient(90deg, #f05a28, #f47b3f); color: #fff; font-weight: 800; letter-spacing: .5px; padding: 5px 12px; border-radius: 6px; display: inline-block; }
.fp-route { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 6px; }
.fp-route > div { display: flex; flex-direction: column; }
.fp-route .end { align-items: flex-end; }
.fp-route b { color: #1f2f6e; }
.fp-route span { font-size: 26px; font-weight: 800; color: #0f6f7d; line-height: 1; }
.fp-path { text-align: center; border-top: 2px dotted #c9d2e6; }
.fp-path i { font-style: normal; color: #6a3de8; position: relative; top: -12px; }
.fp-path small { position: relative; top: -10px; color: #6a3de8; font-weight: 700; }
.fp-head-fields { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.fp-screens { display: flex; flex-direction: column; gap: 4px; }
.fp-scr-btn { border: 0; border-radius: 8px; padding: 4px 12px; font-weight: 800; font-size: 12px; }
.fp-scr-btn.vcr { background: #f1ecff; color: #6a3de8; }
.fp-scr-btn.vip { background: #fdecec; color: #c62828; }
.fp-scr-btn:disabled { opacity: .4; }
.fp-sum { font-size: 13px; line-height: 1.6; border-left: 2px dotted #c9d2e6; padding-left: 14px; }
.fp-sum .t-book { color: #d99a00; } .fp-sum .t-board { color: #1f9d55; }
.fp-crew { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 8px 18px 10px; border-bottom: 1px solid #e3e8f4; background: #fbfcff; }
.fp-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 2px solid #e3e8f4; }
.fp-tabs button { border: 0; background: none; padding: 9px 14px; font-weight: 800; color: #6b7390; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.fp-tabs button.on { color: var(--tc); border-bottom-color: var(--tc); background: color-mix(in srgb, var(--tc) 7%, #fff); border-radius: 8px 8px 0 0; }
.fp-tabs em { font-style: normal; background: #f0b44c; color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.fp-body { flex: 1; overflow: auto; padding: 12px 18px; background: #f6f8fc; }
.fp-groups { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.fp-group { background: #fff; border: 1px solid color-mix(in srgb, var(--gc) 25%, #fff); border-left: 5px solid var(--gc); border-radius: 12px; padding: 8px 12px 10px; margin-bottom: 12px; }
.fp-groups .fp-group { margin-bottom: 0; }
.fp-group.wide { flex-basis: 100%; }
.fp-gtitle { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gc); margin-bottom: 6px; }
.fp-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.fp-f { display: flex; flex-direction: column; gap: 1px; margin: 0; }
.fp-f .fp-l { font-size: 11px; font-weight: 700; color: #5b6380; white-space: nowrap; display: flex; align-items: center; gap: 2px; }
.fp-f input.form-control, .fp-f select { height: 30px; padding: 2px 6px; font-size: 13px; }
.fp-f.num input { width: 66px; text-align: right; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.fp-f.time input { width: 70px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.fp-f.text input { width: 130px; }
.fp-f.select select { width: 120px; }
.fp-f.area { flex: 1 1 320px; } .fp-f.area textarea { width: 100%; }
.fp-f.toggle { align-items: center; } .fp-f.toggle input { width: 2.2em; height: 1.2em; margin: 6px 0 0; }
.fp-f.changed .fp-l { color: #b45309; }
.fp-f.changed input, .fp-f.changed select, .fp-f.changed textarea { border-color: #f0b44c; background: #fff4e0; }
.fp-i { border: 0; background: none; padding: 0 2px; color: #6a3de8; font-size: 12px; line-height: 1; cursor: pointer; }
.fp-i:hover { color: #c62828; }
.fp-loc { font-style: normal; color: #14a3b8; font-size: 8px; }
.fp-tbl { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.fp-tbl th { text-align: left; font-size: 11px; color: #6b7390; text-transform: uppercase; padding: 4px 6px; border-bottom: 2px solid #e3e8f4; }
.fp-tbl td { padding: 4px 6px; border-bottom: 1px solid #f0f2f8; }
.fp-tbl tr.diff td { background: #fff4e0; } .fp-tbl tr.last td { background: #e3f6ec; font-weight: 700; }
.fp-scr-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-scr-chip { border: 1px solid #e3e8f4; background: #fff; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
.fp-scr-chip.new { border-color: #1f9d55; color: #1f9d55; }
.fp-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid #e3e8f4; background: #fff; }
.fp-msg { font-size: 12.5px; font-weight: 700; } .fp-msg.ok { color: #17784a; } .fp-msg.err { color: #c62828; }
.fp-scr-back { position: fixed; inset: 0; z-index: 1070; background: rgba(20,24,50,.25); }
.fp-scr { position: fixed; z-index: 1071; top: 8vh; left: 50%; transform: translateX(-50%); width: min(860px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.fp-scr pre { flex: 1; overflow: auto; margin: 0; background: #0d1b5e; color: #e6ecff; padding: 10px 12px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; }
.fp-confirm { z-index: 1072; }
@media (max-width: 900px) { .fp-head { grid-template-columns: 1fr; } }
.fp-f.time input[type=time] { width: 96px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-weight: 700; padding: 2px 4px; }
.fp-f.bad input { border-color: #c62828 !important; background: #fdeeee !important; } .fp-f.bad .fp-l { color: #c62828; }
.fp-sub { border: 1px solid color-mix(in srgb, var(--sc) 30%, #fff); background: color-mix(in srgb, var(--sc) 6%, #fff); border-radius: 10px; padding: 4px 8px 6px; }
.fp-sub-t { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--sc); margin-bottom: 2px; }
.fp-sub .fp-f .fp-l { color: color-mix(in srgb, var(--sc) 75%, #333); }
.fp-sub .fp-f input { border-color: color-mix(in srgb, var(--sc) 35%, #fff); }
/* Down Cfg / Over Flt: công tắc YES / NO */
.fp-f.toggle { align-items: flex-start; }
.fp-tog { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 64px; height: 30px; padding: 0 9px; border-radius: 99px;
  border: 1px solid #c9d2e6; background: #eef1f7; color: #6b7390; font-size: 11px; cursor: pointer; transition: background .15s, border-color .15s; }
.fp-tog .knob { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.fp-tog b { font-weight: 800; letter-spacing: .5px; }
.fp-tog.on { background: #c2410c; border-color: #c2410c; color: #fff; justify-content: flex-start; }
.fp-tog.on .knob { left: calc(100% - 26px); }
.fp-tog:hover { box-shadow: 0 0 0 3px rgba(194,65,12,.15); }
.fp-f.toggle.changed .fp-tog { outline: 2px solid #f0b44c; outline-offset: 1px; }
/* Service Flight: chọn ngày nhanh */
.sf-nav { width: 32px; height: 32px; border-radius: 10px; border: 1px solid #d8deec; background: #fff; color: #0f6f7d; font-size: 18px; font-weight: 800; line-height: 1; }
.sf-nav:hover { background: #e9f6f8; border-color: #14a3b8; }
.sf-quick { display: inline-flex; background: #eef6f8; border-radius: 12px; padding: 3px; gap: 2px; margin-left: 6px; }
.sf-quick button { border: 0; background: transparent; border-radius: 9px; padding: 4px 12px; font-weight: 700; font-size: 13px; color: #0f6f7d; display: inline-flex; align-items: center; gap: 6px; }
.sf-quick button i { font-style: normal; font-size: 9px; opacity: .7; }
.sf-quick button small { font-weight: 600; color: #6b9aa3; font-size: 11px; }
.sf-quick button:hover { background: #d9f0f4; }
.sf-quick button.on { background: linear-gradient(135deg, #14a3b8, #0f8f8f); color: #fff; box-shadow: 0 2px 8px rgba(20,163,184,.35); }
.sf-quick button.on small { color: #d9f6fb; }

/* FM – Aircraft Change (bảng xoay vòng tàu bay) */
.ac-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-top: 4px solid #3d56b0; }
.ac-legend { display: flex; gap: 10px; font-size: 12px; color: #5b6380; flex-wrap: wrap; }
.ac-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.ac-legend i.warn { background: #fff; border: 2px solid #c62828; }
.ac-wrap { overflow: auto; max-height: 66vh; position: relative; }
.ac-grid { position: relative; }
.ac-head { position: sticky; top: 0; z-index: 5; height: 34px; background: #f1f4fb; border-bottom: 2px solid #d8deec; }
.ac-hour { position: absolute; top: 0; height: 34px; line-height: 34px; font-size: 11.5px; font-weight: 700; color: #5b6380; border-left: 1px solid #d8deec; padding-left: 4px; }
.ac-hour.midnight { color: #c62828; border-left: 2px solid #c62828; }
.ac-label { position: sticky; left: 0; z-index: 4; width: 150px; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 10px;
  background: #fff; border-right: 2px solid #d8deec; }
.ac-corner { position: absolute; left: 0; top: 0; height: 34px; background: #f1f4fb; font-weight: 800; color: #3d56b0; z-index: 6; }
.ac-label b { font-family: ui-monospace, Consolas, monospace; color: #1f2f6e; font-size: 14px; }
.ac-label small { color: #6b7390; font-size: 11px; }
.ac-type { color: #fff; border-radius: 5px; padding: 0 5px; font-weight: 800; font-size: 10px; }
.ac-row { position: relative; height: 46px; border-bottom: 1px solid #edf0f7; }
.ac-row:nth-child(even) .ac-label { background: #fafbfe; }
.ac-row.unassigned .ac-label { background: #fff8e6; }
.ac-row.unassigned .ac-label b { color: #b45309; }
.ac-row.over { background: #eef3ff; }
.ac-row.over .ac-label { background: #dde6ff; }
.ac-tick { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #edf0f7; }
.ac-flt { position: absolute; top: 7px; height: 32px; border-radius: 7px; background: var(--fc); color: #fff; padding: 2px 6px; cursor: grab; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; line-height: 1.1; box-shadow: 0 2px 5px rgba(0,0,0,.15); z-index: 2; user-select: none; }
.ac-flt b { font-size: 12.5px; }
.ac-flt span { font-size: 10px; opacity: .9; white-space: nowrap; }
.ac-flt em { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 11px; }
.ac-flt.warn { outline: 3px solid #c62828; outline-offset: -1px; }
.ac-flt.moved { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); box-shadow: 0 0 0 2px #f0b44c; }
.ac-flt.sel { box-shadow: 0 0 0 3px #111; z-index: 3; }
.ac-flt:active { cursor: grabbing; }
.ac-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 1000px) { .ac-bottom { grid-template-columns: 1fr; } }
.ac-sel { border-top: 4px solid #6a3de8; }
.ac-issue { color: #c62828; font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.ac-changes { border-top: 4px solid #f0b44c; }
.ac-chg { font-size: 13px; padding: 3px 0; border-bottom: 1px dashed #edf0f7; }
.ac-flt { top: 6px; }
/* Aircraft Change: thanh chuyến có giờ + thời gian bay, thời gian quay đầu */
.ac-flt { height: 44px; padding: 2px 7px; }
.ac-flt b { font-size: 12.5px; white-space: nowrap; }
.ac-flt b small { font-weight: 600; font-size: 10px; opacity: .9; }
.ac-flt span { font-size: 10.5px; font-family: ui-monospace, Consolas, monospace; }
.ac-flt span.blk { font-size: 10px; opacity: .85; }
.ac-gt { position: absolute; bottom: 2px; height: 14px; line-height: 14px; font-size: 9.5px; font-weight: 800; color: #6b7390; text-align: center;
  border-bottom: 2px solid #c9d2e6; white-space: nowrap; z-index: 1; }
.ac-gt.tight { color: #b45309; border-color: #f0b44c; }
.ac-gt.bad { color: #c62828; border-color: #c62828; }
.ac-gt { bottom: 0; }
/* Aircraft Change: gợi ý tàu phù hợp + đổi cả chuỗi */
.ac-row.fit-ok .ac-label { background: #e3f6ec !important; } .ac-row.fit-ok { background: #f2fbf6; }
.ac-row.fit-warn .ac-label { background: #fff4e0 !important; }
.ac-row.fit-bad .ac-label { opacity: .55; }
.ac-fit { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 0 7px; background: #fff; border: 1px solid #c9d2e6; color: #5b6380; }
.fit-ok .ac-fit { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.fit-warn .ac-fit { background: #f0b44c; border-color: #f0b44c; color: #fff; }
.ac-sug-title { font-weight: 800; font-size: 12px; color: #3d56b0; text-transform: uppercase; letter-spacing: .4px; margin: 8px 0 4px; }
.ac-sug { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.ac-sug-row { display: grid; grid-template-columns: 22px 70px 36px 1fr auto auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 8px; font-size: 12.5px; }
.ac-sug-row.l0 { background: #e3f6ec; } .ac-sug-row.l1 { background: #fff4e0; } .ac-sug-row.l2 { background: #f6f7fb; color: #8a93ad; }
.ac-sug-badge { font-weight: 800; text-align: center; }
.ac-sug-row.l0 .ac-sug-badge { color: #1f9d55; } .ac-sug-row.l1 .ac-sug-badge { color: #b45309; } .ac-sug-row.l2 .ac-sug-badge { color: #c62828; }
.ac-sug-why { font-size: 11.5px; }
/* Aircraft Change: zoom, nhiều ngày, khối bảo dưỡng, giờ thực tế */
.ac-zoom { display: inline-flex; align-items: center; gap: 4px; background: #eef6f8; border-radius: 10px; padding: 2px; }
.ac-zoom button { width: 26px; height: 26px; border: 0; border-radius: 8px; background: #fff; font-weight: 800; color: #0f6f7d; }
.ac-zoom button:disabled { opacity: .4; }
.ac-hour b { color: #c62828; font-size: 10px; }
.ac-legend i.blk-mx { background: repeating-linear-gradient(45deg, #9aa3bd 0 4px, #e6e9f2 4px 8px); }
.ac-legend i.act { background: #111; height: 4px; vertical-align: 2px; }
.ac-blk { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; z-index: 1; font-size: 10.5px; color: #3d4560; padding: 2px 6px; overflow: hidden; white-space: nowrap; cursor: pointer;
  background: repeating-linear-gradient(45deg, rgba(154,163,189,.45) 0 6px, rgba(230,233,242,.6) 6px 12px); border: 1px dashed #8a93ad; }
.ac-blk.k-aog { background: repeating-linear-gradient(45deg, rgba(198,40,40,.35) 0 6px, rgba(253,238,238,.6) 6px 12px); border-color: #c62828; color: #8f1d1d; }
.ac-blk.k-res { background: repeating-linear-gradient(45deg, rgba(47,111,224,.25) 0 6px, rgba(238,243,255,.6) 6px 12px); border-color: #2f6fe0; }
.ac-blk-tag { font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 0 6px; background: #9aa3bd; color: #fff; }
.ac-blk-tag.k-aog { background: #c62828; } .ac-blk-tag.k-res { background: #2f6fe0; }
.ac-blocks { border-top: 4px solid #8a93ad; grid-column: 1 / -1; }
.ac-blk-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.ac-time { width: 70px !important; text-align: center; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.ac-act { position: absolute; height: 5px; background: #111; border-radius: 3px; z-index: 3; opacity: .75; }
.ac-dly { position: absolute; right: 3px; bottom: 2px; font-style: normal; font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 0 4px; background: #fff; }
.ac-dly.ok { color: #17784a; } .ac-dly.tight { color: #b45309; } .ac-dly.late { color: #fff; background: #c62828; }
.ac-dly.est { color: #8a5300; background: #fff4e0; }
.ac-chg.sel { background: #f1ecff; }

/* Aircraft Change – giờ mới đề xuất */
.ac-ghost { position: absolute; height: 44px; border: 2px dashed #e07a00; border-radius: 8px; background: rgba(255, 166, 0, .10); z-index: 1; pointer-events: none; }
.ac-ghost span { position: absolute; left: 4px; bottom: 2px; font-size: 10px; font-weight: 800; color: #a35400; white-space: nowrap; }
.ac-times { border-top: 4px solid #e07a00; grid-column: 1 / -1; }
.ac-tt { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-tt th { text-align: left; font-size: 11px; text-transform: uppercase; color: #7a849c; font-weight: 700; padding: 4px 6px; border-bottom: 1px solid #e6e9f2; }
.ac-tt td { padding: 5px 6px; border-bottom: 1px dashed #eef0f6; white-space: nowrap; }
.ac-tt td.hint { white-space: normal; }
.ac-tt tr { cursor: pointer; } .ac-tt tbody tr:hover { background: #fff8ec; }
.ac-tt s { color: #9aa3b8; }
.ac-tt tr.big .ac-dly-tag { background: #c62828; color: #fff; }
.ac-dly-tag { font-weight: 800; font-size: 12px; border-radius: 6px; padding: 1px 6px; background: #fff4e0; color: #8a5300; }
.ac-tt tr.broken td { color: #b71c1c; } .ac-dly-tag.bad { background: #c62828; color: #fff; }

/* Automation – Email (SMTP) */
.mail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin: 6px 0 4px; }
.mail-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; font-weight: 700; color: #6b7590; }
.mail-grid label.wide { grid-column: span 2; }
@media (max-width: 700px) { .mail-grid label.wide { grid-column: 1 / -1; } }
/* Daily Flight Report */
.dr-bar { flex-wrap: wrap; }
.dr-station { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #4b23c9; background: #f1edff; border-radius: 10px; padding: 3px 4px 3px 10px; }
.dr-station select { width: auto; min-width: 120px; font-weight: 700; border-color: #d9d0ff; }
.dr-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.dr-src { font-size: 12.5px; color: #59627a; margin: -4px 4px 10px; }
.dr-warn { color: #b45309; font-weight: 700; margin-left: 4px; }
.dr-card { margin-bottom: 12px; }
.dr-tabs { margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.dr-tabs small { background: rgba(0, 0, 0, .08); border-radius: 8px; padding: 0 6px; margin-left: 4px; font-weight: 800; }
.dr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.dr-tbl th { background: #3498db; color: #fff; font-size: 11.5px; text-transform: uppercase; font-weight: 800; padding: 6px 8px; text-align: center; position: sticky; top: 0; z-index: 1; }
.dr-tbl td { padding: 5px 8px; border-bottom: 1px solid #eef0f6; text-align: center; white-space: nowrap; }
.dr-tbl tbody tr:nth-child(even) td { background: #f8f9fc; }
.dr-tbl tbody tr:hover td { background: #eef5ff; }
.dr-tbl tfoot td { font-weight: 800; background: #e8f1fb; padding: 6px 8px; text-align: center; border-top: 2px solid #3498db; }
.dr-tbl tr.cnl td { color: #b71c1c; } .dr-tbl tr.cnl .dr-pax { font-weight: 900; }
.dr-tbl tr.arr td:nth-child(3) { color: #0f766e; }
.dr-pax { font-weight: 800; font-size: 14px; }
.dr-arrow { color: #9aa3b8; margin: 0 4px; }
.dr-sched tr.grp td { border-top: 2px solid #c9d6ea; }
.modal-back { position: fixed; inset: 0; background: rgba(20, 24, 40, .45); z-index: 1060; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow: auto; }
.dr-send { width: min(720px, 100%); border-top: 4px solid #4b23c9; }
.dr-f { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; font-weight: 700; color: #6b7590; margin-bottom: 6px; }
.dr-att { font-size: 12.5px; margin: 4px 0; }
.dr-preview { border: 1px dashed #d4d9e6; border-radius: 10px; padding: 10px 12px; max-height: 38vh; overflow: auto; background: #fff; margin-top: 6px; }.dr-tabs.ph-tabs { background: #f1edff; }
.dr-tabs.ph-tabs button { color: #5b4a99; }
.dr-tabs.ph-tabs button:hover { background: #e4dcff; color: #4b23c9; }
.dr-tabs.ph-tabs button.on { background: #4b23c9; color: #fff; }
.dr-tabs.ph-tabs button.on small { background: rgba(255, 255, 255, .25); }.dr-import { border-left: 4px solid #0f8f8f; padding: 10px 14px; }
.dr-imp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-imp-ico { font-size: 22px; }
.dr-imp-ok { color: #15803d; font-weight: 700; }
.dr-upload { cursor: pointer; margin: 0; }
.dr-imp-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dr-imp-list span { font-size: 11.5px; background: #eef7f7; color: #0b5f5f; border-radius: 8px; padding: 2px 8px; }.mail-acc { margin: 4px 0 8px; }
.mail-acc td, .mail-acc th { text-align: left; }
.mail-acc tr.sel td { background: #fff3fa; }
.mail-def { color: #d63384; font-size: 16px; }
.mail-edit { border: 1px dashed #e6b3cf; border-radius: 10px; padding: 10px 12px; margin: 6px 0; background: #fffafd; }
.mail-sub { font-size: 14px; font-weight: 800; margin: 14px 0 4px; }.dr-draftbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f6f3ff; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.dr-draftbar > label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #4b23c9; margin: 0; }
.dr-draftbar select { width: auto; min-width: 200px; }
.dr-body { font-family: Calibri, Arial, sans-serif; font-size: 13.5px; line-height: 1.45; }
.fs-badge { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 7px; background: #eef0f6; color: #59627a; }
.fs-badge.same { background: #e8f8ef; color: #15803d; }
.fs-badge.changed { background: #fff4e0; color: #a35400; }
.fs-badge.added { background: #e6f1fb; color: #185fa5; }
.fs-badge.cancelled { background: #fdeaea; color: #b71c1c; }
.fs-tbl tr.st-cancelled td { color: #b71c1c; text-decoration: line-through; }
.fs-tbl tr.st-cancelled td:nth-last-child(-n+2) { text-decoration: none; }
.fs-tbl tr.st-added td { background: #f2f8ff !important; }
.fs-tbl tr.st-changed td { background: #fffaf0 !important; }
.dr-skedline a { font-weight: 700; }.sf-sked { font-size: 11.5px; font-weight: 800; border-radius: 7px; padding: 2px 8px; margin: 3px 0 2px; display: inline-block; }
.sf-sked.cnl { background: #fdeaea; color: #b71c1c; }
.sf-sked.add { background: #e6f1fb; color: #185fa5; }
.sf-sked.chg { background: #fff4e0; color: #a35400; }
.sf-sked.split { padding: 0; background: none; display: inline-flex; flex-wrap: wrap; overflow: hidden; border: 1px solid #f0d9b5; }
.sf-sked.split > span { padding: 2px 8px; }
.sf-sked.split .g-now { background: #fff1d6; color: #a35400; }
.sf-sked.split .g-chg { background: #f1ecff; color: #4b23c9; border-left: 1px solid #e2d8ff; }
.sf-sked.split .g-chg small { font-size: 9.5px; font-weight: 700; opacity: .7; margin-left: 2px; }
.sf-card.sk-cancelled { opacity: .62; }
.sf-card.sk-cancelled .sf-c-line b { text-decoration: line-through; }
.sf-card.sk-added { border: 2px dashed #85b7eb; cursor: default; }.fs-filters { margin: -4px 0 8px; display: inline-flex; }
.fs-badge.ferry { background: #eef0fb; color: #3c3489; }
.fs-badge.fmonly { background: #f1efe8; color: #5f5e5a; }
.fs-tbl tr.st-fmonly td { color: #8a8f9c; font-style: italic; }
.fs-tbl tr.st-ferry td { background: #f6f5ff !important; }
.fs-src { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.fs-src.fm { background: #e1f5ee; color: #0f6e56; }
.fs-src.xl { background: #e6f1fb; color: #185fa5; }
.fp-sked { font-size: 11.5px; font-weight: 700; color: #3c3489; background: #eeedfe; border-radius: 7px; padding: 2px 8px; margin-top: 4px; display: inline-block; max-width: 100%; }

.fp-rule { font-size: 11px; font-weight: 700; color: #5b6380; margin-top: 3px; }

.lf-scr { max-height: 40vh; overflow: auto; background: #0f1222; color: #d7f5d0; font-size: 11.5px; padding: 8px 10px; border-radius: 8px; margin-top: 8px; white-space: pre; }

/* Phiếu chuyến bay – nhóm Ground & towing gọn để nằm cạnh VN codeshare */
.fp-group.compact { flex: 1 1 360px; min-width: 0; }
.fp-group.compact .fp-f.num input { width: 50px; }
.fp-group.compact .fp-f.text input { width: 80px; }
.fp-group.compact .fp-fields { gap: 6px; }
.fp-group.compact .fp-sub { padding: 4px 6px 6px; }
.fp-group.compact .fp-sub-t { font-size: 10.5px; }.sf-card.sf-ns { border: 2px solid #e24b4a !important; box-shadow: 0 0 0 3px rgba(226, 75, 74, .12); }
.sf-ns-alert { background: #fcebeb; color: #a32d2d; font-weight: 800; font-size: 12px; border-radius: 7px; padding: 2px 8px; margin-bottom: 3px; display: inline-block; }
.sf-ns-txt { color: #c62828; font-weight: 800; }
.fp-conn-alert { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: #fcebeb; border: 1px solid #f09595; color: #791f1f; border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; font-size: 12.5px; }
.fp-conn-alert > b:first-child { color: #a32d2d; }

.sf-c-rep.saved { background: #e1f5ee; color: #0f6e56; }

.fm-st-edit { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #0f6e56; }
.fm-st-edit input { width: 130px; height: 26px; font-size: 12px; }

.fp-ro { font-size: 12.5px; font-weight: 700; color: #5f5e5a; background: #f1efe8; border-radius: 8px; padding: 4px 10px; }

/* ---------- FM Reports (3E) ---------- */
.rp-bar { display: flex; flex-direction: column; gap: 10px; }
.rp-dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-dates input[type=date] { width: 150px; }
.rp-stations { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rp-chip { border: 1px solid #d8d2f0; background: #fff; color: #4b23c9; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.rp-chip.on { background: #4b23c9; color: #fff; border-color: #4b23c9; }
.rp-chip:disabled { opacity: .45; }
.rp-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.rp-group { background: #fff; border: 1px solid #ece9f7; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.rp-group-h { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #8a84a8; padding: 0 4px 2px; }
.rp-kind { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; text-align: left; border: 1px solid transparent; background: #f8f7fd; border-radius: 9px; padding: 7px 9px; }
.rp-kind i { grid-row: 1 / 3; font-style: normal; font-size: 20px; align-self: center; }
.rp-kind b { font-size: 13px; color: #2b1a73; }
.rp-kind small { font-size: 11px; color: #777; line-height: 1.25; }
.rp-kind:hover { border-color: #cfc5f5; }
.rp-kind.on { background: #4b23c9; border-color: #4b23c9; }
.rp-kind.on b, .rp-kind.on small { color: #fff; }
.rp-preview .rp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rp-ttl { font-weight: 800; color: #4b23c9; margin: 14px 0 6px; }
.rp-warn { background: #fff8e1; border: 1px solid #f3d27a; border-radius: 9px; padding: 6px 12px; margin-bottom: 10px; font-size: 12.5px; }
.rp-warn summary { cursor: pointer; font-weight: 700; color: #8a5a00; }
.rp-warn ul { margin: 6px 0 0; columns: 2; }
.rp-scroll { overflow: auto; max-height: 70vh; border: 1px solid #e6e3f2; border-radius: 9px; }
.rp-table { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.rp-table th { position: sticky; top: 0; background: #4b23c9; color: #fff; font-weight: 700; padding: 6px 8px; text-align: center; white-space: nowrap; border-right: 1px solid #6a48d8; z-index: 1; }
.rp-table thead tr:nth-child(2) th { top: 29px; background: #ede7fb; color: #2b1a73; }
.rp-table th.grp { background: #5b36d6; }
.rp-table td { padding: 5px 8px; border-bottom: 1px solid #f0eef8; text-align: center; white-space: nowrap; }
.rp-table td.wrap { white-space: normal; min-width: 220px; text-align: left; }
.rp-table tbody tr:nth-child(even) td { background: #faf9fe; }
.rp-table tbody tr.sub td { background: #eef7f8; color: #0f6f7d; font-size: 11.5px; }
.rp-table tbody tr.warn td:first-child { background: #fff1b8; box-shadow: inset 3px 0 #e0a800; }
.rp-table tbody tr.click { cursor: pointer; }
.rp-table tbody tr.click:hover td { background: #efeafd; }
.rp-table tfoot td { position: sticky; bottom: 0; background: #ede7fb; font-weight: 800; color: #2b1a73; border-top: 2px solid #4b23c9; }
@media (max-width: 700px) { .rp-warn ul { columns: 1; } .rp-dates input[type=date] { width: 130px; } }
.sf-vip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: -8px; padding: 6px 14px 12px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #fff4d6, #fffaf0); border: 1px solid #f1d58a; border-bottom: 0; font-size: 12px; cursor: pointer; }
.sf-vip b { color: #8a5a00; }
.sf-vip span { background: #fff; border: 1px solid #f1d58a; border-radius: 999px; padding: 1px 9px 1px 3px; color: #5b4300; font-weight: 600; }
.sf-vip span i { font-style: normal; display: inline-block; min-width: 18px; text-align: center; margin-right: 5px; border-radius: 999px; background: #d99a00; color: #fff; font-size: 10.5px; font-weight: 800; }
.mco-box { grid-column: 1 / -1; }
.mco-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.mco-table th { text-align: left; font-size: 11px; color: #2f7d4f; padding: 4px 6px; border-bottom: 1px solid #d6eadc; }
.mco-table td { padding: 4px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.mco-table tr.mco-new td { background: #f5fbf7; }
.mco-box { flex-basis: 100%; }
.mco-box .fp-gtitle { display: flex; align-items: center; }
.mco-table td:nth-child(2) { min-width: 250px; }
.mco-table td:nth-child(3), .mco-table td:nth-child(4) { width: 140px; }
.mco-table td:nth-child(3) input, .mco-table td:nth-child(4) input { width: 135px; }
.mco-table td:nth-child(5) { min-width: 170px; }
.mco-table .mco-num { width: 78px; text-align: right; }
.mco-table tr.mco-dirty td { background: #fffbea; }
.mco-table tr.mco-bad td { background: #fdecec; }
.mco-scroll { overflow-x: auto; }
.mco-table td:nth-child(5) select { min-width: 220px; }
.mco-table .mco-cur { width: 76px; }
.mco-table .mco-desc { min-width: 130px; }
.mco-table .mco-pc { width: 64px; text-align: right; }
.mco-table select.mco-noitem { border-color: #f0a020; background-color: #fff7e6; }
.mco-table tr.mco-sent td { background: #f3fbf5; color: #2f5f3f; }
.mco-fm { font-size: 11px; color: #9aa3b5; white-space: nowrap; }
.mco-fm.ok { color: #fff; background: #1f9d55; border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.mco-file.sent { background: #eaf7ee; border-color: #b7e2c4; }
.mco-file.sent a { color: #1f7a45; }
.confirm-box.mco-confirm { width: min(720px, 94vw); max-width: none; }
.mco-confirm ul { margin-bottom: 6px; }
.alert-line.warn { background: #fff4e0; color: #8a5300; border-radius: 6px; padding: 6px 10px; }
.mco-files { min-width: 120px; }
.mco-file { display: inline-flex; align-items: center; gap: 2px; background: #eef6ff; border: 1px solid #cfe2ff; border-radius: 999px; padding: 1px 4px 1px 8px; margin: 1px 4px 1px 0; font-size: 11.5px; white-space: nowrap; }
.mco-file a { text-decoration: none; color: #1d4ed8; }
.mco-file button { border: 0; background: none; color: #c62828; font-size: 11px; padding: 0 3px; }
.mco-attach { background: #eef6ff; border: 1px dashed #93b4f5; padding: 1px 8px; }
.mco-attach:hover { background: #dbe8ff; }
.mco-del { background: #f5365c; color: #fff; border: 0; padding: 2px 8px; }
.mco-del:hover { background: #d81f45; color: #fff; }
.fp-f.reasons { min-width: 280px; }
.fp-reasons { display: flex; flex-direction: column; gap: 5px; }
.fp-rs-line { display: flex; align-items: center; gap: 6px; }
.fp-rs-line select { min-width: 230px; background-color: #fff8e6; }
.fp-rs-n { font-size: 11px; color: #a35400; font-weight: 700; min-width: 14px; }
.fp-rs-del { background: #f5365c; color: #fff; border: 0; padding: 2px 8px; }
.fp-rs-del:hover { background: #d81f45; color: #fff; }
.fp-rs-add { align-self: flex-start; }
.fp-rs-old { font-size: 12px; color: #6b7280; background: #f3f4f6; border-radius: 6px; padding: 3px 8px; }
.im-bar { height: 6px; background: #e3eef0; border-radius: 4px; margin: 6px 0 3px; overflow: hidden; } .im-bar i { display: block; height: 100%; background: #0f6f7d; transition: width .4s; }
.rp-paxread { background: #eef7f8; border: 1px solid #bfe0e4; border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; color: #0f6f7d; }
/* ---------- Schedule Mail ---------- */
.sm-state { font-weight: 700; font-size: 12.5px; color: #8a84a8; }
.sm-state.on { color: #1f9d55; }
.sm-cfg { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e0dcef; font-size: 12.5px; }
.sm-cfg label { display: flex; align-items: center; gap: 6px; margin: 0; }
.sm-senders { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #f6f4fd; }
.sm-snd-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sm-snd { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #fff; border: 1px solid #d9d2f5; color: #3b1fa8; font-weight: 600; }
.sm-snd button { border: 0; background: #efeafd; color: #7a62d6; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; padding: 0; font-size: 11px; }
.sm-snd button:hover { background: #fde2e2; color: #b71c1c; }
.sm-table td { vertical-align: top; }
.sm-kind, .sm-st { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sm-kind.k-schedule { background: #e6f4ea; color: #1f7a45; }
.sm-kind.k-change { background: #fff1d6; color: #9a6200; }
.sm-kind.k-other { background: #f0f0f3; color: #777; }
.sm-st.s-loaded, .sm-st.s-applied { background: #e6f4ea; color: #1f7a45; }
.sm-st.s-review, .sm-st.s-new { background: #fff1d6; color: #9a6200; }
.sm-st.s-failed { background: #fde8e8; color: #b42318; }
.sm-st.s-ignored { background: #f0f0f3; color: #888; }
.sm-view pre { white-space: pre-wrap; max-height: 65vh; overflow: auto; font-size: 12px; }
.sf-mail { display: inline-block; margin: 2px 0 4px; border: 1px solid #c9d8f5; background: #eef4ff; color: #1f4fae; border-radius: 999px; padding: 1px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sf-mail:hover { background: #dfe9ff; }
.sf-mail-res { background: #eef7f8; border: 1px solid #bfe0e4; border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #0f6f7d; margin-bottom: 8px; }
/* ---------- Pop-up đổi lịch bay ---------- */
.sca-box { max-width: 680px; width: calc(100vw - 32px); }
.sca-list { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow: auto; margin: 10px 0; }
.sca-item { border: 1px solid #e3e0f0; border-left: 4px solid #2f6fe0; border-radius: 10px; padding: 8px 12px; background: #fafbff; }
.sca-item.chg { border-left-color: #d99a00; background: #fffaf0; }
.sca-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sca-kind { font-size: 11px; font-weight: 800; color: #555; white-space: nowrap; }
.sca-res { font-size: 12.5px; margin: 4px 0; color: #1f5f3a; }
.sca-res.warn { color: #9a6200; }
/* Kết quả mail đổi lịch dạng bảng (ChangeResult) */
.cr { margin-top: 2px; }
.cr-head { font-weight: 700; color: #1f5f3a; margin-bottom: 4px; }
.cr-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: #fff; border: 1px solid #e3e6f0; border-radius: 8px; overflow: hidden; color: #1f2937; }
.cr-table th { background: #f4f5fb; color: #5b6380; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; text-align: left; }
.cr-table td { padding: 4px 10px; border-top: 1px solid #f0f1f6; white-space: nowrap; font-weight: 500; }
.cr-table.compact td, .cr-table.compact th { padding: 2px 8px; font-size: 11.5px; }
.cr-table tr.cnl td { background: #fff5f5; }
.cr-flt { font-weight: 800 !important; color: #1f2a5a; }
.cr-tag { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.cr-tag.cnl { background: #fde2e2; color: #c62828; }
.cr-tag.acc { background: #efe9ff; color: #5b2bd6; }
.cr-reg { font-weight: 800; color: #fff; background: var(--rc, #6a3de8); border-radius: 6px; padding: 1px 7px; }
.cr-reg.old { background: #e9ebf2; color: #6b7280; text-decoration: line-through; font-weight: 600; }
.cr-table small { margin-left: 5px; color: #6b7280; }
.cr-table small.cr-type { color: #c2410c; font-weight: 700; }
.cr-arrow { color: #9aa3b5; padding: 4px 2px !important; }
.cr-tail { font-size: 11.5px; color: #6b7280; margin-top: 4px; white-space: normal; }
.cr-text { white-space: normal; }
.cr-compact > div { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 12px; }
.cr-compact .cr-flts { font-weight: 700; color: #1f2a5a; }
.cr-compact small { color: #6b7280; font-weight: 500; }
.sca-item details summary { cursor: pointer; font-size: 12px; color: #2f6fe0; }
.sca-item pre { white-space: pre-wrap; font-size: 11.5px; max-height: 260px; overflow: auto; background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 6px; margin-top: 4px; }
/* Nút lọc (ph-tabs) đặt trên nền trắng (card-box): chữ đậm màu cho rõ */
.card-box .ph-tabs { background: #f1effa; border: 1px solid #e3def5; }
.card-box .ph-tabs button, .card-box .ph-tabs a { color: #3f3a5c; }
.card-box .ph-tabs button:hover, .card-box .ph-tabs a:hover { background: #e4def7; color: #2b1a73; }
.card-box .ph-tabs button.on, .card-box .ph-tabs a.on { background: #4b23c9; color: #fff; box-shadow: 0 2px 6px rgba(75,35,201,.25); }
.sm-table .hint, .sm-bar .hint, .sca-item .hint { color: #5d5a70; }
/* ---------- Xem mail (nền trắng, đúng định dạng gốc) ---------- */
.mv-back { position: fixed; inset: 0; background: rgba(20,16,40,.45); z-index: 3000; }
.mv-box { position: fixed; z-index: 3001; top: 4vh; left: 50%; transform: translateX(-50%); width: min(1000px, calc(100vw - 24px)); max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 14px 16px; color: #1d1b29; }
.mv-head { display: flex; align-items: center; gap: 8px; }
.mv-subject { font-weight: 800; font-size: 15px; color: #1d1b29; }
.mv-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: #3f3b52; margin: 6px 0; }
.mv-result { background: #eef7f8; border: 1px solid #bfe0e4; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; color: #0f5f6b; margin-bottom: 6px; }
.mv-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mv-file { border: 1px solid #d6d2ea; background: #f7f6fc; color: #2b1a73; border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.mv-file:hover, .mv-file.on { background: #4b23c9; color: #fff; border-color: #4b23c9; }
.mv-frame { flex: 1; min-height: 60vh; width: 100%; border: 1px solid #e4e1ef; border-radius: 8px; background: #fff; }
.mv-loading { padding: 30px; text-align: center; color: #666; }
.mv-sheet-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mv-tab { border: 1px solid #d6d2ea; background: #fff; border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.mv-tab.on { background: #2f7d4f; color: #fff; border-color: #2f7d4f; }
.mv-sheet { flex: 1; overflow: auto; border: 1px solid #e4e1ef; border-radius: 8px; min-height: 50vh; }
.mv-sheet table { border-collapse: collapse; font-size: 12px; font-family: Calibri, Arial, sans-serif; }
.mv-sheet td { border: 1px solid #e3e3e3; padding: 2px 6px; white-space: nowrap; color: #111; }
.mv-sheet tr:first-child td { background: #f1f5f9; font-weight: 700; }
.sm-att { display: block; color: #1f4fae; font-weight: 600; text-decoration: none; }
.sm-att:hover { text-decoration: underline; }
/* ---------- Lịch sử đổi chuyến (Flight Schedule) ---------- */
.fs-remark { color: #1f4fae; text-decoration: none; }
.fs-remark:hover { text-decoration: underline; }
.fs-hist { width: min(760px, calc(100vw - 24px)); }
.fs-hist-list { overflow: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fs-hist-row { display: flex; gap: 12px; border: 1px solid #e6e3f0; border-left: 4px solid #8a84a8; border-radius: 9px; padding: 8px 10px; }
.fs-hist-row.a-cancelled { border-left-color: #c62828; }
.fs-hist-row.a-added, .fs-hist-row.a-reinstated { border-left-color: #1f9d55; }
.fs-hist-row.a-changed { border-left-color: #d99a00; }
.fs-hist-at { min-width: 82px; font-size: 12px; color: #3f3b52; }
.fs-hist-act { font-weight: 800; color: #1d1b29; }
.fs-hist-src { font-size: 12px; font-weight: 700; color: #4b23c9; }
.fs-hist-det { font-size: 12.5px; color: #2d2a3e; }

/* ================= Menu – kiểu phần mềm doanh nghiệp (10/11) =================
   Nền trắng, một màu chủ đạo navy Air Cambodia, tiêu đề nhóm chữ xám nhỏ, icon nét đơn sắc,
   mục đang mở: nền navy nhạt + vạch trái navy. Ghi đè các kiểu nhiều màu phía trên. */
:root { --nav-brand: #1b3a6b; --nav-brand-soft: #eaf0f8; --nav-text: #3b4256; --nav-muted: #8a91a3; --nav-hover: #f3f5f9; --nav-line: #e7eaf0; }
.sidebar { background: #fff !important; border-right: 1px solid var(--nav-line); box-shadow: none !important; }
.sidebar .logo { border-bottom: 1px solid var(--nav-line); }
.menu { padding: 10px 10px 30px; }
.menu-sec, .menu-sec.s-tkt, .menu-sec.s-fm, .menu-sec.s-adm, .menu-sec.s-acc { --c: var(--nav-brand); background: none !important; border: 0 !important; box-shadow: none !important; margin: 14px 0 0; padding: 0; border-radius: 0; }
.menu-heading { background: none !important; color: var(--nav-muted) !important; border: 0 !important; box-shadow: none !important; margin: 0 0 4px; padding: 6px 12px 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; border-radius: 0; }
.menu-link, .menu-sec > .menu-link { position: relative; display: flex; align-items: center; gap: 10px; margin: 1px 0; padding: 7px 12px; border-radius: 6px;
    color: var(--nav-text); font-weight: 500; font-size: 13.5px; background: none; border: 0; box-shadow: none; text-decoration: none; }
.menu-link .mi { flex: none; color: #7a8296; }
.menu-link i { background: none !important; }
.menu-link:hover { background: var(--nav-hover) !important; color: var(--nav-brand) !important; }
.menu-link:hover .mi { color: var(--nav-brand); }
.menu-link.active { background: var(--nav-brand-soft) !important; color: var(--nav-brand) !important; font-weight: 700; box-shadow: none !important; }
.menu-link.active .mi { color: var(--nav-brand); }
.menu-link.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-brand); }
.menu-link.home { margin: 2px 0 0; padding: 7px 12px; background: none; border: 0; border-radius: 6px; font-weight: 600; color: var(--nav-text); }
.menu-link.home.active { background: var(--nav-brand-soft) !important; }

/* ================= Trang – bớt màu, một màu navy (10/11) =================
   Dải tiêu đề mọi trang: một nền navy phẳng (bỏ chuyển màu tím / xanh / cam và vệt sáng);
   nút chính, ô đang chọn, viền khi gõ: navy thay tím. Ghi đè các kiểu phía trên. */
:root { --brand: #1b3a6b; --brand-d: #142d54; --brand-soft: #eaf0f8; --brand-line: #c9d5e8; }
.ph, .ph-violet, .ph-ocean, .ph-teal, .ph-sunset, .ph-rose, .ph-forest, .ph-indigo, .ph-amber, .ab-head, .ab-head.sr-head {
    background: var(--brand) !important; box-shadow: 0 1px 3px rgba(16,24,40,.12) !important; }
.ph { border-radius: 10px; }
.ph::after, .ab-head::after { display: none !important; }
.ph-icon { background: rgba(255,255,255,.12); box-shadow: none; border-radius: 10px; }
.ph-kicker, .ab-head-kicker { color: #b9c7de !important; letter-spacing: 1.5px; }
.ph-sub { color: #d4ddec; }
.ph-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; }
.ph-btn { border-radius: 8px; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
.ph-btn.solid, .ph-btn.solid:hover { color: var(--brand); }
.ph-tabs, .ab-tabs { background: rgba(255,255,255,.1); border-radius: 9px; }
.ph-tabs a.on, .ph-tabs button.on, .ab-tabs button.on { color: var(--brand) !important; box-shadow: none; }
.dr-tabs.ph-tabs, .card-box .ph-tabs { background: #f1f3f7; border-color: #e3e7ee; }
.card-box .ph-tabs a, .card-box .ph-tabs button, .dr-tabs.ph-tabs button { color: #4a5268; }
.card-box .ph-tabs a.on, .card-box .ph-tabs button.on, .dr-tabs.ph-tabs button.on { background: var(--brand) !important; color: #fff !important; }

/* Nút */
.btn-primary, .ab-actions .btn-primary { background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--brand-d) !important; border-color: var(--brand-d) !important; }
.btn-light:hover { background: #e9edf3; border-color: #d5dbe5; color: var(--brand); }
.cmd-run, .pf-btn { background: var(--brand) !important; box-shadow: none !important; }
.cmd-prompt { background: var(--brand-d) !important; }
.acct-tab.active, .sf-quick button.on, .cmd-find.on { background: var(--brand) !important; color: #fff; box-shadow: none !important; border-color: transparent; }

/* Ô nhập */
.form-control:focus, .form-select:focus { border-color: #5b7fb5; box-shadow: 0 0 0 3px rgba(27,58,107,.12); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.station-btn:hover, .station-btn.open { border-color: #5b7fb5; box-shadow: 0 0 0 3px rgba(27,58,107,.1); }
.station-item:hover { background: var(--brand-soft); }

/* Bảng */
table.report-grid thead th, table.lf-grid thead th { background: #f1f3f7 !important; color: #2b3348; }
table.lf-grid thead th.today { background: var(--brand) !important; color: #fff; }
table.report-grid tbody tr.total-row td, table.report-grid tbody tr.total-row:hover td, table.lf-grid th.lf-total-h { background: #2b3348 !important; }
.cmd-bar, .cmd-sug-head { background: #f5f7fa !important; border-color: #e3e7ee; }

/* ===== Trang chưa kết nối server (10/11): hiện "Connecting…", chặn bấm vào nội dung đến khi LiveFlag báo sẵn sàng ===== */
.bv-connecting { display: none; }
html:not(.bv-live) body:has(.bv-connecting) .content { pointer-events: none; cursor: progress; }
html:not(.bv-live) .bv-connecting { display: inline-flex; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2000; align-items: center; gap: 8px;
    background: #1b3a6b; color: #fff; border-radius: 999px; padding: 7px 16px; font-size: 13px; box-shadow: 0 4px 14px rgba(16,24,40,.25); }
.bv-connecting i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: bv-spin .8s linear infinite; }
.bv-connecting .c2 { display: none; }
html.bv-slow:not(.bv-live) .bv-connecting { background: #9a5b00; }
html.bv-slow .bv-connecting .c1 { display: none; }
html.bv-slow .bv-connecting .c2 { display: inline; }
@keyframes bv-spin { to { transform: rotate(360deg); } }

/* Trạng thái đồng bộ Bov cũ bên nút Save + send to FM (10/11) */
.fp-bov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; cursor: default; }
.fp-bov small { font-weight: 500; opacity: .8; }
.fp-bov.ok { background: #e8f6ee; color: #1f7a45; border: 1px solid #bfe3cc; }
.fp-bov.err { background: #fdecec; color: #c62828; border: 1px solid #f3c1c1; }
.fp-bov.skip, .fp-bov.none { background: #f1f3f7; color: #6b7280; border: 1px solid #e3e7ee; }
/* Công tắc Sync to old Bov (Service Flight) */
.sf-bov { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3b4256; border: 1px solid #e3e7ee; border-radius: 999px; padding: 3px 4px 3px 12px; background: #fff; }
.sf-bov .seg { display: inline-flex; background: #f1f3f7; border-radius: 999px; padding: 2px; }
.sf-bov .seg button { border: 0; background: none; border-radius: 999px; padding: 2px 12px; font-size: 12.5px; font-weight: 700; color: #6b7280; }
.sf-bov .seg button.on.yes { background: #1f9d55; color: #fff; }
.sf-bov .seg button.on.no { background: #6b7280; color: #fff; }

/* Nút 👁 xem mật khẩu (App.razor) */
input[data-bv-pw] { padding-right: 36px !important; }
.bv-eye { position: fixed; z-index: 3000; width: 28px; height: 26px; display: none; align-items: center; justify-content: center; border: 0; border-radius: 6px;
    background: transparent; color: #7a8296; cursor: pointer; padding: 0; }
.bv-eye:hover { background: #eef1f6; color: #1b3a6b; }
.bv-eye.on { color: #1b3a6b; }

/* ================= Phiếu chuyến bay – bớt màu như ngoài (10/11) =================
   Giữ khung nhóm / nhóm con và tiêu đề để phân nhóm; mọi màu nhóm (--gc / --sc / --tc) về navy / xám.
   Giữ màu có nghĩa: ô đã sửa (vàng), ô sai (đỏ), VIP, cảnh báo nối chuyến. */
.fp-head { background: #fff; border-bottom: 1px solid #e7eaf0; }
.fp-banner { background: var(--brand, #1b3a6b) !important; border-radius: 6px; }
.fp-route span { color: var(--brand, #1b3a6b); }
.fp-route b { color: #2b3348; }
.fp-path { border-top-color: #d5dbe5; }
.fp-path i, .fp-path small { color: #5b7fb5; }
.fp-sked { background: #f1f3f7; color: #3b4256; border: 1px solid #e3e7ee; }
.fp-sum .t-book, .fp-sum .t-board { color: #2b3348; }
.fp-scr-btn.vcr { background: #eef1f6; color: var(--brand, #1b3a6b); }
.fp-scr-btn.vip { background: #fff; color: #b42318; border: 1px solid #f3c1c1; }
.fp-crew { background: #fafbfc; }
.fp-body { background: #f5f6f9; }

/* Nhóm: khung trắng, vạch trái navy mảnh, tiêu đề navy */
.fp-group { --gc: #1b3a6b !important; border: 1px solid #e3e7ee; border-left: 3px solid var(--gc); border-radius: 8px; box-shadow: none; }
.fp-gtitle { color: #1b3a6b; letter-spacing: .6px; }
/* Nhóm con: nền xám rất nhạt, tiêu đề xám đậm */
.fp-sub { --sc: #5b6475 !important; background: #f7f8fb; border: 1px solid #e6e9ef; border-radius: 8px; }
.fp-sub-t { color: #5b6475; }
.fp-sub .fp-f .fp-l { color: #4a5268; }
.fp-sub .fp-f input, .fp-sub .fp-f select { border-color: #d9dee7; }
.fp-f .fp-l { color: #4a5268; }
.fp-i { color: #5b7fb5; }
.fp-loc { color: #9aa3b5; }

/* Tab: chữ xám, tab đang mở navy + gạch dưới */
.fp-tabs button { --tc: #1b3a6b !important; color: #5b6475; font-weight: 700; }
.fp-tabs button.on { color: #1b3a6b; border-bottom-color: #1b3a6b; background: #eef2f8; border-radius: 6px 6px 0 0; }
.fp-tabs em { background: #c2410c; }

/* Công tắc YES/NO bật = navy */
.fp-tog.on { background: var(--brand, #1b3a6b); border-color: var(--brand, #1b3a6b); }
.fp-tog:hover { box-shadow: 0 0 0 3px rgba(27,58,107,.12); }
.fp-rs-line select { background-color: #fff; }

/* Phiếu rộng hơn; dòng MCO chữ nhỏ, cột hẹp – vừa một hàng không cần kéo ngang (10/11) */
.fp { width: min(1560px, 98vw); }
.mco-table { font-size: 11.5px; }
.mco-table th { font-size: 10.5px; padding: 3px 4px; white-space: nowrap; }
.mco-table td { padding: 3px 4px; }
.mco-table .form-control-sm, .mco-table .form-select-sm { font-size: 12px; height: 28px; min-height: 28px; padding: 2px 6px; border-radius: 6px; }
.mco-table .form-select-sm { padding-right: 22px; background-position: right 4px center; }
.mco-table td:nth-child(2) { min-width: 170px; width: 19%; }
.mco-table td:nth-child(3), .mco-table td:nth-child(4) { width: 112px; min-width: 0; }
.mco-table td:nth-child(3) input, .mco-table td:nth-child(4) input { width: 108px; }
.mco-table td:nth-child(5), .mco-table td:nth-child(5) select { min-width: 165px; }
.mco-table .mco-cur { width: 64px; }
.mco-table .mco-num { width: 58px; }
.mco-table .mco-desc { min-width: 90px; width: 100%; }
.mco-table .mco-pc { width: 50px; }
.mco-files { min-width: 70px; }
.mco-file { font-size: 11px; }
.mco-del, .mco-attach { padding: 1px 6px; font-size: 12px; }

/* My account: cho phép trang rộng (FM account có bảng tài khoản cho Admin) (10/11) */
.acct-layout { grid-template-columns: 200px minmax(0, 1fr); }
.acct-body { max-width: 760px; } .acct-body:has(.fm-acc-grid) { max-width: 1180px; }
.acct-body .card-box { box-shadow: none; border: 1px solid #e7eaf0; }
.acct-body:has(.fm-acc-grid) table.grid { font-size: 12.5px; } .acct-body:has(.fm-acc-grid) table.grid td:first-child { white-space: nowrap; } .acct-body:has(.fm-acc-grid) table.grid td:last-child { min-width: 220px; white-space: normal; }