/* 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; }

/* ===== CONGCUSAU_v1 (22/09/2026) — 6 cong cu co tinh toan ===== */

/* hang dieu khien: co dan, xuong dong tren dien thoai */
.cc-hang{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
.cc-hang label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--cc-nhan,#475569)}
.cc-hang input[type=date],.cc-hang input[type=number],.cc-hang input[type=text]{
  padding:8px 10px;border:1px solid var(--cc-vien,#cbd5e1);border-radius:8px;font:inherit;min-width:10rem}
.cc-dot{padding:10px;border:1px solid var(--cc-vien,#e2e8f0);border-radius:10px;margin-bottom:8px;background:var(--cc-nen,#f8fafc)}
.glab{font-weight:600;margin-bottom:6px}

/* bang so sanh hai nuoc — cuon ngang tren dien thoai, khong lam vo trang */
.cc-ss-bang-bao{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cc-ss-bang{width:100%;border-collapse:collapse;min-width:30rem}
.cc-ss-bang th,.cc-ss-bang td{padding:9px 12px;border-bottom:1px solid var(--cc-vien,#e2e8f0);text-align:left;vertical-align:top}
.cc-ss-bang thead th{font-weight:700;border-bottom-width:2px;white-space:nowrap}
.cc-ss-bang tbody th{font-weight:600;color:var(--cc-nhan,#475569);white-space:nowrap}
.cc-ss-lech{background:var(--cc-to,#fff7ed)}

/* danh sach ket qua loc */
.cc-loc-ds{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.cc-loc-ds li{padding:9px 12px;border:1px solid var(--cc-vien,#e2e8f0);border-radius:10px;background:#fff}
.cc-loc-phu{display:block;font-size:.85rem;color:var(--cc-nhan,#64748b);margin-top:2px}
.cc-form-loc{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.cc-form-loc select{padding:8px 10px;border:1px solid var(--cc-vien,#cbd5e1);border-radius:8px;font:inherit}
.cc-sch-ds{line-height:1.9}

@media (max-width:480px){
  .cc-hang input[type=date],.cc-hang input[type=number],.cc-hang input[type=text]{min-width:0;width:100%}
  .cc-hang label{flex:1 1 100%}
}

/* ===== CCFORM_FIX_v1 (22/09/2026) — hai loi cua khoi CONGCUSAU_v1 =====
   Anh Thien bat loi 1 tren dien thoai 22/09.

   1) .cc-form-loc khai bao SAU @media(max-width:560px) nen align-items:flex-end
      ghi de align-items:stretch, trong khi flex-direction:column van giu
      => cac hang xep doc VA don ve ben phai, moi hang mot do rong theo do dai
      nhan. Nhin nhu loi trang.
   2) .cc-hang input an font:inherit tu .cc-hang label (font-size:.9rem = 14.4px).
      Duoi 16px thi iOS TU PHONG TO CA TRANG khi bam vao o — dung bay da ghi
      o CLAUDE.md muc 11b cho .cc-tim-o, lan nay lap lai o cho khac.

   Dat o CUOI file de thang ve thu tu nguon, khong phai sua lai khoi cu. */

/* --- 1. form loc nuoc --- */
.cc-form-loc > div { flex: 1 1 13rem; min-width: 0; }
.cc-form-loc select { width: 100%; font-size: 16px; }

@media (max-width: 560px) {
  .cc-form-loc { flex-direction: column; align-items: stretch; }
  .cc-form-loc > div { flex: 1 1 auto; width: 100%; }
  .cc-form-loc .btn { width: 100%; }
}

/* --- 2. o nhap khong duoc nho hon 16px --- */
.cc-hang input[type=date],
.cc-hang input[type=number],
.cc-hang input[type=text],
.cc-hang select { font-size: 16px; }

/* select trong .cc-hang chua tung duoc style — them truoc de sau nay khoi tho */
.cc-hang select {
  padding: 8px 10px; border: 1px solid var(--cc-vien, #cbd5e1);
  border-radius: 8px; background: var(--bg); color: var(--text);
  min-width: 10rem; max-width: 100%;
}

/* --- 3. dong bo diem ngat: .cc-hang dang dung 480px trong khi .cc-form dung
       560px, nen o khoang 481-560px cac o bi chen. Them o 560 cho khop. --- */
@media (max-width: 560px) {
  .cc-hang input[type=date],
  .cc-hang input[type=number],
  .cc-hang input[type=text],
  .cc-hang select { min-width: 0; width: 100%; }
  .cc-hang label { flex: 1 1 100%; }
  .cc-hang .btn { width: 100%; }
}