/* Mau giao dien trang chu (CtmtMauGiaoDien): the chon mau (vn/CaiDat.aspx), trang soan (vn/CaiDatTrangChu.aspx), quan tri. */

/* ---------- The chon mau ---------- */
.ct-mau-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .65rem; }
.ct-mau-ds:empty { display: none; }
.ct-mau-the {
    position: relative; display: flex; gap: .7rem; align-items: flex-start; margin: 0; cursor: pointer;
    padding: .65rem; border: 2px solid #D4E0D4; border-radius: 12px; background: #fff;
}
.ct-mau-the:hover { border-color: rgba(27, 107, 42, .45); }
.ct-mau-the:has(input:checked) { border-color: #1B6B2A; background: rgba(27, 107, 42, .06); box-shadow: 0 0 0 1px rgba(27, 107, 42, .18); }
.ct-mau-the:has(input:focus-visible) { outline: 2px solid #1B6B2A; outline-offset: 2px; }
.ct-mau-the > input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.ct-mau-the__tn {
    flex: 0 0 64px; height: 76px; border-radius: 8px; background: #F2F5F2; border: 1px solid #E1E8E1;
    display: flex; align-items: center; justify-content: center; overflow: hidden; color: #1B6B2A; font-size: 1.4rem;
}
.ct-mau-the__than { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.ct-mau-the__ten { font-weight: 700; font-size: .9rem; color: #0D4A1A; line-height: 1.3; }
.ct-mau-the__mota { font-size: .78rem; color: #5A6B5A; line-height: 1.4; }
.ct-mau-the__nhan { display: flex; flex-wrap: wrap; gap: .25rem; }
.ct-mau-nhan { font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: #EEF2F6; color: #3A4756; }
.ct-mau-nhan--md { background: #FCEEEC; color: #9F1C1F; }
.ct-mau-nhan--goi-y { background: #FFF3D6; color: #8A5A00; }
.ct-mau-nhan--cn { background: #E6F4EA; color: #1B6B2A; }
.ct-mau-nhan--may { background: #EAF1FB; color: #1F5FAF; }
.ct-mau-the__nut { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .15rem; font-size: .78rem; }
.ct-mau-the__nut a, .ct-mau-the__nut button { color: #1F5FAF; background: none; border: 0; padding: 0; font: inherit; text-decoration: none; cursor: pointer; }
.ct-mau-the__nut a:hover, .ct-mau-the__nut button:hover { text-decoration: underline; }
.ct-mau-the__nut .ct-mau-xoa, .ct-mau-the__nut .ct-mau-xoa-k { color: #B42318; }
.ct-mau-the--bang { padding: 0; border: 0; background: none; cursor: default; display: block; }
.ct-mau-the--bang .ct-mau-the__tn { display: flex; width: 64px; }
.ct-mau-cuoi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .85rem; }
.ct-mau-chuyen {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; padding: .6rem .75rem;
    border-radius: 10px; background: #FFF8E6; border: 1px solid #F0E3C4; font-size: .85rem;
}
.ct-mau-chuyen[hidden] { display: none; }

/* ---------- So do thu nho ---------- */
.ct-mau-tn { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; padding: 5px; }
.ct-mau-tn__hang { display: flex; gap: 3px; flex: 1 1 0; min-height: 7px; }
.ct-mau-tn__hang > .ct-mau-tn__k { flex: 1 1 0; }
.ct-mau-tn__k { display: flex; gap: 2px; flex: 1 1 0; min-height: 5px; border-radius: 2px; background: #C9D3DC; }
.ct-mau-tn__k--gioi-thieu { background: linear-gradient(120deg, #6E1214, #9F1C1F 55%, #5A1640); flex-grow: 1.6; }
.ct-mau-tn__k--the-chu-de { background: repeating-linear-gradient(90deg, #DCE3EA 0 8px, transparent 8px 10px); flex-grow: .45; }
.ct-mau-tn__k--kpi { background: repeating-linear-gradient(90deg, #BFD5EE 0 11px, transparent 11px 13px); flex-grow: .7; }
.ct-mau-tn__k--linh-vuc { background: transparent; flex-grow: 1.6; flex-wrap: wrap; }
.ct-mau-tn__k--linh-vuc i { flex: 1 0 28%; border-radius: 2px; opacity: .75; }
.ct-mau-tn__k--giai-ngan { background: #CFE8D7; }
.ct-mau-tn__k--ban-do { background: #455A64; }
.ct-mau-tn__k--ban-do-nhung { background: #1E4D63; }
.ct-mau-tn__k--ket-qua-ban-do { background: linear-gradient(90deg, #DCE3EA 0 30%, transparent 30% 33%, #1E4D63 33%); flex-grow: 2; }
.ct-mau-tn__k--quick { background: #F5D9D4; flex-grow: .55; }

/* ---------- Trang soan ---------- */
.ct-soan { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 1.25rem; max-width: 1500px; margin: 0 auto; align-items: start; }
.ct-soan__trai { background: #fff; border: 1px solid #E3EBE3; border-radius: 14px; padding: 1rem 1.1rem; }
.ct-soan__lui { display: inline-block; font-size: .85rem; margin-bottom: .35rem; text-decoration: none; }
.ct-soan__h1 { font-size: 1.15rem; font-weight: 800; color: #0D4A1A; margin: 0 0 .3rem; }
.ct-soan__h2 { font-size: .95rem; font-weight: 700; color: #0D4A1A; margin: 1rem 0 .25rem; }
.ct-soan__chung { border: 1px dashed #D4E0D4; border-radius: 10px; padding: .4rem .75rem .75rem; margin: .5rem 0 0; }
.ct-soan__chung legend { float: none; width: auto; padding: 0 .35rem; margin: 0; font-size: .8rem; }
.ct-soan__ds { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.ct-soan__k { border: 1px solid #DDE5DD; border-radius: 10px; padding: .5rem .6rem; background: #fff; }
.ct-soan__k.is-tat { background: #F7F8F7; }
.ct-soan__k.is-tat .form-check-label { color: #8A948A; }
.ct-soan__k.is-keo { opacity: .5; }
.ct-soan__k-dong { display: flex; align-items: center; gap: .45rem; }
.ct-soan__k-dong .form-check { flex: 1; min-width: 0; }
.ct-soan__k-dong .form-check-label { font-size: .88rem; cursor: pointer; }
.ct-soan__keo { color: #8A948A; cursor: grab; padding: 0 .1rem; }
.ct-soan__cot { width: auto; flex: 0 0 auto; font-size: .78rem; padding-top: .15rem; padding-bottom: .15rem; }
.ct-soan__mui { display: inline-flex; gap: 2px; }
.ct-soan__mui .btn { padding: .1rem .35rem; line-height: 1.2; }
.ct-soan__k-mota { margin: .15rem 0 0 1.65rem; }
.ct-soan__tham { margin: .45rem 0 0 1.65rem; padding-top: .45rem; border-top: 1px dashed #E1E8E1; }
.ct-soan__k.is-tat .ct-soan__tham { display: none; }
.ct-soan__lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; margin-bottom: .45rem; }
.ct-soan__lv-o { display: flex; gap: .35rem; align-items: flex-start; margin: 0; padding: .3rem .4rem; border-radius: 8px; border: 1px solid #E1E8E1; border-left: 4px solid var(--lv); font-size: .8rem; cursor: pointer; }
.ct-soan__lv-o:has(input:checked) { background: color-mix(in srgb, var(--lv) 9%, #fff); }
.ct-soan__lv-o input { margin-top: .2rem; }
.ct-soan__lv-o small { display: block; color: #6B776B; font-size: .7rem; }
.ct-soan__nut { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1rem; position: sticky; bottom: 0; background: #fff; padding: .5rem 0 .1rem; }
.ct-soan__phai { position: sticky; top: 1rem; }
.ct-soan__xem-head { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 700; color: #0D4A1A; margin-bottom: .35rem; }
.ct-soan__xem-head a { font-weight: 500; text-decoration: none; }
.ct-soan__khung { border: 1px solid #D4E0D4; border-radius: 14px; overflow: hidden; background: #F4F6F8; height: calc(100vh - 9rem); min-height: 520px; }
.ct-soan__khung iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 991.98px) {
    .ct-soan { grid-template-columns: minmax(0, 1fr); }
    .ct-soan__phai { position: static; }
    .ct-soan__khung { height: 70vh; min-height: 420px; }
}
@media (max-width: 575.98px) {
    .ct-soan__trai { padding: .85rem; }
    .ct-soan__lv { grid-template-columns: minmax(0, 1fr); }
    .ct-soan__k-mota, .ct-soan__tham { margin-left: 0; }
    .ct-mau-ds { grid-template-columns: minmax(0, 1fr); }
}