:root {
    --red: #b51f2a;
    --red2: #8f1720;
    --gold: #f0c34a;
    --green: #2f7d4a;
    --blue: #095ec6;
    --ink: #18212b;
    --muted: #687583;
    --line: #e7ebef;
    --bg: #eaf6fe;
    --card: #fff;
    --shadow: 0 8px 28px rgba(25,38,52,.07);
    --main:#022a6f;
    --main-light: #327fdd;
    --main-border: #c0d6ef;
	--orange: #faa90b;
	--purple: #824dda
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Be Vietnam Pro', Inter, system-ui, -apple-system, "Segoe UI", sans-serif
}

.app {
    max-width: 980px;
    margin: auto;
    min-height: 100vh
}

.topbar {
    height: 68px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 22px
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 800
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    border: 3px solid #f8d56b;
    font-size: 18px
}

.brand small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px
}

.main {
    padding: 0 22px 22px
}

.hero h1 {
    margin: 0;
    font-size: 27px;
    letter-spacing: -.5px
}

.hero .sub {
    color: var(--muted);
    margin-top: 5px;
    font-size: 13px
}

.ntmbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff6e0;
    color: #946a10;
    border-radius: 99px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
    margin-top: 10px;
    text-decoration: none
}

.hero-wrap {
    margin: 0 0;
    height: 260px;
    position: relative
}

.hero-card {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 14px
}

.hero-logo {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none
}

.hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.hero-titles h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -.3px;
    color: var(--main);
    text-transform: uppercase
}

.hero-titles .sub {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--main);
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;    
}

.hero-titles .sub svg {
    flex: none;
    color: var(--main)
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf7ef;
    color: #237241;
    border: 1px solid #cdeeda;
    border-radius: 99px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap
}

.hero-card .ntmbadge {
    margin-top: 0;
    white-space: nowrap
}

.hero-banner {
    position: absolute;
    /* border-radius: 0 0 16px 16px; */
    overflow: hidden;
    box-shadow: var(--shadow);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hero-banner:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none
}

.feature-section {
    margin: 18px 0
}

.feature-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #173a26;
    margin: 0 0 14px
}

.feature-title-icon {
    color: var(--green)
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.feature-card {
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid transparent
}

.feature-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 17px;
    margin-bottom: 2px
}

.feature-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2px
}

.feature-num {
    font-size: 26px;
    font-weight: 850;
    color: #1c2733
}

.feature-unit {
    font-size: 11px;
    color: var(--muted)
}

.f-green {
    background: #eef8f0;
    border-color: #dcefe1
}

.f-green .feature-icon {
    background: var(--green);
    color: #fff
}

.f-green .feature-label {
    color: var(--green)
}

.f-blue {
    background: #eaf3fb;
    border-color: #d9eaf9
}

.f-blue .feature-icon {
    background: var(--blue);
    color: #fff
}

.f-blue .feature-label {
    color: var(--blue)
}

.f-orange {
    background: #fef3e8;
    border-color: #fbe4c9
}

.f-orange .feature-icon {
    background: #d9822b;
    color: #fff
}

.f-orange .feature-label {
    color: #c07018
}

.f-purple {
    background: #f2eefb;
    border-color: #e3d9f7
}

.f-purple .feature-icon {
    background: #7c4fd1;
    color: #fff
}

.f-purple .feature-label {
    color: #7c4fd1
}

.f-pink {
    background: #fdecef;
    border-color: #f9d7dd
}

.f-pink .feature-icon {
    background: #d63c62;
    color: #fff
}

.f-pink .feature-label {
    color: #d63c62
}

.f-yellow {
    background: #fdf6e3;
    border-color: #f7e6b8
}

.f-yellow .feature-icon {
    background: var(--gold);
    color: #fff
}

.f-yellow .feature-label {
    color: #a67c1e
}

.status {
    margin: 18px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--green);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: var(--shadow)
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf7ef;
    color: #237241;
    border-radius: 99px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 800
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2d9b58
}

