:root { --primary: #0d47a1; --green-dark: #2e7d32; --green-light: #e8f5e9; --orange-dark: #ef6c00; --orange-light: #fff3e0; --shadow: 0 4px 12px rgba(0,0,0,0.15); }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body { font-family: 'Lexend', sans-serif; animation: fadeIn 1s ease-in; margin: 0; background: #f4f7f6; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .auth-hidden { display: none !important; }
  .subtitle { font-size: 13px; margin-top: 5px; opacity: 0.9; font-style: italic; }
  .ticker-wrapper { width: 100%; overflow: hidden; background: #fff; border-bottom: 1px solid #e0e0e0; padding: 8px 0; position: sticky; top: 0; z-index: 1001; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
  .app-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px auto !important;
    max-width: 1200px !important;
    width: calc(100% - 30px);
}


/* KHI DI CHUỘT: LUNG LINH & BAY BỔNG */
.nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08) !important;
    filter: brightness(1.02);
}
/* Thêm màu sắc riêng cho nút Giới Thiệu khi Active nhìn cho sang */ 
  .nav-btn.active[data-app="priceApp"] { background: var(--green-dark); color: white; }
  .nav-btn.active[data-app="mapApp"] { background: var(--primary); color: white; }
  .nav-btn.active[data-app="errorApp"] { background: var(--orange-dark); color: white; }
  .nav-btn.active[data-app="guideApp"] {background: linear-gradient(135deg, #0d47a1, #009688) !important; color: white !important;}
  .box { background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 10px; border: 1px solid #ddd; }
  .box-header { padding: 12px; text-align: center; font-weight: 700; font-size: 13px; color: white; text-transform: uppercase; }
  .box.md .box-header { background: linear-gradient(to right, #2e7d32, #43a047); }
  .box.cq .box-header { background: linear-gradient(to right, #ef6c00, #fb8c00); }
  .content { padding: 25px; }
  label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 13.5px; color: #444; letter-spacing: -0.2px; }
  /* NÚT QUÉT SIÊU CẤP CHUẨN NI */
label[for="ocr_upload"].main-btn {
    background: linear-gradient(135deg, #1e3c72, #2a5298, #00d2ff) !important;
    background-size: 200% auto !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 10px 20px rgba(30, 60, 114, 0.3) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 50px !important;
    border-radius: 50px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.4s ease !important;
    animation: bluePulse 3s infinite;
}

label[for="ocr_upload"].main-btn:hover {
    background-position: right center !important; /* Hiệu ứng ánh kim chạy qua */
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 210, 255, 0.4) !important;
}

/* Hiệu ứng thở nhẹ của nút nhìn rất sống động */
@keyframes bluePulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 210, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}
  select, input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; background: #fff; }
  .road-box { background: #f8f9fa; padding: 12px; border-radius: 10px; border: 1px solid #eee; margin-bottom: 12px; }
  button.main-btn { width: 100% !important; padding: 15px !important; border: none; border-radius: 10px; font-size: 14px; font-weight: 800; color: white; cursor: pointer; text-transform: uppercase; transition: 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-top: 20px !important; }
  .result { margin-top: 15px; padding: 18px; border-radius: 10px; font-size: 14px; display: none; border-left: 6px solid; line-height: 1.7; animation: fadeInUp 0.4s ease-out; }
  .box.md .result { background: var(--green-light); border-color: var(--green-dark); }
  .box.cq .result { background: var(--orange-light); border-color: var(--orange-dark); }
  .ticker-text { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ticker 25s linear infinite; font-size: 13.5px; font-weight: 600; color: #0d47a1; font-style: italic; }
  @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
  .pa-box { background: white; border: 1px solid #ddd; padding: 8px 12px !important; border-radius: 10px; margin-bottom: 8px; text-align: left; line-height: 1.3 !important; }
  .pa-box b { font-size: 14px; color: #333; display: block; margin-bottom: 2px; }
  .pa-box small { color: #666; display: block; font-size: 12px; }
  .pa-box.road-border { border-left: 5px solid #d32f2f; }
  .pa-box.river-border { border-left: 5px solid #0288d1; }
  .search-wrapper { position: relative; width: 100%; margin-bottom: 5px; }
  .search-input { width: 100%; padding: 12px; border: 1.5px solid #0d47a1; border-radius: 8px; font-size: 15px; outline: none; background: #fff; }
  .search-input:disabled { background: #f0f0f0 !important; cursor: not-allowed; }
 .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    z-index: 999999 !important; /* Phải cực cao để nó hiện đè lên các ô khác */
    border: 1px solid #0d47a1;
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.search-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
    transition: 0.2s;
}

.search-item:hover {
    background-color: #e3f2fd;
    padding-left: 20px; /* Hiệu ứng trượt nhẹ khi di chuột */
    color: #0d47a1;
}
  .search-item strong { color: #d32f2f; }
  .commune-count-badge { background: #e8f0fe; color: #1a73e8; padding: 5px 15px; border-radius: 20px; font-size: 11.5px; font-weight: 700; margin-left: 10px; display: inline-block; vertical-align: middle; cursor: help; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #c2d7fa; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
  .box:hover .commune-count-badge, .commune-count-badge:hover { max-width: 1200px; background: #ffffff; color: #0d47a1; white-space: normal; border-color: #0d47a1; box-shadow: 0 4px 12px rgba(13, 71, 161, 0.15); }
  .commune-list-text { font-weight: 400; font-style: italic; margin-left: 5px; color: #5f6368; }
  .result-box { margin-top: 15px; padding: 15px; border-radius: 10px; font-size: 14px; display: none; border-left: 5px solid; text-align: left; }
  .res-pass { background: #f1f8e9; border-color: #2e7d32; }
  .res-fail { background: #fff5f5; border-color: #d32f2f; }
  .highlight-price { font-size: 20px; font-weight: 800; color: #d32f2f; display: block; text-align: right; margin-top: 10px; border-top: 2px dashed #bbb; padding-top: 10px; }
  .line-item { display: flex; justify-content: space-between; margin-bottom: 6px; border-bottom: 1px dotted #ccc; }
  @media (max-width: 850px) { .container { grid-template-columns: 1fr; } }
.check-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1.5px solid #eceff1;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    margin: 8px 0;
    font-size: 13px;
    font-weight: 600;
}
.check-group:hover {
    border-color: #0d47a1;
    background-color: #f5f9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.check-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #0d47a1;
}
.check-group.warning {
    color: #e65100;
    background: #fff3e0;
    border-color: #ffe0b2;
}
.check-group.warning:hover {
    border-color: #ef6c00;
    background: #fef0db;
}
.check-group.info {
    color: #0d47a1;
    background: #e3f2fd;
    border-color: #bbdefb;
}
.check-group.info:hover {
    border-color: #1565c0;
    background: #daf0ff;
}
.check-group.danger {
    color: #c62828;
    background: #ffebee;
    border-color: #ffcdd2;
}
/* Tùy chỉnh phần footer của kết quả */
  .tt-footer {
    display: block;             /* Để có thể căn giữa */
    text-align: center;        /* Căn giữa chữ */
    font-style: italic;        /* Chữ nghiêng */
    font-size: 11px;           /* Cỡ chữ nhỏ */
    color: #777;               /* Màu xám nhạt */
    margin-top: 15px;          /* Khoảng cách với phần trên */
    padding-top: 10px;         /* Khoảng đệm phía trên */
    border-top: 1px solid rgba(0,0,0,0.05); /* Đường kẻ mờ tách biệt */
  }
  /* --- Biến màu sắc mặc định (Light Mode) --- */
:root { 
  --primary: #0d47a1; 
  --bg: #f4f7f6;
  --box-bg: #ffffff;
  --text-main: #333333;
  --text-sub: #555555;
  --border: #dddddd;
  --input-bg: #ffffff;
  --nav-bg: #ffffff;
  --green-dark: #2e7d32; 
  --green-light: #e8f5e9; 
  --orange-dark: #ef6c00; 
  --orange-light: #fff3e0; 
  --shadow: 0 4px 12px rgba(0,0,0,0.1); 
}

/* --- Biến màu sắc cho Chế độ tối (Dark Mode) --- */
body.dark-mode {
  --bg: #0f111a;             /* Nền tối sâu nhưng có sắc xanh Slate */
  --box-bg: #1a1d27;         /* Nền của Box (phải sáng hơn nền chính) */
  --text-main: #f0f2f5;      /* Chữ gần như trắng để cực kỳ dễ đọc */
  --text-sub: #aab0b8;       /* Chữ chú thích màu xám nhạt */
  --border: #303645;         /* Viền sáng hơn để chia rõ các ô */
  --input-bg: #242936;       /* Nền ô nhập liệu phải khác biệt hoàn toàn */
  --nav-bg: #1a1d27;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --green-light: #162d1c;    /* Xanh lá đậm */
  --orange-light: #332414;   /* Cam đậm */
}
/* Áp dụng chi tiết để các ô nhập liệu "sáng bừng" lên trong đêm */
body.dark-mode input, 
body.dark-mode select {
    background: var(--input-bg) !important;
    border: 1.5px solid var(--border) !important;
    color: #ffffff !important;
    font-weight: 500;
}

body.dark-mode input::placeholder {
    color: #6c757d; /* Placeholder màu xám rõ ràng hơn */
}

body.dark-mode input:focus {
    border-color: #0d6efd !important; /* Khi bấm vào ô sẽ có viền xanh dương rực rỡ */
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

/* Chỉnh các group checkbox (Đường 2, Đất lúa) cho dễ nhìn */
body.dark-mode .check-group {
    background: #1e2433 !important;
    border-color: #3d465c !important;
    color: #e0e6ed !important;
}

body.dark-mode .check-group.warning { background: #33210e !important; color: #ff9800 !important; }
body.dark-mode .check-group.info { background: #0e1e33 !important; color: #00a2ff !important; }
body.dark-mode .check-group.danger { background: #331414 !important; color: #ff5252 !important; }

/* Các nút điều hướng đang bị đen thì cho nó sáng lên */
body.dark-mode .nav-btn {
    background: #242936;
    color: #aab0b8;
}

/* Tinh chỉnh kết quả tính toán */
body.dark-mode .result-box, 
body.dark-mode .result {
    color: var(--text-main);
    border: 1px solid var(--border);
}
/* Áp dụng các biến vào toàn bộ App */
body { background: var(--bg); color: var(--text-main); transition: 0.3s ease; }
.box { background: var(--box-bg); border-color: var(--border); box-shadow: var(--shadow); }
.content { padding: 25px; color: var(--text-main); }
label { color: var(--text-main); }
select, input { background: var(--input-bg); border-color: var(--border); color: var(--text-main); }
.app-nav, .ticker-wrapper { background: var(--nav-bg); border-bottom: 1px solid var(--border); }
.road-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
.search-results { background: var(--box-bg); border-color: var(--border); }
.search-item { color: var(--text-main); border-bottom: 1px solid var(--border); }
.search-item:hover { background: rgba(13, 71, 161, 0.2); }
.pa-box { background: var(--input-bg); border: 1px solid var(--border); }
.pa-box b { color: var(--text-main); }

/* Nút gạt Dark Mode (Floating Button hoặc trong Header) */
.dark-toggle-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d47a1, #00c6ff);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000; /* Luôn trên cùng */
    box-shadow: 0 10px 25px rgba(0,106,255,0.4);
    font-size: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dark-toggle-btn:hover { transform: scale(1.1); }
/* Làm nổi bật thanh tiêu đề ĐỊNH VỊ */
/* Đổi tiêu đề Định vị từ Tím sang Xanh Navy cực ngầu 😂 */
/* Đổi màu tiêu đề Định vị sang Xanh chuyên nghiệp 😂 */
.box.map .box-header {
    background: linear-gradient(to right, #1565c0, #0d47a1) !important; /* Xanh đậm sang trọng */
    color: white !important;
    padding: 15px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

/* Bo viền box định vị cho mượt */
.box.map {
    border: 1px solid #bbdefb !important;
    border-top: 3px solid #0d47a1 !important; /* Thanh bar trên cùng màu xanh đậm */
}

/* Chỉnh các ô Input của Tab định vị cho sắc sảo */
#mapApp input {
    border: 1px solid #1565c0 !important;
    border-radius: 8px !important;
}

#mapApp label {
    color: #1565c0 !important; /* Chữ Tọa độ X, Y thành màu xanh */
}

/* Đảm bảo khung Map luôn có viền rõ ràng */
.box.map {
    border-top: 3px solid #6a1b9a !important;
}
/* Tùy chỉnh dòng công thức nội suy nhìn cho Pro 😂 */
.formula-label {
    display: block;
    background: #fff9c4;        /* Màu nền vàng nhạt (Highlight) */
    color: #5d4037;             /* Chữ màu nâu đậm cho dễ nhìn */
    padding: 10px 15px;
    border-radius: 8px;
    border-left: 5px solid #fbc02d; /* Thanh chặn bên trái màu vàng rực */
    font-size: 12.5px;
    margin-bottom: 15px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* Hiệu ứng đổ bóng nhẹ */
    line-height: 1.4;
}

.formula-label i {
    opacity: 0.9;
}

.formula-label b {
    color: #d32f2f; /* Highlight các con số trong công thức thành màu đỏ cho chất kkk */
    font-size: 13.5px;
}
/* --- Cấu trúc cho ô tìm kiếm có nút X --- */
.search-wrapper {
    position: relative; /* Bắt buộc để nút X căn theo ô này */
    width: 100%;
}

.search-input {
    padding-right: 35px !important; /* Dành chỗ cho nút X không đè lên chữ */
}

.clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    display: none; /* Mặc định ẩn, chỉ hiện khi có chữ */
    z-index: 10;
    padding: 5px;
    font-size: 16px;
    transition: 0.2s;
}

.clear-search:hover {
    color: #d32f2f; /* Di chuột vào hiện màu đỏ */
}

/* Đảm bảo ô chọn đoạn đường (Select) rộng rãi dễ nhìn */
select {
    white-space: normal !important;
    height: auto !important;
    min-height: 40px;
    line-height: 1.4;
    padding: 8px !important;
}
/* Làm cho ô chọn đoạn đường tự động xuống dòng và co giãn */
.road-box select {
    display: block;
    width: 100%;
    height: auto !important;       /* Cho phép chiều cao tự tăng */
    min-height: 45px;
    padding: 10px 30px 10px 12px !important; /* Chừa khoảng trống cho mũi tên */
    white-space: normal !important; /* QUAN TRỌNG: Cho phép chữ xuống dòng */
    line-height: 1.5;
    word-wrap: break-word;         /* Ngắt chữ khi quá dài */
    overflow: hidden;
    appearance: none;              /* Xóa bỏ style mặc định của hệ thống */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    border: 1.5px solid #0d47a1;
    border-radius: 8px;
    background-color: #fff;
}

/* Style cho các option bên trong khi xổ xuống (chỉ tác dụng trên một số trình duyệt) */
.road-box select option {
    white-space: normal;
    padding: 10px;
}
/* Hiệu ứng thanh quét AI */
.scan-container { position: relative; width: 100%; overflow: hidden; border-radius: 10px; margin: 10px 0; }
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: #00d2ff; box-shadow: 0 0 15px #00d2ff;
    animation: scanning 2s infinite; z-index: 10;
}
@keyframes scanning { 0% { top: 0; } 100% { top: 100%; } }
#img_scan_preview { width: 100%; display: block; filter: contrast(110%); }
#ocr_preview {
    width: 100%;
    filter: grayscale(100%) contrast(150%); /* Giúp AI nhìn rõ hơn */
}
/* Lớp lọc giúp AI tập trung vào nét chữ */
.ocr-filter { filter: grayscale(1) contrast(2) brightness(1.2); }

/* 1. Ép cái lớp nền của Popup đậm đặc hơn để che giấu "người cũ" ở dưới nòng nòng Ni kkk */
.swal2-backdrop-show {
    backdrop-filter: blur(5px) !important; /* Làm mờ luôn cái nền phía sau kkk */
    background: rgba(0, 0, 0, 0.6) !important; /* Cho nó tối màu xíu là che sạch nòng kkk */
}
/* 2. Ép cái Box định vị không được phép "lòi" viền ra ngoài khi có popup */
.pa-box, .road-box, .box {
    backface-visibility: hidden;
    transform: translateZ(0); /* Ép card nằm đúng lớp kkk */
}
/* 3. Sửa cái lỗi z-index làm cái bóng của ô input đâm xuyên popup nà sếp 😂 */
.search-wrapper input:focus {
    z-index: 1; /* Hàng cũ thì nằm dưới Ni kkk */
}
/* --- PHONG CÁCH THANH THÔNG BÁO MỎNG CHUẨN APP --- */
#smart-notice-bar {
    max-width: 1200px !important;
    margin: 5px auto 15px auto !important; /* Tạo khoảng hở hẹp hơn */
    width: calc(100% - 30px);
}

.notice-flex {
    display: flex;
    align-items: center;
    background: #fff4f4; /* Màu đỏ hồng rất nhạt */
    border: 1px solid #ffcdd2;
    border-radius: 50px; /* Bo tròn hoàn toàn cho đẹp mắt */
    padding: 6px 15px;
    cursor: pointer;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.05);
    transition: 0.3s;
}

.notice-flex:hover {
    background: #ffebee;
    transform: translateY(-1px);
}

.notice-flex .blink {
    color: #d32f2f;
    font-size: 14px;
    animation: alert-blink 2s infinite; /* Hiệu ứng chớp nhẹ gây chú ý */
}

.notice-text {
    flex: 1;
    font-size: 11.5px; /* Chữ nhỏ tinh tế */
    color: #555;
    white-space: nowrap; /* Không cho xuống hàng để giữ độ mỏng */
    overflow: hidden;
    text-overflow: ellipsis; /* Nếu dài quá sẽ hiện dấu 3 chấm */
}

.notice-text b {
    color: #d32f2f;
}

.notice-flex .fa-chevron-right {
    font-size: 10px;
    color: #bbb;
}

/* Hiệu ứng chớp nhẹ nhã nhặn */
@keyframes alert-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Trên mobile cực nhỏ, nó sẽ càng mỏng hơn */
@media (max-width: 600px) {
    .notice-text { font-size: 10.5px; }
}
/* --- PHONG CÁCH NHẬT KÝ VIÊN THUỐC (PILLS) --- */
#history_section {
    max-width: 1200px;
    margin: 5px auto !important; /* Thu hẹp lề trên dưới cực độ */
    width: calc(100% - 20px);
    background: transparent; /* Bỏ nền cho nhẹ nhàng */
    border: none;
    padding: 0;
}

.history-header {
    font-size: 10px; /* Chữ siêu nhỏ */
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

#scan_history_list {
    display: flex;
    flex-wrap: wrap; /* Tự xếp hàng ngang */
    gap: 5px; /* Khoảng cách giữa các nhãn cực nhỏ */
}

.mini-tag {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 2px 8px; /* Padding cực hẹp */
    border-radius: 4px; /* Bo góc vuông vắn hành chính */
    cursor: pointer;
    transition: 0.2s;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.mini-tag:hover {
    border-color: #1565c0;
    background: #f1f5f9;
}

.mini-tag span {
    font-size: 11.5px; /* Chữ nhỏ vừa đủ đọc */
    font-weight: 600;
    color: #334155;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-tag i {
    font-size: 9px;
}
.mini-tag:active {
    transform: scale(0.9) !important; /* Khi nhấn tay vào nhãn sẽ lún nhẹ xuống */
    background-color: #cbd5e1;
}
/* --- BỐ CỤC CHUYÊN BIỆT CHO BẢNG THỐNG KÊ TỔNG HỢP --- */


/* Các thẻ số liệu nhỏ bên trái */
.stats-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.stat-label { font-size: 9px; font-weight: 800; color: #64748b; text-transform: uppercase; }
.stat-value { font-size: 22px; font-weight: 800; margin-top: 3px; }
.section-title { font-weight: 800; font-size: 11px; color: #1a237e; text-transform: uppercase; margin-bottom: 10px; }

/* Thanh cuộn danh sách xã bên trái */
.scroll-area-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Nhãn bản đồ hiện phía trên bản đồ */
.floating-map-label {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: white;
    border: 1.5px solid #1565c0;
    padding: 8px 15px;
    border-radius: 8px;
    color: #1565c0;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Trên di động thì bản đồ nhảy xuống dưới */
@media (max-width: 992px) {
    .admin-dashboard-flex { flex-direction: column; }
    .stats-side-panel { flex: none; width: 100%; border-right: none; border-bottom: 1px solid #eee; padding-bottom: 20px; padding-right: 0; }
}
/* --- 1. TIÊU ĐỀ (HEADER) CHUẨN LỀ --- */
header { 
    background: #1565c0 !important; 
    color: white; 
    padding: 20px !important; 
    text-align: center; 
    border-radius: 0 0 15px 15px;
}
header h1 { font-size: 20px !important; margin: 0; text-transform: uppercase; }
/* ÉP TOÀN BỘ CẤU TRÚC PHẢI THẲNG HÀNG 1200px */
header, .app-nav, #smart-notice-bar, #history_section, .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 30px); /* Lề mỗi bên 15px cho di động */
}

/* Căn chỉnh header màu xanh đậm đặc trưng */
header {
    background: #1565c0 !important;
    padding: 15px 20px !important;
    border-radius: 0 0 12px 12px;
    text-align: center;
}

/* --- 2. THANH MENU (APP NAV) - TỰ ĐỘNG CHIA ĐỀU --- */
.app-nav, #global-warning, .container, #history_section, #smart-notice-bar {
    max-width: 1200px !important; 
    width: calc(100% - 30px); 
    margin: 15px auto !important;
}

.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 58px !important; /* Chiều cao tinh gọn */
    border-radius: 10px !important;
    cursor: pointer;
    border: 2px solid transparent !important; /* Viền để không bị lệch khung */
    transition: all 0.3s ease;
    opacity: 1 !important; /* QUAN TRỌNG: Hiện rõ 100% không để mờ */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    text-decoration: none;
    line-height: 1.1;
}
/* ĐỊNH DẠNG CHỮ TO RÕ */
.nav-btn span, .nav-btn b {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-top: 3px;
    display: block;
}
.nav-btn span { font-size: 13.5px !important; font-weight: 800 !important; line-height: 1; }
.nav-btn i { font-size: 18px !important; margin-bottom: 4px; }

/* NÚT 1: GIÁ ĐẤT - Xanh bạc hà đậm */
.nav-btn[data-app="priceApp"] { 
    background: #e8f5e9 !important; 
    color: #2e7d32 !important; 
}
/* NÚT 2: TRỢ LÝ AI - Xanh tím oải hương */
.nav-btn[onclick*="notebooklm"] { 
    background: #e8eaf6 !important; 
    color: #1a237e !important; 
}
/* NÚT 3: ĐỊNH VỊ - Xanh nước biển nhẹ */
.nav-btn[data-app="mapApp"] { 
    background: #e1f5fe !important; 
    color: #0d47a1 !important; 
}
/* NÚT 4: SAI SỐ - Cam san hô */
.nav-btn[data-app="errorApp"] { 
    background: #fff3e0 !important; 
    color: #e65100 !important; 
}
/* NÚT 5: GIỚI THIỆU - Xám Slate hành chính */
.nav-btn[data-app="guideApp"] { 
    background: #f5f7f9 !important; 
    color: #455a64 !important; 
}
/* NÚT THỐNG KÊ (Admin) */
.nav-btn[data-app="reportApp"] { 
    background: #f1f4ff !important; 
    color: #3949ab !important; 
}
/* KHI NÚT ĐANG ĐƯỢC CHỌN (ACTIVE) */
.nav-btn.active {
    background: #ffffff !important; 
    border: 2px solid currentColor !important; /* Viền hiện theo màu của từng nút */
    transform: scale(1.03);
    z-index: 5;
}

/* --- 3. BỐ CỤC CHIA CỘT CHO BẢNG THỐNG KÊ (HÌNH ANH MUỐN) --- */
.admin-dashboard-flex { 
    display: flex; 
    gap: 20px; 
    align-items: stretch; 
    width: 100%; 
}

/* Cột số liệu bên trái: 350px */
.stats-side-panel { 
    flex: 0 0 350px; 
}

/* Cột bản đồ bên phải: Tự dãn hết cỡ */
.map-side-panel { 
    flex: 1; 
    min-height: 500px; 
    border-radius: 12px; 
    border: 1px solid #ddd; 
    overflow: hidden;
    background: #eee;
    position: relative;
}

/* Fix grid cho các trang khác (Giá đất, Sai số) */
.container { display: none; grid-template-columns: 1fr 1fr; gap: 20px; }
.container.active { display: grid; }
.box.full-width { grid-column: 1 / 3 !important; width: 100% !important; }
/* --- TRANG TRÍ BỘ CHỌN LỚP NỀN BẢN ĐỒ --- */
.leaflet-control-layers {
    border-radius: 8px !important;
    border: 2px solid #1565c0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    padding: 10px !important;
    margin-right: 15px !important;
    margin-bottom: 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

.leaflet-control-layers-base label {
    margin: 8px 0 !important;
    cursor: pointer;
    font-family: 'Lexend', sans-serif;
    font-size: 11px;
    color: #1565c0;
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.leaflet-control-layers-base input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer;
}