.tk-form .row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.tk-form label { display:block; font-weight:600; margin-bottom:4px; }
.presets .btn { padding:6px 10px; border:1px solid #ddd; border-radius:6px; text-decoration:none; }
.presets .btn.active { background:#0b74de; color:#fff; border-color:#0b74de; }
.modes { display:flex; gap:16px; align-items:center; margin:10px 0; }
.card { background:#fff; border:1px solid #eee; border-radius:10px; padding:16px; margin-bottom:16px; }

.db-grid {width:100%; border-collapse:separate; border-spacing:6px; table-layout: fixed; }
.db-grid th, .db-grid td { background:#f9fafb; border:1px solid #eee; border-radius:8px; padding:8px; vertical-align:top; }
.db-grid .date { font-size:.8rem; color:#666; margin-bottom:6px; }
.db-grid .val { font-size:1.1rem; letter-spacing:1px; }
.db-grid .val b { color:#e60023; font-weight:800; }
.db-grid .val.strong { font-weight:800; font-size:1.3rem; }
.db-grid .val.mute { color:#bbb; }
.db-grid td.dim { opacity:.45; }
/* Ô hiển thị đơn (2 số cuối / đầu / đuôi) */
.db-grid .val--solo{
  font-weight: 800;
  font-size: 1.6rem;     /* bạn có thể giảm còn 1.4 nếu muốn */
  line-height: 1;
  text-align: center;    /* canh giữa */
  color: #e60023;        /* đỏ */
}
/* Wrapper cho scroll ngang */
/* Mặc định (desktop/tablet): KHÔNG scroll, bảng co theo container */
.db-grid-wrap{
  width:100%;
  overflow-x: visible;      /* quan trọng */
  position: relative;
}
.db-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:6px;       /* khoảng cách giữa ô */
  table-layout: fixed;      /* 7 cột đều nhau */
  min-width: auto;          /* không ép rộng trên desktop */
}

/* Chỉ mobile mới bật scroll ngang + min-width để kích hoạt scroll */
@media (max-width: 768px){
  .db-grid-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .db-grid{
    min-width: 980px;       /* tuỳ chỉnh 900–1100 */
  }
  /* (tuỳ chọn) sticky header vẫn hoạt động trong vùng scroll */
  .db-grid thead th{ position: sticky; top: 0; z-index: 2; }
}

/* (tuỳ chọn) hiệu ứng mờ viền chỉ khi mobile có scroll */
.db-grid-wrap::before,
.db-grid-wrap::after{ content:none; }
@media (max-width: 768px){
  .db-grid-wrap::before,
  .db-grid-wrap::after{
    content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none;
  }
  .db-grid-wrap::before{ left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
  .db-grid-wrap::after { right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
}


/* (đang có sẵn) nhánh full – 2 số cuối in đậm đỏ */
.db-grid .val b{ color:#e60023; font-weight:800; }
/* Layout form */
.tk-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap:12px;
}
@media (max-width: 1024px){
  .tk-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
.tk-field{ display:flex; flex-direction:column; gap:6px; }
.tk-label{ font-weight:650; color:#334155; }
.tk-input{ position:relative; }
.tk-input select,
.tk-input input{
  width:100%;
  height:40px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 12px;
  background:#fff;
  outline:none;
  transition:.15s border-color ease;
  font-size:14px;
}
.tk-input select:focus,
.tk-input input:focus{ border-color:#0b74de; box-shadow:0 0 0 3px rgba(11,116,222,.12); }

.tk-date input{ padding-right:38px; }
.icon-calendar{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; font-size:18px; opacity:.7;
}

.tk-actions{ align-self:end; }
.btn.primary{
  background:#0b74de; color:#fff; border:1px solid #0b74de;
  padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer;
}
.btn.primary:hover{ filter:brightness(1.05); }

/* Presets + modes giữ như trước nhưng tinh chỉnh khoảng cách */
.presets{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.modes{ display:flex; gap:18px; align-items:center; margin:10px 0 0; }
.tk-hint{ color:#8b8b8b; margin-top:4px; }

/* Choices.js tweak cho hợp style */
.choices__inner{
  min-height:40px; padding:6px 10px; border-radius:10px; border-color:#e5e7eb;
}
.choices.is-focused .choices__inner{ border-color:#0b74de; box-shadow:0 0 0 3px rgba(11,116,222,.12); }
.choices__list--dropdown{ border-color:#e5e7eb; border-radius:10px; }
.choices__item--selectable.is-highlighted{ background:#f1f5f9; color:#111827; }


/* Khối thống kê */
.tk-stats h3{ font-size:1.05rem; margin:0 0 8px; }
.tk-stats .hl{ color:#0b74de; font-weight:800; }
.tk-stats .hl.danger{ color:#e11d48; }

/* Bảng đẹp, gọn */
.tk-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:10px;
}
.tk-table thead th{
  background:#f1f5f9;
  text-align:left;
  padding:10px;
  font-weight:700;
  border-bottom:1px solid #e5e7eb;
}
.tk-table td{
  padding:10px;
  border-bottom:1px solid #f1f5f9;
}
.tk-table tr:last-child td{ border-bottom:none; }
.tk-table .pair{ color:#e60023; font-weight:800; letter-spacing:1px; }

/* Nhấn nhãn cột */
.phead{ color:#0b74de; font-weight:700; }
.ptail{ color:#06b6d4; font-weight:700; }
.psum { color:#16a34a; font-weight:700; }

/* Mobile: cho phép bảng cuộn ngang nếu chật */
@media (max-width: 768px){
  .tk-stats{ overflow-x:auto; }
  .tk-table{ min-width:560px; }
}




 .toolbar { margin: 10px 0 16px; display:flex; align-items:center; gap:8px; }
  .note { margin: 6px 0 16px; }
  .tabs { display:flex; gap:8px; margin: 10px 0 12px; }
  .tab-btn { padding:8px 12px; border:1px solid #ddd; background:#fff; cursor:pointer; border-radius:8px; }
  .tab-btn.active { background:#111; color:#fff; }
  .tab-pane { margin-top:8px; }
  .xs_table { width:100%; border-collapse:collapse; }
  .xs_table th, .xs_table td { border:1px solid #e5e7eb; padding:8px; }
  .center { text-align:center; }
  .num { font-weight:700; letter-spacing:1px; }
  .num.red { color:#d00; }
  .colgroup { width: 33.333%; }
  @media (max-width: 900px){
    .colgroup { width: 100%; display:block; }
    .xs_table { display:block; }
  }
  
  
  filters { margin: 10px 0 14px; }
  .filter-row { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; margin:10px 0; }
  .filter-label { font-weight:600; min-width:80px; margin-top:6px; }
  .chips { display:flex; gap:8px; flex-wrap:wrap; }
  .chip { padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; text-decoration:none; color:#111; }
  .chip:hover { border-color:#cbd5e1; }
  .chip.active { background:#111; color:#fff; border-color:#111; }

  .province-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; width:100%; }
  .group { border:1px solid #f1f5f9; padding:10px; border-radius:12px; background:#fafafa; }
  .group-title { font-weight:700; margin-bottom:8px; }

  .tabs { display:flex; gap:8px; margin: 14px 0 10px; }
  .tab-btn { padding:8px 12px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; border-radius:8px; }
  .tab-btn.active { background:#111; color:#fff; }
  .tab-pane { margin-top:8px; }

  .xs_table { width:100%; border-collapse:collapse; }
  .xs_table th, .xs_table td { border:1px solid #e5e7eb; padding:8px; }
  .center { text-align:center; }
  .num { font-weight:700; letter-spacing:1px; }
  .num.red { color:#d00; }

  @media (max-width: 1000px){
    .province-grid { grid-template-columns: 1fr; }
  }
  
  
  .tk-table td:nth-child(3),
.tk-table th:nth-child(3){ text-align:right; }
.tk-stats .danger{ color:#dc2626; }

.tk-table tr:nth-child(even){ background:#fafafa; }
.tk-table td, .tk-table th{ border-bottom:1px solid #f1f5f9; }
.tk-table tr:last-child td{ border-bottom:none; }

@media (max-width:768px){
  .tk-table{ font-size:0.9rem; }
}

/* Chia ô: trái là bộ số, phải là số ngày với vạch dọc */
/* Khung bảng + kẻ ô đều nhau */
.tk-toppairs{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;   /* khung ngoài */
  border-radius: 10px;
  overflow: hidden;
  background:#fff;
}

.tk-toppairs td{
  width:20%;
  padding:10px 12px;
  vertical-align:middle;
  border-right:1px solid #f1f5f9;  /* vạch dọc giữa các ô */
  border-bottom:1px solid #f1f5f9; /* vạch ngang giữa các ô */
}

/* bỏ vạch cuối hàng/cuối cột để không bị đúp đường viền */
.tk-toppairs tr:last-child td{ border-bottom:none; }
.tk-toppairs td:last-child{ border-right:none; }

/* Nội dung trong ô: căng full trái–phải */
.pairbox{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:42px;               /* chiều cao đều */
}

.pair-strong{ font-weight:800; color:#111827; letter-spacing:.5px; }
.pair-days{
  color:#dc2626;                 /* số ngày màu đỏ */
  font-weight:700;
  padding-left:12px;
  border-left:1px solid #e5e7eb; /* vạch chia trong ô */
  text-align:right;
  white-space:nowrap;
}

/* Mobile: cho phép cuộn ngang nếu chật */
@media (max-width:768px){
  .tk-toppairs{ min-width:560px; }
}

.tk-toppairs td:hover{ background:#fafafa; }


/* Headline màu theo chủ đề đã dùng trước */
.psum{ color:#16a34a; font-weight:800; }

/* Style riêng cho bảng Tổng lâu chưa về */
.tk-table-sum { border-radius:10px; overflow:hidden; }
.tk-table-sum thead th { background:#eef2f7; }

/* Cột “Tổng” đỏ, đậm */
.tk-table-sum .col-sum{
  color:#dc2626;
  font-weight:800;
  width:80px;
}

/* Cột “Số ngày gan” căn phải */
.tk-table-sum .col-days{
  text-align:right;
  width:120px;
}

/* Vạch dọc giữa cột ngày và cột số ngày */
.tk-table-sum td.col-date,
.tk-table-sum th:nth-child(2){
  border-right:1px solid #e5e7eb;
}

/* Mobile: cho phép cuộn ngang nếu chật */
@media (max-width:768px){
  .tk-table-sum{ min-width:520px; }
}




/* ========== FORM: THỐNG KÊ ĐẶC BIỆT ========== */

/* Lưới input chính */
.tk-form .tk-grid{
  display:grid;
  grid-template-columns: 1fr 1fr; /* mặc định 2 cột */
  gap:12px;
}

/* Mỗi field */
.tk-field{}
.tk-label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
}

/* Input wrapper (dùng cho date + select) */
.tk-input{
  position:relative;
}

/* Input date (flatpickr) luôn full width */
.tk-input input[type="text"].datepicker,
.tk-input input[type="date"]{
  width:100%;
  min-height:40px;
  padding:8px 36px 8px 10px; /* chừa chỗ icon ở bên phải */
  box-sizing:border-box;
  border:1px solid #e5e7eb;
  border-radius:10px;
}

/* Icon lịch đặt trong input */
.tk-input .icon-calendar{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:16px;
  opacity:.7;
}

/* Choices.js – ép full width & bo tròn cho hợp style */
.choices{ width:100%; }
.choices__inner,
.tk-choices-inner{
  min-height:40px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:6px 10px !important;
  box-shadow:none;
}

/* Hàng nút submit */
.tk-actions{ grid-column:1 / -1; }
.tk-actions .btn{
  width:100%;
  min-height:42px;
}

/* Presets (10, 30, 60, …) */
.presets{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap:8px;
  margin-top:12px;
}
.presets .btn{
  display:inline-flex;
  align-items:center; justify-content:center;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
}
.presets .btn.active{
  border-color:#ef4444;
  background:#fff5f5;
  color:#ef4444;
  font-weight:600;
}

/* Modes (radio: Đầy đủ / 2 số cuối / Đầu / Đuôi) */
.modes{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:8px;
}
.modes label{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1.1;
  user-select:none;
}
.modes input[type="radio"]{
  width:16px; height:16px; flex:0 0 16px;
}

/* ========== BẢNG LỊCH (db-grid) ========== */

.db-grid-wrap{ overflow-x:auto; }
.db-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed; /* tránh vỡ cột trên mobile */
}
.db-grid th, .db-grid td{
  text-align:center;
  padding:8px 6px;
  border:1px solid #f0f0f0;
}
.db-grid td .date{
  font-size:12px;
  opacity:.75;
  margin-bottom:4px;
}
.db-grid .val{
  font-size:16px;
  font-weight:600;
}
.db-grid .val b{ color:#ef4444; }       /* 2 số cuối tô đỏ */
.db-grid .val.mute{ opacity:.35; }
.db-grid .val--solo{ font-size:18px; }
.db-grid td.dim{ background:#fafafa; }

/* ========== CÁC BẢNG THỐNG KÊ CHI TIẾT ========== */

.tk-stats .tk-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;           /* giữ cột đều nhau */
}
.tk-stats .tk-table th,
.tk-stats .tk-table td{
  padding:8px 10px;
  border:1px solid #f0f0f0;
  text-align:center;
  word-break:break-word;
}
.tk-stats .pair{ font-weight:700; letter-spacing:0.5px; }

.hl{ color:#16a34a; font-weight:700; }
.danger, .ptail, .col-days{ color:#ef4444; font-weight:700; }
.phead{ color:#0ea5e9; font-weight:700; }
.psum{ color:#a855f7; font-weight:700; }

/* Bảng 2 hàng topPairs (lâu chưa về) – kẻ ô đều nhau */
.tk-toppairs{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.tk-toppairs td{
  border:1px solid #f0f0f0;
  padding:8px 6px;
}
.pairbox{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.pair-strong{ font-weight:800; font-size:18px; letter-spacing:0.5px; }
.pair-days{ color:#ef4444; font-weight:700; font-size:14px; }

/* ========== RESPONSIVE ========== */

/* ≤ 480px: form 1 cột, radio 2 cột */
@media (max-width: 480px){
  .tk-form .tk-grid{ grid-template-columns:1fr; gap:10px; }
  .tk-actions .btn{ width:100%; }
  .modes{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .presets{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ≤ 360px: nén padding & chữ nhỏ lại chút */
@media (max-width: 360px){
  .modes label{ padding:6px 4px; font-size:13px; }
  .presets .btn{ padding:6px 8px; font-size:13px; }
  .tk-input input[type="text"].datepicker{ min-height:38px; }
  .pair-strong{ font-size:16px; }
  .pair-days{ font-size:13px; }
}
/* Layout mặc định (mobile): xếp dọc từng ô */
.tk-form .tk-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "province"
    "from"
    "to"
    "actions";
}

/* Gán area cho từng field */
.tk-field--province { grid-area: province; }
.tk-field--from     { grid-area: from; }
.tk-field--to       { grid-area: to; }
.tk-actions         { grid-area: actions; }

/* Màn hình RỘNG: hàng 1 = Tỉnh/TP, hàng 2 = Từ ngày + Đến ngày, hàng 3 = nút */
@media (min-width: 900px){
  .tk-form .tk-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "province province"  /* hàng 1 full chiều ngang */
      "from     to"        /* hàng 2: 2 cột */
      "actions  actions";  /* hàng 3 full */
  }

  /* đảm bảo control full chiều rộng cột */
  .tk-field .tk-input,
  .tk-field select,
  .tk-field .choices,
  .tk-field input { width:100%; }
}

/* Tùy ý: nếu muốn “Từ ngày/Đến ngày” vẫn xuống 1 cột ở khúc tablet */
@media (min-width: 600px) and (max-width: 899px){
  .tk-form .tk-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "province"
      "from"
      "to"
      "actions";
  }
}