.meta {
    font-size: 11px;
    color: var(--muted)
}

.meta b {
    color: #394652;
    margin-left: 4px
}

.tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 5px;
    margin: 15px 0
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1.5px solid var(--main-border);
    background: #fff;
    color: var(--blue);
    border-radius: 99px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer
}

.tab img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: none
}

.tab.active {
    background: var(--blue);
    color: #fff;border-color:var(--blue)
}

.tab.active img {
    filter: brightness(0) invert(1)
}

.panel {
    display: none
}

.panel.active {
    display: block
}

.section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin: 26px 0 12px
}

/* Cụm 2 nút nổi góc phải banner: "Xem bản đồ xã" + "Đăng nhập", đi liền nhau. Định vị (position:
   absolute) đặt trên chính wrapper .hero-link — 2 nút con chỉ là item flex thường, không tự
   position riêng nữa (tránh lặp lại lỗi cũ: nút không định vị bị .hero-banner (absolute, phủ kín
   .hero-wrap) đè lên do luật vẽ CSS ưu tiên phần tử có position lên trên phần tử không có). */
.hero-link {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.hero-maplink,.hero-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--blue);
    text-decoration: none;
    border-radius: 99px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 750;
    box-shadow: var(--shadow);
    white-space: nowrap;border:1px solid var(--main-border)
}

.hero-maplink svg {
    flex: none;
    color: var(--blue)
}

.hero-login svg {
    flex: none;
    color: var(--blue)
}
.hero-maplink:hover,.hero-login:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.hero-maplink:hover svg,.hero-login:hover svg{color:#fff;}
/* Thanh số liệu tổng quan, nổi trên mép dưới banner */
.stat-bar {
    position: relative;
    z-index: 1;
    margin: -36px 0 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap
}

.stat-bar-item {
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-right: 1px solid var(--line)
}

.stat-bar-item:last-child {
    border-right: 0
}

.stat-bar-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 19px;
    flex: none;
    color: #fff
}

.stat-bar-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain
}

.stat-bar-lbl {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--blue);
    text-transform: uppercase
}

.stat-bar-num {
    font-size: 18px;
    font-weight: 850;
    color: var(--main);
    margin-top: 2px
}

/* Bố cục 2 cột độc lập chiều cao (mỗi cột tự xếp thẻ của mình, không dùng CSS grid vì số thẻ mỗi
   cột khác nhau — trang thôn cột trái chỉ có 1 thẻ, trang xã có thêm "Danh sách thôn") */
.cols {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0
}

/* Biến thể "luôn 2 cột, tự xuống hàng" — dùng khi số lượng .col bên trong không cố định là 2 (vd trang
   công khai thôn sau khi gộp Cán bộ/Kinh tế/SXKD vào chung 1 section "chung" thành nhiều .col hơn) —
   mỗi .col chiếm nửa chiều rộng, .col thứ 3 trở đi tự xuống hàng dưới, khác .cols mặc định (đúng 2 cột
   cố định trên 1 hàng, không wrap). */
.cols.wrap-2 {
    flex-wrap: wrap
}

.cols.wrap-2 > .col {
    flex: 0 1 calc(50% - 7px)
}

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .2px
}

.card-title.t-blue {
    color: var(--blue)
}

.card-title.t-green {
    color: var(--green)
}

.card-title img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: none
}

/* Cơ cấu dân số: donut nam/nữ + thanh tỉ lệ */
.gender-row {
    display: flex;
    align-items: center;
    gap: 22px
}

.gender-donut {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    position: relative;
    flex: none
}

.gender-donut .gd-num {
    position: absolute;
    inset: 20px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    color: #1c2733;
    text-align: center
}

.gender-donut .gd-num small {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted)
}

.gender-bars {
    flex: 1;
    min-width: 0
}

.gbar {
    margin-bottom: 12px
}

.gbar:last-child {
    margin-bottom: 0
}

