/* CONGCU_CSS_v1 — chi nap tren trang cong cu (base.php kiem path), khong de nang
   them cho 8.222 bai cua 177 site. Dung bien mau cua app.css nen tu theo thuong hieu
   tung site, khong ghim mau cung. */

.cc-trang h2 { margin: 2rem 0 .6rem; font-size: 1.22rem; }
.cc-sub { color: var(--text-soft); margin: .35rem 0 1rem; max-width: 62ch; }

/* --- o chon --- */
.cc-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .8rem 0 0; }
.cc-form label { display: block; font-size: .82rem; color: var(--text-soft); margin-bottom: .25rem; }
.cc-form select, .cc-form input[type="date"], .cc-form input[type="number"] {
  padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-size: 1rem; min-width: 12rem; max-width: 100%;
}
.cc-form-doi { gap: .8rem; }
.cc-form-doi > div { flex: 1 1 12rem; }
.cc-form-phu { margin: 0 0 1rem; }

/* --- khoi ket qua --- */
.cc-kq { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg);
         padding: 1.1rem 1.2rem; margin: 1.2rem 0; }
.cc-kq-lon { font-size: 1.6rem; line-height: 1.25; font-weight: 700; margin: 0 0 .8rem; color: var(--text); }
.cc-bang { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.cc-bang dt { color: var(--text-soft); font-size: .9rem; }
.cc-bang dd { margin: 0; font-size: .96rem; }

/* --- bang --- */
.cc-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
.cc-table th, .cc-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.cc-table th { font-size: .85rem; color: var(--text-soft); font-weight: 600; }

.cc-luu-y { margin: .5rem 0 1rem; padding-left: 1.15rem; }
.cc-luu-y li { margin: .4rem 0; }
.cc-ma { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-alt);
         border: 1px solid var(--border-soft); border-radius: 4px; padding: .05rem .35rem; }
.cc-goi-y { color: var(--text-soft); margin: 1.2rem 0; }

/* --- luoi cong cu --- */
.cc-khac { margin-top: 2.2rem; }
.cc-luoi { list-style: none; padding: 0; margin: .6rem 0 0;
           display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cc-luoi a { display: block; padding: .85rem .95rem; border: 1px solid var(--border);
             border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--bg-card); height: 100%; }
.cc-luoi a:hover { border-color: var(--brand); }
.cc-luoi strong { display: block; margin-bottom: .2rem; }
.cc-luoi span { display: block; font-size: .86rem; color: var(--text-soft); line-height: 1.4; }
.cc-luoi-lon { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 1rem; }

