/* Kiểu riêng của app canh vé. Bộ biến + thành phần chung nằm ở style.css (bám
   x.giauco.vn) — file này CHỈ thêm cái style.css chưa có, không định nghĩa lại màu.
   Không viết mã màu thẳng: mọi màu đi qua biến var(--...). */

/* [hidden] phải !important: các lớp dưới đặt display:grid/flex sẽ thắng nó
   (bẫy đã trả giá bên 10KVideo). */
[hidden] { display: none !important; }

/* ---------- Cổng đăng nhập ---------- */
.cong {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 24px; background: var(--surface-2);
}
.cong-hop {
  width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--sh-2);
}
.cong-hop h1 { font-size: calc(19px * var(--phong-chu)); margin: 0; }

/* ---------- Khung ---------- */
/* style.css đặt .app là flex HÀNG NGANG cho khung có thanh ray trái. App này không
   có ray, nên thanh đầu và phần thân phải xếp DỌC — không đổi thì hai khối nằm
   cạnh nhau và nội dung dồn hết sang phải. */
.app { flex-direction: column; }
.than { padding: 18px; max-width: 940px; margin: 0 auto; width: 100%; }
.man { display: flex; flex-direction: column; gap: 14px; }
.man > .row { align-items: center; gap: 10px; }
.man h2 { font-size: calc(16px * var(--phong-chu)); margin: 0; }
.loi {
  color: var(--danger); background: var(--danger-soft);
  border-radius: var(--r-sm); padding: 8px 11px; margin: 0;
  font-size: calc(13px * var(--phong-chu));
}
.sm { font-size: calc(12.5px * var(--phong-chu)); }
.o { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.doi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Ô hạn mức trên thanh đầu */
.ns {
  font-size: calc(12.5px * var(--phong-chu)); color: var(--txt-2);
  padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface-2);
  white-space: nowrap;
}
.ns.can { background: var(--warn-soft); color: var(--warn); font-weight: 650; }

/* ---------- Thẻ tuyến ---------- */
.ds { display: flex; flex-direction: column; gap: 10px; }
.the {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 9px;
}
.the.tat { opacity: .6; }
.the .dau { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.the .chang { font-weight: 700; font-size: calc(15px * var(--phong-chu)); }
.the .ngay { color: var(--txt-2); font-size: calc(13px * var(--phong-chu)); }
.the .so { display: flex; gap: 18px; flex-wrap: wrap; }
.the .so > div { display: flex; flex-direction: column; gap: 1px; }
.the .k {
  font-size: calc(11px * var(--phong-chu)); color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .03em;
}
.the .v { font-weight: 700; font-size: calc(15px * var(--phong-chu)); }
.the .v.re { color: var(--ok); }
.the .v.cho { color: var(--txt-3); font-weight: 500; }
.the .cuoi { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Bảng top chuyến rẻ nhất — cho biết con số kia là chuyến nào, mấy giờ */
.top {
  border-radius: var(--r-sm); background: var(--surface-2);
  padding: 7px 10px; font-size: calc(13px * var(--phong-chu));
}
.top > summary {
  cursor: pointer; display: flex; gap: 8px; align-items: baseline;
  list-style: none; user-select: none;
}
.top > summary::-webkit-details-marker { display: none; }
.top > summary::before {
  content: "▸"; color: var(--txt-3); transition: transform .13s;
  display: inline-block; font-size: 11px;
}
.top[open] > summary::before { transform: rotate(90deg); }
.top table { margin-top: 3px; }
.top td { padding: 3px 8px 3px 0; border-bottom: none; }
.top td:first-child { padding-left: 15px; }
.top td.hieu { color: var(--txt-2); font-family: var(--mono); font-size: .92em; }
.top tr.re1 td { font-weight: 700; }
.top tr.re1 td.tien { color: var(--ok); }

/* Một nhóm = một hãng.
   overflow-x nằm ở ĐÂY chứ không để trang tự tràn: bảng 5 cột nowrap không vừa màn
   điện thoại, mà trang cuộn ngang thì hỏng cả bố cục. Cho riêng bảng trượt trong ô
   của nó là cùng lắm phải vuốt ngang một chút, còn trang vẫn đứng yên. */
.top .nh {
  margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--line);
  overflow-x: auto; max-width: 100%;
}
.top .nh:first-of-type { border-top: none; }
.top .nh > .tt { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ---------- Nút chọn nhanh khung giờ ---------- */
.khung { display: flex; flex-wrap: wrap; gap: 6px; }
.khung button.chon {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-2); font-weight: 700;
}
/* Hãng đã thấy bay đúng chặng đang chọn — nổi hơn hãng của chặng khác */
.chips label.chang { border-color: var(--accent-line); }

/* Nhãn nhỏ. KHÔNG đặt tên lớp là .main — trùng .main của khung app,
   flex-direction:column làm nội dung rơi xuống dòng (bẫy đã trả giá). */
.nhan {
  font-size: calc(11.5px * var(--phong-chu)); padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--txt-2);
}
.nhan.bat { background: var(--accent-soft); color: var(--accent-2); font-weight: 650; }
.nhan.canh { background: var(--warn-soft); color: var(--warn); }
.nhan.hong { background: var(--danger-soft); color: var(--danger); }