.gbar-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px
}

.gbar-lbl .nam-text {
    color: var(--blue)
}

.gbar-lbl .nu-text {
    color: #d6567e
}

.gbar-track {
    height: 7px;
    background: #eef1f3;
    border-radius: 99px;
    overflow: hidden
}

.gbar-fill {
    height: 100%;
    border-radius: 99px
}

.gbar-fill.nam {
    background: var(--blue)
}

.gbar-fill.nu {
    background: #d6567e
}

.dantoc-line {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted)
}

.dantoc-line b {
    color: var(--ink)
}

/* Bảng "Danh sách thôn" (chỉ trang công khai xã) */
.thon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px
}

.thon-table th {
    text-align: left;
    color: #87929d;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 0 8px 8px
}

.thon-table td {
    padding: 10px 8px;
    border-top: 1px solid var(--line)
}

.thon-table tr.row-link {
    cursor: pointer
}

.thon-table tr.row-link:hover td {
    background: #f8fafb
}

.thon-table td.chev {
    text-align: right;
    color: #b6bfc7
}

.btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 9px;
    border: 1.5px solid var(--main-border);
    color: var(--blue);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;background:var(--bg)
}

.btn-outline:hover {
    border-color: var(--blue);background-color: var(--blue);
    color: #fff
}

/* Chân trang: thông tin công khai / cập nhật lần cuối / mã QR */
.foot-bar {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden
}

.foot-item {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-right: 1px solid var(--line)
}

.foot-item:last-child {
    border-right: 0
}

.foot-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eaf3fb;
    color: var(--blue);
    display: grid;
    place-items: center;
    flex: none
}

.foot-lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: .3px;
    text-transform: uppercase
}

.foot-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue);
    margin-top: 2px
}

.foot-item img.qr {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 1px solid var(--line);
    flex: none;
    background: #fff
}

.foot-tagline {
    text-align: center;
    color: var(--green);
    font-style: italic;
    font-size: 12.5px;
    font-weight: 600;
    margin: 16px 0 4px
}

.grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 17px;
    box-shadow: var(--shadow)
}

.card h3,.card h2 {
    margin: 0 0 14px;
    font-size: 13px;color:var(--blue);
    display: flex;
    align-items: center;
    gap: 8px
}

.card h3 img,.card h2 img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: none
}

.wide {
    grid-column: 1/-1
}

.fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.field {
    padding: 11px;
    background: #f8fafb;
    border-radius: 9px
}

.label {
    font-size: 10px;
    color: #87929d;
    margin-bottom: 5px
}

.value {
    font-size: 13px;
    font-weight: 700
}

.kpis {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px
}

.kpi {
    background: #f8fafb;
    border-radius: 9px;
    padding: 16px
}

.kpi .icon {
    font-size: 20px;display:none;
}

.kpi .num {
    font-size: 25px;
    font-weight: 850;
    margin-top: 8px
}

.kpi .lbl {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px
}

.chart {
    display: flex;
    align-items: center;
    gap: 25px
}

.donut {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    position: relative;
    flex: none
}

.donut:after {
    content: "";
    position: absolute;
    inset: 29px;
    background: #fff;
    border-radius: 50%
}

.legend {
    flex: 1
}

.leg {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px
}

.sq {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 7px
}

.s1 {
    background: var(--green)
}

.s2 {
    background: #6aa9d9
}

.s3 {
    background: #d5a83e
}

.person {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4e2e3;
    color: var(--red);
    display: grid;
    place-items: center;
    font-weight: 800
}

.person:last-child {
    border-bottom: 0
}

.person b {
    font-size: 13px
}

.person-phone {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    background: #eaf7ef;
    border-radius: 99px;
    padding: 3px 10px 3px 8px;
    text-decoration: none;
    transition: background .15s
}

.person-phone:hover {
    background: #d9f0e1
}