.cc-nguon { margin-top: 2rem; padding-top: .9rem; border-top: 1px solid var(--border-soft);
            font-size: .84rem; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 560px) {
  .cc-kq-lon { font-size: 1.32rem; }
  .cc-bang { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .cc-bang dt { margin-top: .5rem; }
  .cc-form select, .cc-form input { min-width: 0; width: 100%; }
  .cc-form, .cc-form-doi { flex-direction: column; align-items: stretch; }
}

/* ================= CCHINH_v1 — hinh ve cho ket qua cong cu =================
   Mau lay tu bien cua site, khong cung mau, de 177 site khac tong deu dung duoc.
   Moi hinh co ban toi rieng: SVG khong tu doi mau theo prefers-color-scheme. */
.cc-svg { display: block; width: 100%; height: auto; }

/* --- chung --- */
.cc-hinh-khung {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

/* --- o cam dien --- */
.cc-ocam-ds { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 18px; }
.cc-ocam { margin: 0; text-align: center; }
.cc-ocam-ve {
  width: 92px; height: 92px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.cc-ocam figcaption { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.cc-svg-ocam .than { fill: #f1f5f9; stroke: #cbd5e1; stroke-width: 2; }
.cc-svg-ocam .hoc  { fill: #e2e8f0; stroke: #cbd5e1; stroke-width: 1.5; }
.cc-svg-ocam .lo   { fill: #1e293b; }
.cc-svg-ocam .kep  { fill: #94a3b8; }
.cc-svg-ocam .chau { fill: #64748b; }
.cc-svg-ocam .chu  { fill: #1e293b; font-size: 34px; font-weight: 700; }

/* --- dong ho --- */
.cc-dongho-doi { display: flex; gap: 22px; justify-content: center; margin: 16px 0 20px; flex-wrap: wrap; }
.cc-dongho { margin: 0; text-align: center; width: 116px; }
.cc-dongho figcaption { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.cc-dongho .gio { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-dongho .noi { font-size: 12px; color: var(--text-soft); }
.cc-svg-dongho .vien { fill: #fff; stroke: var(--border); stroke-width: 3; }
.cc-svg-dongho .vach { stroke: #94a3b8; stroke-width: 2.5; stroke-linecap: round; }
.cc-svg-dongho .kim-gio  { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.cc-svg-dongho .kim-phut { stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; }
.cc-svg-dongho .truc { fill: var(--accent); }
/* Ban dem thi mat dong ho toi lai — thay ngay ben kia dang la dem */
.cc-svg-dongho.la-dem .vien { fill: #1e293b; stroke: #334155; }
.cc-svg-dongho.la-dem .vach { stroke: #64748b; }
.cc-svg-dongho.la-dem .kim-gio,
.cc-svg-dongho.la-dem .kim-phut { stroke: #f1f5f9; }

/* --- cung mat troi --- */
.cc-svg-mattroi { max-width: 340px; margin: 16px auto 20px; }
.cc-svg-mattroi .troi      { fill: #eff6ff; }
.cc-svg-mattroi .cung      { fill: none; stroke: #fbbf24; stroke-width: 2.5; stroke-dasharray: 5 4; }
.cc-svg-mattroi .chan-troi { stroke: #94a3b8; stroke-width: 2; }
.cc-svg-mattroi .mat-troi  { fill: #f59e0b; }
.cc-svg-mattroi .diem      { fill: #94a3b8; }
.cc-svg-mattroi .chu       { fill: var(--text-soft); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- ben lai xe --- */
.cc-duong-doi { display: flex; gap: 18px; justify-content: center; margin: 16px 0 20px; flex-wrap: wrap; }
.cc-duong-doi figure { margin: 0; width: 132px; text-align: center; }
.cc-duong-doi figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.cc-svg-duong .nhua      { fill: #e2e8f0; }
.cc-svg-duong .le        { stroke: #fff; stroke-width: 3; }
.cc-svg-duong .vach-giua { stroke: #fff; stroke-width: 3; stroke-dasharray: 10 8; }
.cc-svg-duong .xe        { fill: var(--brand); }
.cc-svg-duong .kinh      { fill: #bfdbfe; }
.cc-svg-duong .vo-lang   { fill: none; stroke: #fff; stroke-width: 2.5; }
.cc-svg-duong .mui-ten   { fill: var(--accent); }

/* --- khoang cach bay --- */
.cc-svg-bay { max-width: 400px; margin: 16px auto 20px; }
.cc-svg-bay .duong-bay { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 6 5; }
.cc-svg-bay .diem      { fill: var(--brand); }
.cc-svg-bay .diem.den  { fill: var(--accent); }
.cc-svg-bay .may-bay   { fill: var(--accent); }
.cc-svg-bay .chu       { fill: var(--text-soft); font-size: 13px; font-weight: 600; }

/* --- kieu hinh: the --- */
.cc-the-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 20px; }
.cc-the {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt);
}
.cc-the .bieu   { font-size: 26px; line-height: 1; }
.cc-the strong  { font-size: 14px; }
.cc-the span:last-child { font-size: 12.5px; line-height: 1.4; color: var(--text-soft); }

/* --- ma dien thoai --- */
.cc-ma-doi { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 20px; flex-wrap: wrap; }
.cc-ma-o {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 120px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt);
}
.cc-ma-o .co  { font-size: 28px; line-height: 1; }
.cc-ma-o b    { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cc-ma-o .ten { font-size: 12px; color: var(--text-soft); }
.cc-ma-mui    { font-size: 22px; color: var(--text-muted); }

/* --- tien do cu tru --- */
.cc-tiendo { margin: 16px 0 20px; }
.cc-tiendo-thanh {
  height: 14px; border-radius: 999px;
  background: var(--border-soft); border: 1px solid var(--border);
  overflow: hidden;
}
.cc-tiendo-thanh span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cc-tiendo-nhan {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 6px; font-size: 12.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.cc-tiendo-nhan b { font-size: 14px; color: var(--text); }

/* --- co canh tieu de + emoji trong danh sach cong cu --- */
.cc-co-to { font-size: .9em; margin-right: 6px; }
.cc-luoi-bieu { font-size: 22px; line-height: 1; display: block; margin-bottom: 4px; }

/* ================= CCTIM_v1 — o go tim nuoc =================
   <select> chi bi an bang CSS chu van nam trong form, nen gia tri gui di van la
   cua no. Khong dung display:none cho ca boc — mat luon ca o go. */
.cc-tim { position: relative; }
.cc-tim-an { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cc-tim-o {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;            /* duoi 16px la iOS tu phong to trang khi bam vao */
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cc-tim-o:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
@media (max-width: 767px) { .cc-tim-o { font-size: 16px; } }

.cc-tim-ds {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px); left: 0; right: 0;
  max-height: 46vh;
  margin: 0; padding: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.cc-tim-ds li {
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  cursor: pointer;
}
.cc-tim-ds li.sang,
.cc-tim-ds li:hover { background: var(--brand-light); color: var(--brand-dark); }
.cc-tim-khong { color: var(--text-muted); cursor: default !important; }
.cc-tim-khong:hover { background: none !important; color: var(--text-muted) !important; }