/* ------------------------------------------------------------------
   Bảng thông tin bay (FIDS) - Tân Sơn Nhất / Nội Bài / Đà Nẵng
   Bảng được nhúng iframe vào clickgo.com.vn (nền trắng) nên dùng nền
   sáng, lấy đúng tông của trang chủ: cam #f57c00, chữ #1f2937,
   viền #e5e7eb, font Inter. Cam là màu chủ đạo của bảng.
   Nạp sau các file css cũ trong _MasterLayout_Flight.cshtml nên phần
   nav dùng lại đúng class cũ để trang Sơ đồ và Xe buýt cũng đổi theo.
   ------------------------------------------------------------------ */

:root {
    /* Trắng để hoà vào trang nhúng iframe; khung bảng đã có viền nên vẫn tách bạch */
    --fb-bg: #ffffff;
    --fb-card: #ffffff;
    --fb-subtle: #f9fafb;
    --fb-row-alt: #fcfcfd;
    --fb-border: #e5e7eb;
    --fb-border-soft: #f1f3f5;

    /* Cam thương hiệu lấy từ v2.clickgo.com.vn */
    --fb-orange: #f57c00;
    --fb-orange-dark: #d96a00;
    --fb-orange-deep: #b35700;
    --fb-orange-fill: #fff4e6;
    --fb-orange-line: #ffd9ab;

    --fb-text: #1f2937;
    --fb-heading: #111827;
    --fb-muted: #6b7280;
    --fb-faint: #9ca3af;

    --fb-green: #15803d;
    --fb-green-fill: #e9f7ee;
    --fb-red: #dc2626;
    --fb-red-fill: #fdeced;

    --fb-radius: 14px;
    --fb-font: Inter, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body.fboard-page {
    background: var(--fb-bg);
    color: var(--fb-text);
    font-family: var(--fb-font);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Thanh chọn sân bay (dùng chung với trang Sơ đồ / Xe buýt) ---------- */
/* Chọn theo a.nav-header-link để thắng selector cùng dạng trong ArrivalBeltLandscape.css */

.nav-header {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px 12px 0;
    background: transparent;
    white-space: nowrap;
    overflow-x: auto;
}

a.nav-header-link {
    flex: 1 1 0;
    min-width: 130px;
    padding: 0;
    margin-left: 0;
    border-radius: var(--fb-radius) var(--fb-radius) 0 0;
    background: var(--fb-card);
    border: 1px solid var(--fb-border);
    border-bottom: none;
    color: var(--fb-muted);
    font-family: var(--fb-font);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.nav-header .nav-header-text {
    padding: 13px 10px;
    color: inherit;
}

a.nav-header-link:hover {
    background: var(--fb-orange-fill);
    color: var(--fb-orange-deep);
}

/* _Scripts.cshtml gắn class nav-header-active cho sân bay đang xem */
a.nav-header-link.nav-header-active,
a.nav-header-link.active {
    background-color: var(--fb-orange) !important;
    border-color: var(--fb-orange);
    color: #fff;
}

/* ---------- Thanh điều hướng phụ ---------- */

.nav-bot {
    display: flex;
    gap: 4px;
    /* CSS cũ đặt width:100%, cộng với margin hai bên sẽ tràn ngang 24px */
    width: auto;
    height: auto;
    margin: 0 12px;
    padding: 5px;
    background: var(--fb-card) !important;
    border: 1px solid var(--fb-border);
    border-radius: 0 0 var(--fb-radius) var(--fb-radius);
    box-shadow: none;
    overflow-x: auto;
}

.nav-bot .nav-link {
    flex: 1 1 0;
    flex-direction: row;
    gap: 8px;
    min-width: 110px;
    padding: 10px 12px;
    border: none !important;
    border-radius: 9px;
    background: transparent !important;
    color: var(--fb-muted) !important;
    font-family: var(--fb-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease;
}

.nav-bot .nav-link:hover {
    background: var(--fb-subtle) !important;
    color: var(--fb-text) !important;
}

.nav-bot .nav-link.link-active {
    background: var(--fb-orange-fill) !important;
    box-shadow: inset 0 0 0 1px var(--fb-orange-line);
    color: var(--fb-orange-deep) !important;
}

.nav-bot .nav-icon {
    font-size: 18px;
}

/* Trên trang Sơ đồ / Xe buýt cho khối nav chạy hết chiều ngang cho liền mạch */
body:not(.fboard-page) .nav-bot {
    margin: 0;
    padding: 5px 12px 10px;
    border: none;
    border-radius: 0;
}

/* ---------- Khung bảng ---------- */

.fboard {
    margin: 14px 12px 0;
    background: var(--fb-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .05);
    overflow: hidden;
}

.fboard-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--fb-card);
    border-bottom: 1px solid var(--fb-border);
}

.fboard-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fb-heading);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.fboard-title .material-icons {
    color: var(--fb-orange);
    font-size: 26px;
}

.fboard-date {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--fb-orange-fill);
    border: 1px solid var(--fb-orange-line);
    color: var(--fb-orange-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.fboard-spacer {
    flex: 1 1 auto;
}

/* Nút chuyển nhà ga T1 / T2 */

.fboard-terminals {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--fb-subtle);
    border: 1px solid var(--fb-border);
}

.fboard-terminal {
    padding: 6px 16px;
    border-radius: 999px;
    color: var(--fb-muted) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.fboard-terminal:hover {
    color: var(--fb-orange-deep) !important;
}

.fboard-terminal.is-active {
    background: var(--fb-orange);
    color: #fff !important;
}

/* Đồng hồ và điều khiển trang */

.fboard-clock {
    color: var(--fb-orange);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .03em;
}

.fboard-pager {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--fb-border);
    border-radius: 999px;
    background: var(--fb-card);
    color: var(--fb-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fboard-btn:hover {
    background: var(--fb-orange-fill);
    border-color: var(--fb-orange-line);
    color: var(--fb-orange-deep);
}

.fboard-btn .material-icons {
    font-size: 18px;
}

.fboard-btn.is-paused {
    background: var(--fb-orange-fill);
    border-color: var(--fb-orange);
    color: var(--fb-orange-deep);
}

.fboard-pagenum {
    min-width: 52px;
    color: var(--fb-muted);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

/* Vạch tiến trình đếm tới lần lật trang kế tiếp */

.fboard-progress {
    height: 3px;
    background: var(--fb-border-soft);
}

.fboard-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #ffb454, var(--fb-orange));
}

.fboard-progress.is-running span {
    animation: fboard-fill linear forwards;
}

@keyframes fboard-fill {
    from { width: 0; }
    to { width: 100%; }
}

/* ---------- Bảng dữ liệu ---------- */

.fboard-scroll {
    overflow-x: auto;
}

/* table-layout: fixed để cột không nhảy khi lật trang; bề rộng đặt theo phần trăm nên
   bảng co giãn đều từ màn hình laptop tới màn hình treo tường. */
.fboard-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Dải tiêu đề cam đặc, cùng tông với nút chính của trang chủ */
.fboard-table th {
    padding: 12px 14px;
    background: var(--fb-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Không đặt color ở đây: selector .fboard-table td có specificity cao hơn
   các rule .fb-col-* bên dưới và sẽ nuốt mất màu riêng của từng cột.
   Màu chữ mặc định đã kế thừa từ body.fboard-page. */
.fboard-table td {
    padding: 0 14px;
    height: 52px;
    border-bottom: 1px solid var(--fb-border-soft);
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fboard-table tbody tr:nth-child(even) { background: var(--fb-row-alt); }

.fboard-table tbody tr.is-live td {
    animation: fboard-in .35s ease both;
}

@keyframes fboard-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Cột giờ - cam, nổi nhất bảng */

.fb-col-scheduled,
.fb-col-estimated {
    width: 10%;
    color: var(--fb-orange-deep);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .02em;
}

.fb-col-estimated { color: var(--fb-orange); }

/* Không đổi giờ thì lặp lại giờ kế hoạch ở dạng chìm, để mắt bắt ngay hàng bị đổi giờ */
.fb-col-estimated.is-ontime {
    color: var(--fb-muted);
    font-weight: 600;
}

/* Giờ kế hoạch bị gạch ngang khi chuyến đổi giờ */
.fb-col-scheduled.is-changed {
    color: var(--fb-faint);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.fb-col-airport {
    width: 28%;
    color: var(--fb-heading);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.fb-col-flightNo {
    width: 15%;
    color: var(--fb-heading);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .04em;
}

.fb-codeshare {
    display: block;
    color: var(--fb-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

.fb-col-gate,
.fb-col-belt,
.fb-col-checkinRow {
    width: 10%;
}

.fb-tag {
    display: inline-block;
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--fb-orange-fill);
    border: 1px solid var(--fb-orange-line);
    color: var(--fb-orange-deep);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

/* Cột ghi chú */

.fb-col-remark { width: 24%; }

/* Ghi chú của Phú Quốc dài hơn hẳn ("HÀNH KHÁCH ĐANG LÊN TÀU BAY") nên
   giới hạn bề rộng và cắt bằng ba chấm thay vì để tràn ra khỏi cột. */
.fb-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: var(--fb-subtle);
    border: 1px solid var(--fb-border);
    color: var(--fb-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-status::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Sắp tới giờ / đúng giờ - cam đậm nhất trong nhóm */
.fb-status.is-soon {
    background: var(--fb-orange-fill);
    border-color: var(--fb-orange-line);
    color: var(--fb-orange-deep);
}

/* Mở quầy thủ tục - cùng tông cam nhưng nhạt hơn */
.fb-status.is-checkin {
    background: var(--fb-card);
    border-color: var(--fb-orange-line);
    color: #b98246;
}

.fb-status.is-boarding {
    background: var(--fb-green-fill);
    border-color: #b7e4c7;
    color: var(--fb-green);
}

.fb-status.is-boarding::before {
    animation: fboard-pulse 1.4s ease-in-out infinite;
}

@keyframes fboard-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(.7); }
}

.fb-status.is-delayed {
    background: #fff1e0;
    border-color: #ffc98a;
    color: #b35700;
}

.fb-status.is-cancelled {
    background: var(--fb-red-fill);
    border-color: #f7c2c4;
    color: var(--fb-red);
}

.fb-status.is-done {
    background: var(--fb-subtle);
    border-color: var(--fb-border);
    color: var(--fb-faint);
}

/* Dòng chuyến bị hủy làm mờ cả hàng */
.fboard-table tbody tr.row-cancelled td:not(.fb-col-remark) {
    opacity: .45;
}

/* ---------- Trạng thái rỗng / lỗi ---------- */

.fboard-empty {
    padding: 48px 20px;
    color: var(--fb-muted);
    font-size: 15px;
    text-align: center;
}

.fboard-alert {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--fb-orange-fill);
    border-top: 1px solid var(--fb-orange-line);
    color: var(--fb-orange-deep);
    font-size: 14px;
    font-weight: 600;
}

.fboard-alert.is-visible { display: flex; }

.fboard-alert .material-icons { font-size: 20px; }

/* ---------- Chân trang ---------- */

.fboard-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 11px 18px;
    background: var(--fb-subtle);
    border-top: 1px solid var(--fb-border);
    color: var(--fb-muted);
    font-size: 12.5px;
}

.fboard-foot .fb-updated {
    color: var(--fb-orange-deep);
    font-variant-numeric: tabular-nums;
}

/* ---------- Sơ đồ giao thông và tuyến xe buýt ---------- */

/* Nội dung do CMS soạn, có sẵn màu và cỡ chữ riêng. Ở đây chỉ lo phần khung,
   khoảng cách và cho ảnh co giãn, không ép màu để giữ đúng ý người soạn. */

/* Tab là <button> nên phải bỏ kiểu mặc định của trình duyệt.
   Chỉ đặt nền cho tab chưa chọn, tránh đè mất nền cam của .is-active. */
.finfo-tabs .fboard-terminal {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.finfo-tabs .fboard-terminal:not(.is-active) {
    background: transparent;
}

.finfo-body {
    padding: 20px 22px 26px;
}

.finfo-panel { display: none; }
.finfo-panel.is-active { display: block; animation: fboard-in .3s ease both; }

/* Ảnh sơ đồ gốc rộng tới 1000px và gắn cứng width/height inline */
.finfo-panel img {
    display: block;
    max-width: 100%;
    height: auto !important;
    width: auto !important;
    margin: 14px auto;
    border: 1px solid var(--fb-border);
    border-radius: 10px;
    background: var(--fb-subtle);
}

.finfo-panel p,
.finfo-panel li {
    margin: 0 0 10px;
    line-height: 1.65;
}

/* Giới hạn độ dài dòng cho dễ đọc, nhưng chừa các đoạn chỉ chứa ảnh sơ đồ.
   Trình duyệt không hỗ trợ :has() thì giữ nguyên như cũ, không vỡ gì. */
.finfo-panel p:not(:has(img)),
.finfo-panel ul,
.finfo-panel ol {
    max-width: 95ch;
}

.finfo-panel p:empty { display: none; }

.finfo-panel a {
    color: var(--fb-orange-dark);
    text-decoration: underline;
}

.finfo-panel table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
}

.finfo-panel table td,
.finfo-panel table th {
    padding: 8px 10px;
    border: 1px solid var(--fb-border);
}

/* ---------- Màn hình hẹp ---------- */

@media (max-width: 1100px) {
    .fboard-table th,
    .fboard-table td { padding: 0 10px; }
    .fboard-table th { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 900px) {
    .fboard { margin: 10px 8px 0; }
    .nav-header, .nav-bot { margin-inline: 8px; }
    .fboard-bar { padding: 12px; gap: 10px; }
    .fboard-title { font-size: 16px; }
    .fboard-clock { font-size: 18px; }
    .fboard-table { min-width: 620px; }
    .fboard-table td { height: 46px; font-size: 15px; }
    .fb-col-scheduled, .fb-col-estimated { font-size: 16px; }
    .nav-bot .nav-link .bt { display: none; }
    /* Cột phụ nhường chỗ cho giờ, nơi đến và trạng thái */
    .fb-col-checkinRow, th.fb-col-checkinRow,
    .fb-col-estimated, th.fb-col-estimated { display: none; }
    .fb-status { padding: 4px 10px 4px 8px; font-size: 12px; }
    .finfo-body { padding: 14px; }
}