.mapimg {
    height: 320px;
    border-radius: 10px;
    background: linear-gradient(135deg,#e7eef2,#d7e5d8);
    display: grid;
    place-items: center;
    color: #66737e;
    font-size: 12px;
    overflow: hidden
}

.mapimg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mapimg iframe {
    width: 100%;
    height: 100%;
    border: 0
}

.btn-map {
    display: block;
    text-align: center;
    background: var(--red);
    color: #fff;
    text-decoration: none;
    padding: 12px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 13px
}

.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--muted)
}

.footer-note {
    text-align: center;
    font-size: 12px;
    color: #8a949f;
    padding: 22px 0 6px
}

@media(max-width: 760px) {
    .topbar {
        height:60px;
        padding: 0 14px
    }

    .brand small {
        font-size: 9px
    }    
    .main {
        padding: 14px 12px 30px
    }
    .hero-wrap{height:170px !important;}
    .hero h1 {
        font-size: 22px
    }
    .hero-titles .sub{font-size:10px;}
    .grid,.fields {
        grid-template-columns: 1fr
    }

    .wide {
        grid-column: auto
    }

    .chart {
        display: block
    }

    .donut {
        margin: 4px auto 18px
    }

    .hero-card {
        padding: 14px 16px;
        border-radius: 14px 14px 0 0
    }

    .hero-logo {
        width: 44px;
        height: 44px
    }

    .hero-titles h1 {
        font-size: 16px
    }

    .hero-banner {
        height: 170px;
        /* border-radius: 0 0 14px 14px; */
    }

    .feature-grid {
        grid-template-columns: repeat(2,1fr)
    }



    .hero-maplink,.hero-login {
        padding: 7px 12px;
        font-size: 11px;
    }
    .hero-login{display:none;}
    .stat-bar {
        margin-top: 0;
    }

    .stat-bar-item {
        flex: 1 1 50%;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .cols {
        flex-direction: column;
        /* Desktop dùng align-items:flex-start (trục ngang lúc đó là chiều dọc) để mỗi cột tự cao theo
           nội dung, không kéo bằng nhau. Khi đổi flex-direction:column ở mobile, trục ngang đổi thành
           CHIỀU RỘNG — flex-start lúc này làm mỗi .col co lại theo bề rộng nội dung thay vì đầy màn
           hình, khiến thẻ nào có nội dung "gọn" (như bảng Danh sách thôn) trông hẹp hơn thẻ có nội
           dung tự nhiên rộng hơn (như Thông tin chung). Ép lại stretch để mọi thẻ đều đầy chiều rộng. */
        align-items: stretch
    }

    /* .cols đã đổi flex-direction:column ở trên — trục chính giờ là chiều dọc, nên flex-basis "50%" của
       .wrap-2 phải reset lại kẻo bị hiểu thành chiều CAO 50% thay vì chiều rộng. */
    .cols.wrap-2 > .col {
        flex: 1 1 auto
    }

    .gender-row {
        flex-wrap: wrap
    }

    .foot-item {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .foot-item:last-child {
        border-bottom: 0
    }
}

/* ==========================================================================
   Views/BanDo/MapXa.cshtml — bản đồ 1 xã. Header dùng LẠI NGUYÊN VẸN markup/
   class dùng chung (.hero-wrap/.hero-card/.hero-brand/.hero-titles/.hero-
   link/.hero-maplink/.hero-login) y hệt Home/Index.cshtml — không còn CSS
   riêng cho header ở đây nữa (trước đây có 1 bộ ".mapxa-page .hero-*" thu
   nhỏ header xuống 96px, đã bỏ theo yêu cầu "cấu trúc giống Home/Index luôn
   nên không cần css riêng nữa"). Phần còn lại dưới tiền tố ".mapxa-page"
   (class gắn trên <body> của MapXa.cshtml) chỉ còn CSS ĐẶC THÙ cho khung
   sidebar/bản đồ — không đụng/đè lên ".hero-*" nữa vì không còn rule nào
   ghi đè chúng. Toàn bộ màu sắc bên dưới lấy từ :root chung (--blue/--green/
   --red/--orange/--purple/--ink/--muted/--line/--bg/--card/--shadow) thay vì
   khai riêng như bản cũ. ========================================== */
html {
    height: 100%
}

body.mapxa-page {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.mapxa-page .hero-wrap {
    flex: none;height:200px;
}

.mapxa-page .layout {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative
}

.mapxa-page .sidebar {
    width: 270px;
    flex: none;
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.mapxa-page .side-box {
    border-bottom: 8px solid var(--bg);
    padding: 14px 16px
}

.mapxa-page .side-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #54626f;
    margin: 0 0 10px
}

.mapxa-page .stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0
}
.mapxa-page .stat-row:first-child{display:none;}
.mapxa-page .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
    color: #fff
}

.mapxa-page .stat-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1)
}

