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