/* ---------- Ô tick hãng ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 5px 11px; cursor: pointer; user-select: none;
  transition: background .13s, border-color .13s;
}
.chips label:hover { background: var(--surface-2); }
.chips label:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent-line); font-weight: 650;
}

/* Đuôi key phải giữ nguyên chữ thường để đối chiếu được với bảng SerpApi —
   .stats .k mặc định viết hoa hết. */
#cd-keys .k { text-transform: none; font-family: var(--mono); }

/* ---------- Chuông cảnh báo ---------- */
.chuong { position: relative; }
.chuong .dem {
  position: absolute; top: 0; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}

/* ---------- Thẻ cảnh báo ---------- */
.tb {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r); padding: 11px 13px;
  display: flex; flex-direction: column; gap: 5px;
}
.tb.chua { border-left-color: var(--accent); background: var(--accent-soft); }
.tb.canh { border-left-color: var(--warn); }
.tb .dau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tb .td { font-weight: 700; font-size: calc(14px * var(--phong-chu)); }
.tb .luc { color: var(--txt-3); font-size: calc(12px * var(--phong-chu)); margin-left: auto; }
.tb .nd { color: var(--txt-2); font-size: calc(13px * var(--phong-chu)); }
.tb .cuoi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.tb a.mo {
  color: var(--accent-2); font-weight: 650; text-decoration: none;
  font-size: calc(13px * var(--phong-chu));
}
.tb a.mo:hover { text-decoration: underline; }

/* ---------- Biểu đồ ---------- */
.bd { width: 100%; height: auto; display: block; overflow: visible; }
.bd .duong { fill: none; stroke: var(--accent); stroke-width: 2; }
.bd .neo { stroke: var(--txt-3); stroke-width: 1; stroke-dasharray: 4 3; }
.bd .cham { fill: var(--accent); }
.bd .luoi { stroke: var(--line); stroke-width: 1; }
.bd text { fill: var(--txt-3); font-size: 10px; }

/* ---------- Bảng ---------- */
.bang-cuon { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: calc(13px * var(--phong-chu)); }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--txt-3); font-size: calc(11px * var(--phong-chu)); text-transform: uppercase; letter-spacing: .03em; }
td.tien { font-weight: 650; }
tr.day td.tien { color: var(--ok); }

/* ---------- Màn hẹp ---------- */
@media (max-width: 560px) {
  .than { padding: 12px; }
  .doi { grid-template-columns: 1fr; }
  .the .so { gap: 14px; }
  .man > .row { flex-wrap: wrap; }

  /* Thanh đầu phải co lại: tên app + ô hạn mức + 2 nút không đủ chỗ trên 375px,
     tràn ra là cả trang cuộn ngang. Tên app cho phép cắt bớt, ô hạn mức co theo
     chỗ còn thừa, hai nút giữ nguyên kích thước bấm được. */
  .topbar { padding: 0 10px; gap: 7px; }
  .topbar > strong {
    overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
    font-size: calc(14px * var(--phong-chu));
  }
  .ns {
    font-size: calc(11px * var(--phong-chu)); padding: 3px 7px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
  }
  .topbar button { flex: 0 0 auto; }

  /* Bảng chuyến bay co lại cho vừa 375px, đỡ phải vuốt ngang */
  .top { padding: 6px 7px; font-size: calc(12px * var(--phong-chu)); }
  .top td { padding: 3px 6px 3px 0; }
  .top td:first-child { padding-left: 0; }
  .top td.hieu { font-size: .85em; }
  .top .nhan { font-size: calc(10px * var(--phong-chu)); padding: 1px 5px; }
}