.mapxa-page .stat-num {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;color:var(--main)
}

.mapxa-page .stat-lbl {
    font-size: 11px;
    color:var(--main)
}

.mapxa-page .i-green { background: var(--green) }
.mapxa-page .i-blue { background: var(--blue) }
.mapxa-page .i-orange { background: var(--orange) }
.mapxa-page .i-purple { background: var(--purple) }
.mapxa-page .i-red { background: var(--red) }

.mapxa-page .side-search {
    position: relative;
    margin-bottom: 10px
}

.mapxa-page .side-search input {
    width: 100%;
    padding: 9px 10px 9px 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12.5px;
    background: #f8fafb
}

.mapxa-page .side-search svg {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa5ae
}

.mapxa-page .thon-list {
    flex: 1;
    overflow-y: auto
}

.mapxa-page .thon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px
}

.mapxa-page .thon-item:hover {
    background: #f4f6f8
}

.mapxa-page .thon-item.active {
    background: var(--green);
    color: #fff
}

.mapxa-page .thon-item .ten {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;color:var(--blue);
}
.mapxa-page .thon-item.active .ten{color:#fff;}
.mapxa-page .thon-item .ten img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex: none
}

.mapxa-page .thon-item.active .ten img {
    filter: brightness(0) invert(1)
}

.mapxa-page .thon-item .soluong {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap
}

.mapxa-page .thon-item.active .soluong {
    color: #eafbee
}

.mapxa-page .empty-note {
    color: var(--muted);
    font-size: 12px;
    padding: 8px 2px
}

.mapxa-page .mapwrap {
    flex: 1;
    position: relative;
    min-width: 0
}

.mapxa-page #map {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin-top: 5px;
    margin-left: 5px;border-top:1px solid var(--bg)
}

.mapxa-page .map-search {
    position: absolute;
    z-index: 15;
    top: 12px;
    left: 60px;
    width: 300px;
    max-width: calc(100% - 24px);
    background: var(--card);
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px
}

.mapxa-page .map-search svg {
    flex: none;
    color: #9aa5ae
}

.mapxa-page .map-search input {
    border: 0;
    outline: 0;
    font-size: 13px;
    width: 100%;
    background: transparent
}

.mapxa-page .legend {
    position: absolute;
    z-index: 15;
    top: 12px;
    right: 56px;
    background: var(--card);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 10px 12px;
    font-size: 11.5px
}

.mapxa-page .legend-title {
    font-weight: 800;
    color: #54626f;
    letter-spacing: .4px;
    font-size: 10.5px;
    margin-bottom: 7px
}

.mapxa-page .legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0
}

.mapxa-page .legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: none;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15)
}

.mapxa-page .pin-wrap {
    display: flex;
    align-items: center;
    gap: 6px
}

.mapxa-page .pin-icon {
    background: var(--blue);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    border: 2px solid #fff;
    flex: none
}

.mapxa-page .pin-icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    transform: rotate(45deg);
    filter: brightness(0) invert(1)
}

.mapxa-page .pin-icon.chon {
    background: var(--green);
    width: 36px;
    height: 36px
}

.mapxa-page .pin-icon.chon img {
    width: 16px;
    height: 16px
}

.mapxa-page .pin-label {
    background: var(--card);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    white-space: nowrap;
    margin-left: -15px;
    padding-left: 15px
}

.mapxa-page .pin-label.chon {
    background: var(--green);
    color: #fff
}

/* Nội dung thẻ thông tin thôn (tiêu đề/ô số liệu/donut...) được render bên trong <iframe> nhúng
   Views/BanDo/ThongTinThon.cshtml — CSS của phần đó nằm trong chính view kia, không lặp ở đây. */
.mapxa-page .thon-card {
    position: absolute;
    z-index: 20;
    right: 12px;
    bottom: 12px;
    width: 330px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    background: var(--card);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(20,30,45,.28)
}

.mapxa-page .thon-card iframe {
    width: 100%;
    border: 0;
    display: block;
    border-radius: 14px
}

.mapxa-page .tc-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: #f1f3f5;
    color: #54626f;
    font-size: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 1
}

/* Nút mở "Danh sách thôn" (sidebar) — chỉ cần trên mobile (desktop sidebar luôn hiện sẵn, không cần
   nút bật/tắt). Đặt trong .mapwrap, cùng hàng với .map-search — chừa đúng khoảng trống 60px bên trái
   .map-search đã có sẵn từ trước, đúng chỗ dành cho nút này. */
.mapxa-page .map-toggle-sidebar {
    display: none;
    position: absolute;
    z-index: 16;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 0;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    align-items: center;
    justify-content: center
}

/* Nút đóng trên sidebar chỉ có ý nghĩa ở dạng bottom-sheet (mobile) — desktop sidebar luôn hiện, ẩn nút
   này đi để không thừa. */
.mapxa-page .sidebar .tc-close {
    display: none
}

@media(max-width: 760px) {
    .mapxa-page .map-toggle-sidebar {
        display: flex
    }
    .mapxa-page #map{margin:0;}
    /* Sidebar hiện lên như 1 bottom-sheet (cùng kiểu thẻ thông tin thôn ".thon-card") thay vì kéo từ
       bên trái ra — trước đây dùng translateX nhưng không có nút nào gọi tới .open nên sidebar coi như
       ẩn vĩnh viễn trên mobile; giờ .map-toggle-sidebar/.side-close bật tắt class .open này. */
    .mapxa-page .sidebar {
        position: absolute;
        z-index: 25;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 400px;
        max-height: 75%;
        border-right: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -14px 40px rgba(20,30,45,.28);
        transform: translateY(100%);
        transition: transform .25s
    }

    .mapxa-page .sidebar.open {
        transform: translateY(0)
    }

    .mapxa-page .sidebar .tc-close {
        display: grid;display:none;
    }

    .mapxa-page .legend {
        display: none
    }

    .mapxa-page .thon-card {
        left: 12px;
        width: auto
    }

    /* THÔNG TIN XÃ: 5 stat-row xếp 2 cột trên mobile thay vì 1 cột dọc — tiết kiệm chiều cao trong
       sidebar giờ là bottom-sheet có max-height giới hạn. */
    .mapxa-page .stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px
    }

    /* TẠM TẮT 2026-09-17: ẩn hẳn sidebar (thông tin xã) + nút bật/tắt trên mobile theo yêu cầu người
       dùng, chưa rõ ngày bật lại. Đây là 2 rule DUY NHẤT cần xóa/comment để phục hồi — mọi rule
       bottom-sheet phía trên (.sidebar, .sidebar.open, .map-toggle-sidebar gốc, JS toggleSidebar/
       dongSidebar/moSidebar trong MapXa.cshtml) vẫn giữ nguyên y hệt, không đụng tới. */
    .mapxa-page .map-toggle-sidebar {
        display: none
    }
    .mapxa-page .sidebar {
        display: none
    }
}