/* Hiệu ứng nhấp nháy đổi màu */
      @keyframes blink-colors {
          0% { color: #ff0000; }    /* Đỏ 🔴 */
          33% { color: #2563eb; }   /* Xanh dương 🔵 */
          66% { color: #f59e0b; }   /* Vàng cam 🟠 */
          100% { color: #ff0000; }  /* Quay lại đỏ */
      }

      /* Lớp CSS để áp dụng hiệu ứng */
      .highlight-procedure {
          font-weight: 900;          /* Siêu đậm */
          text-transform: uppercase; /* Tự động viết HOA 🔠 */
          animation: blink-colors 0.8s infinite; /* Nhấp nháy liên tục */
          font-size: 1.5rem;         /* Cho chữ to hơn một chút */
          display: inline-block;
      }
      
      /* CSS CHUNG VÀ FONT CHỮ */
        body { 
            /* Đảm bảo font chữ Times New Roman và tăng kích thước cơ sở 7% */
            font-family: "Times New Roman", Times, serif; 
            font-size: 107%; 
            background-color: #f0f0f0;
            padding: 0;
            text-align: center;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
/* 1. Cập nhật bảng màu tổng thể sang Xanh dương và Cam */
:root {
  --blue-deep: #1e3a8a;   /* Xanh dương đậm cho chữ và điểm nhấn mạnh */
  --blue-mid: #3b82f6;    /* Xanh dương tươi cho viền và hiệu ứng */
  --blue-light: #eff6ff;  /* Xanh dương nhạt cho nền h1 */
  --blue-border: #bfdbfe; /* Xanh dương nhạt viền dưới */
  --orange-text: #ea580c; /* Cam đậm cho chữ Trung tâm */
}

h1 {
    color: var(--blue-deep); 
    border-bottom: 5px solid var(--blue-mid); 
    /* Hiệu ứng gradient nền xanh dương nhạt */
    background: linear-gradient(to bottom, #ffffff, var(--blue-light));
    padding: 10px; 
    border-radius: 8px 8px 0 0; 
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); /* Bóng đổ màu xanh */
    margin-top: 0;
    margin-bottom: 0px; 
    font-size: 1.07em; 
    border: 1px solid var(--blue-border); 
    border-bottom-width: 5px; 
}

.header-container {
    position: relative; /* Đặt làm gốc tọa độ cho viền ảo */
    display: flex;
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    padding: 8px 15px;
    text-align: center; 
    border-radius: 12px;     
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
    overflow: hidden; /* Giữ cho dải sáng không tràn ra ngoài góc bo */
    background-color: white; /* Màu nền dự phòng */
}

/* Định nghĩa chuyển động xoay tròn cho ánh sáng */
@keyframes borderLight {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.header-container::before {
    content: "";
    position: absolute;
    width: 250%; 
    height: 250%;
    /* Vẽ 2 tia sáng xanh đối xứng nhau */
    background: conic-gradient(
        transparent 0deg,
        transparent 70deg,
        #93c5fd 85deg, 
        #2563eb 90deg, 
        transparent 95deg,
        transparent 250deg,
        #93c5fd 265deg, 
        #2563eb 270deg, 
        transparent 275deg,
        transparent 360deg
    );
    /* Tăng thời gian lên 3s để chạy chậm lại và dùng cubic-bezier để tạo nhịp điệu */
    animation: borderBounce 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
    z-index: 0;
}
.header-container::after {
    content: "";
    position: absolute;
    inset: 4px; /* <--- CHÚ Ý DÒNG NÀY */
    background-color: white;
    border-radius: 10px; /* Góc bo nhỏ hơn khối bên ngoài một chút */
    z-index: 0;
}
/* Khung hình chuyển động của ánh sáng */
@keyframes running-light {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
/* 1. Định nghĩa chuỗi hiệu ứng xoay 3D */
@keyframes spin3D {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* 1. Tăng logo thêm 15% (từ 72px lên khoảng 85px) và đẩy lên lớp trên cùng */
.header-logo {
    height: 85px; 
    width: auto;
    flex-shrink: 0;
    animation: spin3D 4s linear infinite;
    transform-style: preserve-3d; 
    position: relative; /* Bắt buộc để nổi lên trên lớp viền */
    z-index: 1;
}
/* 5. Đảm bảo khối chữ cũng nổi lên trên tấm nền trắng */
.header-text-block {
    position: relative; 
    z-index: 1;
    text-align: center; 
}

/* 3. Cập nhật chữ sang màu Cam */
.header-title {
    font-size: 1.45rem; 
    font-weight: bold;
    color: var(--orange-text); /* Đổi sang màu cam */
    line-height: 1.1; 
}

.header-subtitle {
    font-size: 1.45rem; 
    font-weight: bold;
    color: var(--orange-text); /* Đổi sang màu cam */
    line-height: 1.3;
}
/* Thu nhỏ chữ của khối tiêu đề bên TRONG màn hình đăng nhập để vừa khung */
.login-header-clone .queue-title-block {
    font-size: 1.15rem; /* Thu nhỏ từ 1.55rem xuống 1.15rem */
    padding: 10px 5px;  /* Căn chỉnh lại lề cho cân đối */
    margin-bottom: 0 !important; 
}


.queue-title-block {
    font-size: 1.55rem; 
    margin-top: 10px; 
    margin-bottom: 25px; 
    padding: 10px; 
    background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid)); 
    border-radius: 8px; 
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3); 
    line-height: 1.4;
    
    /* CẬP NHẬT PHẦN VIỀN TẠI ĐÂY */
    border: 2px solid #93c5fd; /* Viền mỏng, sáng màu bao quanh 3 cạnh trên, trái, phải */
    border-bottom: 8px solid #1e3a8a; /* Viền dưới cực dày (8px) và đậm màu để ngăn cách khối */
}

.shimmer-text {
    /* Chuyển dải màu lấp lánh sang trắng và vàng nhạt để rực rỡ trên nền tối */
    background: linear-gradient(to right, #ffffff 0%, #fef08a 50%, #ffffff 100%);
    background-size: 200% auto; 
    color: #ffffff; 
    -webkit-background-clip: text;
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    animation: shine 3s linear infinite alternate;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Thêm bóng cho chữ */
}
        @keyframes shine { to { background-position: 200% center; } }

        /* CSS CÁC NÚT CHỌN THỦ TỤC (GIAO DIỆN MỚI) */
#procedureSelectionContainer { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    /* Thu hẹp khoảng cách phía trên */
    margin: 5px 0 20px 0; 
    padding: 5px 10px;
}
/* CSS cho dòng chữ Hướng dẫn chọn thủ tục */
#procedureSelectionContainer h2 {
    font-family: Calibri, sans-serif; /* Đổi sang phông Calibri */
    font-size: 2.3rem; 
    margin-top: 15px;
    margin-bottom: 15px; 
    text-transform: uppercase;
    font-weight: 900;
    
    /* Tạo dải màu nền: Xanh đậm -> Xanh sáng (vệt sáng) -> Xanh đậm */
    background: linear-gradient(to right, var(--blue-deep) 20%, #f57811 50%, var(--blue-deep) 80%);
    background-size: 200% auto;
    
    /* Các lệnh quan trọng để cắt nền theo chữ */
    color: var(--blue-deep); /* Màu dự phòng nếu trình duyệt không hỗ trợ */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Làm trong suốt ruột chữ để lộ nền sáng bên dưới */
    
    /* Dùng animation shine có sẵn, thêm 'alternate' để ánh sáng dội qua dội lại */
    animation: shine 2.5s linear infinite alternate;
}
@keyframes borderBounce {
    0% { 
        transform: rotate(-60deg); /* Mở rộng góc chạy ra một chút */
        filter: brightness(0.8); /* Hơi tối dịu khi ở xa */
    }
    100% { 
        transform: rotate(60deg); /* Điểm gặp nhau ở góc */
        filter: brightness(2.5) drop-shadow(0 0 20px #ffffff); /* Bùng sáng chói lòa khi chạm */
    }
}       
/* Update the button container and buttons */
.proc-btn {
    display: flex;
    align-items: center;
    background: linear-gradient(145deg, #ffffff, #f0f4f8); /* Thêm gradient để tạo độ nổi */
    border: 2px solid #e2e8f0;
    border-radius: 40px; /* Bo góc tròn hẳn như viên thuốc/bong bóng */
    padding: 15px; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05), inset 0 -3px 5px rgba(0,0,0,0.02); /* Đổ bóng ngoài và bóng trong */
    text-align: left;
    width: 100%;
    
    /* Hiệu ứng động nổi nhẹ */
    animation: float-bubble 4s ease-in-out infinite;
}

/* Thêm độ lệch nhịp animation cho các nút để trông tự nhiên hơn */
.proc-btn:nth-child(1) { animation-delay: 0s; }
.proc-btn:nth-child(2) { animation-delay: 0.5s; }
.proc-btn:nth-child(3) { animation-delay: 1s; }

@keyframes float-bubble {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); } /* Nổi lên một chút */
    100% { transform: translateY(0px); }
}

.proc-btn:hover { 
    background: linear-gradient(145deg, #e6f2ff, #d0e4ff);
    border-color: #3b82f6;
    transform: scale(1.02) translateY(-2px); /* Phóng to nhẹ khi chỉ chuột */
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2), inset 0 -3px 5px rgba(0,0,0,0.05);
    animation-play-state: paused; /* Tạm dừng hiệu ứng nổi khi đang trỏ chuột */
}

/* Hiệu ứng tỏa sáng nhịp nhàng (Pulse Glow) cho các con số */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(234, 88, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* 1. Thu nhỏ vòng tròn chứa số */
.proc-number {
    /* Giữ nguyên màu sắc và hiệu ứng ánh sáng */
    background: linear-gradient(135deg, #f97316, var(--orange-text)); 
    color: white; 
    
    /* Thu nhỏ kích thước và cỡ chữ */
    font-size: 1.6rem; /* Giảm từ 2rem xuống 1.6rem */
    font-weight: 900; 
    width: 50px;       /* Giảm từ 65px xuống 50px */
    height: 50px;      
    
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    margin-right: 20px;
    flex-shrink: 0;
    
    border: 2px solid #ffffff; /* Giảm độ dày viền trắng xuống một chút */
    animation: pulse-glow 2s infinite; 
}

/* 2. Phóng to và đồng bộ phông chữ cho tên thủ tục */
.proc-text {
    font-size: 1.9rem; /* Tăng từ 1.5rem lên 1.75rem */
    font-weight: 900;   /* Chữ đậm nét hơn */
    color: var(--blue-deep); /* Dùng màu xanh dương đậm của hệ thống */
    font-family: Calibri, sans-serif; /* Chuyển sang phông chữ hiện đại */
    line-height: 1.3;
}

        /* Nút chung */
        #openManualInputButton, #processButton, #manualProcessButton, #backToProceduresBtn {
            padding: 15px 20px; border: none; border-radius: 5px; font-size: 19.26px; 
            font-weight: bold; cursor: pointer; transition: background-color 0.3s;
            margin-bottom: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* Nút quay lại chọn thủ tục */
        #backToProceduresBtn {
            background-color: #6c757d; color: white; margin-top: 10px; width: auto; font-size: 1rem; padding: 10px 20px;
        }
        #backToProceduresBtn:hover { background-color: #5a6268; }

        /* CSS Máy Quét */
        #reader { width: 100%; max-width: 400px; margin: 20px auto; border: 3px solid #5cb85c; border-radius: 5px; overflow: hidden; }
        #processButton { background-color: #5cb85c; color: white; width: 100%; margin: 15px 0; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        
/* 1. Khung bên ngoài: Thiết lập nền đen hoàn toàn */
#scanner-ui-container {
    position: relative;
    width: 100%;
    max-width: 350px; 
    min-height: 210px; 
    margin: 12px auto;
    border-radius: 10px;
    overflow: hidden;
    background-color: #000000; /* Đổi thành đen tuyền 🖤 */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); 
}

/* 1. Đảm bảo ảnh thẻ căn cước đứng yên và nằm GIỮA khung */
.scanner-cutout {
    width: 330px; 
    height: 155px; 
    margin: 42px auto 0 auto;
    position: relative;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8); 
    border-radius: 11px;
    z-index: 11;
    overflow: hidden;
    background-image: url('https://i.postimg.cc/Pqz73kF8/Noi-dung-doan-van-ban-cua-ban-(5).gif');
    background-repeat: no-repeat;
    background-size: contain; 
    background-position: center; /* 🎯 THÊM DÒNG NÀY ĐỂ CĂN GIỮA ẢNH */
}

/* 1. Thiết lập lại vị trí và xoay mũi tên */
.scan-light-arrow {
    position: absolute;
    /* Căn giữa theo chiều ngang */
    left: 50%;
    /* Xoay mũi tên 90 độ để trỏ xuống dưới, đồng thời giữ nó ở chính giữa */
    transform: translateX(-50%) rotate(90deg);
    
    color: #00ff00; /* Màu xanh lá Neon 🟢 */
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -2px; 
    text-shadow: 0 0 10px #00ff00, 0 0 25px #00ff00; 
    
    /* Gọi hiệu ứng chạy dọc (tên mới: arrow-flow-down) */
    animation: arrow-flow-down 4s linear infinite; 
    opacity: 0; 
    z-index: 12;
}

/* Vẫn giữ nguyên ký tự mũi tên kép */
.scan-light-arrow::after {
    content: "»»"; 
}

/* 2. Kịch bản chuyển động trượt dọc từ TRÊN xuống DƯỚI */
@keyframes arrow-flow-down {
    /* Bắt đầu ở phía trên khung (ẩn) */
    0% { top: -15%; opacity: 0; }
    /* Hiện rõ khi trượt vào giữa */
    20% { opacity: 1; }
    80% { opacity: 1; }
    /* Mờ dần và kết thúc ở dưới đáy khung */
    100% { top: 90%; opacity: 0; }
}

/* Hiệu ứng staggered (bậc thang) để tạo sự liên tục cho nhiều mũi tên */
.arrow-1 { animation-delay: 0s; }
.arrow-2 { animation-delay: 2s; }
.arrow-3 { animation-delay: 4s; }





        #reader {
            width: 100%;
            border: none;
            min-height: 210px; 
        }

        /* LỚP PHỦ MỜ BÊN NGOÀI & VÙNG SÁNG TRUNG TÂM */
        #scanner-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            pointer-events: none;
            overflow: hidden;
        }



        /* 4 Góc định vị (Cho to ra một chút để cân đối với ô quét mới) */
        .scan-bracket {
            position: absolute;
            width: 40px; 
            height: 40px;
            border-color: #ffffff; 
            border-style: solid;
        }
        .top-left { top: -2px; left: -2px; border-width: 4px 0 0 4px; border-top-left-radius: 16px;}
        .top-right { top: -2px; right: -2px; border-width: 4px 4px 0 0; border-top-right-radius: 16px;}
        .bottom-left { bottom: -2px; left: -2px; border-width: 0 0 4px 4px; border-bottom-left-radius: 16px;}
        .bottom-right { bottom: -2px; right: -2px; border-width: 0 4px 4px 0; border-bottom-right-radius: 16px;}

/* Kịch bản chuyển động trượt ngang */
@keyframes arrow-sweep {
    0% { left: -10%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 85%; opacity: 0; }
}

        
        /* Khối nhập thủ công */
        .manual-input-container { display: flex; gap: 10px; margin-top: 15px; margin-bottom: 5px; padding: 0 10px; align-items: center; justify-content: center; position: relative; }
        .input-wrapper { position: relative; flex-grow: 1; max-width: 450px; display: flex; }
        .manual-input-container input { width: 100%; padding-right: 35px; box-sizing: border-box; height: 40px; border: 1px solid #ccc; border-radius: 4px; font-size: 1.177rem; text-align: center; }
        
#clearManualInputButton {
    /* Các thuộc tính cũ giữ nguyên, chỉ chỉnh font-size */
    font-size: 1.9rem !important; /* Tăng kích thước lên mức dễ thấy nhất */
    color: #dc3545 !important;   /* Màu đỏ nổi bật */
    font-weight: 750 !important;  /* Độ dày tối đa */
    padding: 0 12px;             /* Nới rộng vùng bấm */
}
        .manual-input-container button { padding: 10px 15px; background-color: #f0ad4e; color: white; font-weight: bold; border-radius: 4px; font-size: 1.177rem; white-space: nowrap; border: none;}
        
        /* Bàn phím số */
        .keypad-container { display: flex; flex-wrap: nowrap; justify-content: center; gap: 5px; max-width: 600px; margin: 5px auto 20px auto; padding: 0 10px; }
        .keypad-button { flex-grow: 1; flex-basis: 0; height: 45px; line-height: 45px; text-align: center; font-size: 1.3rem; font-weight: bold; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1); user-select: none; }
        .keypad-button:active { background-color: #ddd; box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset; }

        /* Autocomplete */
        .autocomplete-items { position: absolute; border: 1px solid #999; border-bottom: none; border-top: 1px solid #999; z-index: 999; bottom: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto; background-color: #f1f1f1; box-shadow: 0 -4px 10px rgba(0,0,0,0.2); text-align: left; }
        .autocomplete-items div { padding: 12px; cursor: pointer; border-bottom: 1px solid #ccc; background-color: #f1f1f1; font-size: 1.1rem; color: #000; }
        .autocomplete-items div:hover { background-color: #dcdcdc; }

        #openManualInputButton { background-color: #f0ad4e; color: white; width: auto; display: inline-block; white-space: nowrap; min-width: 300px; font-size: 20.150px; padding: 12px 30px !important; font-family: "Times New Roman", Times, serif !important; font-weight: 900; }
        #openManualInputButton.return-button-style { background: linear-gradient(145deg, #1abc9c, #16a085) !important; color: white !important; box-shadow: 0 5px 0 #0d7966, 0 6px 10px rgba(0, 0, 0, 0.3); }

        /* Các hiệu ứng hiển thị */
        #statusMessage { padding: 10px; margin-top: 10px; border-radius: 5px; text-align: center; opacity: 0; height: 0; overflow: hidden; transition: opacity 0.5s, height 0.5s; }
        .hidden { display: none !important; }
        .scanner-buffer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; z-index: -1; }
        
@keyframes color-pulse-scan { 
    0% { 
        color: #ffffff; 
        background-color: #28a745; /* Xanh lá tươi 🟢 */
    } 
    50% { 
        color: #ffffff; 
        background-color: #1e7e34; /* Xanh lá đậm hơn để tạo nhịp 🟢 */
        transform: scale(1.02);    /* Nút to lên một chút để gây chú ý */
    } 
    100% { 
        color: #ffffff; 
        background-color: #28a745; 
    } 
}
        #instructionText { font-size: 1.284rem !important; font-weight: bold !important; margin-top: 5px; padding: 5px; animation: color-pulse-scan 1s infinite; display: block; background-color: transparent !important; }
        #manualProcessButton:not(:disabled) { animation: color-pulse-scan 1s infinite; color: white; }

        /* Nút góc trên */
        #fullscreenBtn, #reloadBtn { position: fixed; top: 10px; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); color: white; border: 2px solid white; border-radius: 5px; width: 40px; height: 40px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s;}
        #fullscreenBtn { right: 10px; }
        #reloadBtn { right: 60px; font-weight: bold;}
        #fullscreenBtn:hover { transform: scale(1.1); }
        #reloadBtn:hover { transform: rotate(180deg); }
        
.scanner-text-overlay {
    position: absolute;
    top: 12px; /* Giảm từ 25px xuống 12px để đẩy chữ lên sát mép trên 🔝 */
    left: 0; 
    right: 0;
            text-align: center;
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: bold;
            text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.8); 
            z-index: 20; 
            padding: 0 15px;
        } 
/* --- GIAO DIỆN ĐĂNG NHẬP (TRANG TRÍ LẠI) --- */
.login-wrapper {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    /* Dùng nền gradient xanh nhạt như h1 */
    background: linear-gradient(135deg, #ffffff, var(--blue-light));
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; overflow-y: auto; /* Cho phép cuộn nếu màn hình quá nhỏ */
    padding: 20px;
}

.login-box.decorative-box {
    background-color: white;
    padding: 0; /* Bỏ padding ngoài để header clone nằm sát */
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(30, 58, 138, 0.25); /* Bóng đổ sâu hơn cho nổi bật */
    width: 100%; max-width: 550px; /* To ra một chút để chứa header clone */
    text-align: center;
    overflow: hidden; /* Bo góc khối */
    border: 1px solid var(--blue-border);
}

/* Style cho khối header nhân bản bên trong khối đăng nhập */
.login-header-clone {
    margin: 0; padding: 15px;
    background-color: #ffffff;
    font-size: inherit; font-weight: inherit;
    border-bottom: none;
}
/* Ép kích thước logo clone cho gọn gàng */
.login-header-clone .header-logo { height: 75px; }

/* Đường viền ngăn cách giữa header và form giống như bên trong */
.login-separator-border {
    margin-bottom: 0 !important; /* Đẩy sát khu vực form */
    margin-top: 10px !important;
    border-bottom: 8px solid #1e3a8a !important; /* Viền dưới cực dày màu xanh đậm */
}

/* Khu vực chứa form bên dưới dải phân cách */
.login-form-area {
    padding: 30px 40px;
    background-color: #f8fafc; /* Nền hơi xám nhạt để phân biệt khối */
}

/* Cách điệu các ô nhập liệu giống form nhập căn cước */
.login-input-group { margin-bottom: 20px; position: relative; text-align: left; }
.login-input-group input {
    width: 100%; height: 45px;
    padding: 12px 15px; padding-right: 40px; /* Chừa chỗ cho con mắt */
    border: 2px solid var(--blue-border); /* Viền đậm hơn giống CCCD input */
    border-radius: 6px; font-size: 1.1rem;
    box-sizing: border-box; transition: border-color 0.3s;
    background-color: white;
}
.login-input-group input:focus {
    border-color: var(--blue-mid); outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.password-wrapper { position: relative; display: flex; align-items: center; }
/* Con mắt cách điệu sang màu xanh */
.toggle-password.decorative-eye {
    position: absolute; right: 10px;
    background: none; border: none; font-size: 1.3rem;
    cursor: pointer; color: var(--blue-mid); z-index: 10;
}

/* Checkbox duy trì */
.remember-container {
    display: flex; align-items: center; margin-bottom: 25px;
    text-align: left; color: var(--blue-deep); font-size: 1.1rem; cursor: pointer;
}
.remember-container input[type="checkbox"] {
    margin-right: 10px; width: 19px; height: 19px; cursor: pointer;
}

.login-btn.decorative-btn {
    width: 100%; padding: 18px;
    background: linear-gradient(135deg, #f97316, var(--orange-text)); 
    color: white; border: none;
    border-radius: 40px; 
    
    /* Thay đổi phông chữ tại đây */
    font-family: Calibri, sans-serif; 
    
    font-size: 1.4rem; font-weight: 900; 
    cursor: pointer; text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 5px 15px rgba(234, 88, 12, 0.4); 
    border: 2px solid transparent;
}

.login-btn.decorative-btn:hover {
    background: linear-gradient(135deg, var(--orange-text), #c2410c);
    transform: translateY(-2px); /* Bay lên nhẹ */
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.5);
    border-color: #ffffff;
}

#loginMessage { margin-top: 15px; font-weight: bold; min-height: 20px; font-size: 1.1rem; }

.login-box {
    background-color: white;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border-top: 5px solid var(--blue-mid);
}

.login-box h2 {
    color: var(--blue-deep);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8rem;
}

.login-input-group {
    margin-bottom: 15px;
    position: relative;
    text-align: left;
}

.login-input-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    font-size: 1.1rem;
    box-sizing: border-box;
}

/* Khung chứa mật khẩu để đặt biểu tượng con mắt */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-password {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--blue-mid);
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: var(--orange-text); /* Dùng màu cam cho nút bấm */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #c2410c; /* Cam sậm hơn khi trỏ chuột */
}

#loginMessage {
    margin-top: 15px;
    font-weight: bold;
    min-height: 20px;
}

/* --- CSS CHO MENU CÀI ĐẶT --- */
.settings-wrapper {
    position: fixed;
    top: 75px; /* Giữ nguyên vị trí cách top 75px như cũ */
    right: 20px; /* Cách lề phải 20px */
    z-index: 10005;
}

/* Nút bánh răng */
#settingsBtn {
    background-color: rgba(30, 58, 138, 0.8); /* Màu xanh đậm xuyên thấu */
    color: white;
    border: 2px solid white;
    border-radius: 50%; /* Làm tròn xoe */
    width: 45px;
    height: 45px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Hiệu ứng xoay bánh răng khi trỏ chuột vào */
#settingsBtn:hover {
    transform: rotate(90deg) scale(1.1); 
    background-color: #1e3a8a;
}

/* Khối menu xổ xuống */
.settings-menu {
    position: absolute;
    top: 55px; /* Nằm ngay dưới nút bánh răng */
    right: 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 170px;
    
    /* Hiệu ứng trượt và mờ dần */
    transform-origin: top right;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(-10px);
}

/* Class kích hoạt khi bấm mở menu */
.settings-menu.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Các nút bấm bên trong menu */
.settings-menu button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s;
    font-family: inherit;
}

.settings-menu button:hover {
    background-color: #f0f4f8; /* Xanh rất nhạt khi trỏ vào */
    color: var(--blue-mid);
}

/* Riêng nút Đăng xuất làm nổi bật màu đỏ */
.settings-menu button.logout-item {
    color: #dc3545;
    border-top: 1px solid #e9ecef; /* Đường gạch ngang ngăn cách */
}

.settings-menu button.logout-item:hover {
    background-color: #ffeeee;
}

/* Giao diện cho ô chọn Duy trì đăng nhập */
.remember-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
    color: var(--blue-deep);
    font-size: 1.1rem;
    cursor: pointer;
}
.remember-container input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
} 
/* Hiệu ứng 3D Hologram khi xử lý dữ liệu */
.hologram-container {
    perspective: 1000px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hologram-cube {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate3D 3s linear infinite;
}

.hologram-cube div {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(37, 99, 235, 0.2);
    border: 2px solid #3b82f6;
    box-shadow: 0 0 15px #3b82f6;
}

/* Các mặt của khối 3D */
.front  { transform: translateZ(40px); }
.back   { transform: rotateY(180deg) translateZ(40px); }
.right  { transform: rotateY(90deg) translateZ(40px); }
.left   { transform: rotateY(-90deg) translateZ(40px); }
.top    { transform: rotateX(90deg) translateZ(40px); }
.bottom { transform: rotateX(-90deg) translateZ(40px); }

@keyframes rotate3D {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

.processing-text {
    margin-top: 20px;
    color: #2563eb;
    font-weight: bold;
    letter-spacing: 2px;
    animation: pulseText 1.5s infinite;
}

@keyframes pulseText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
} 
.software-info-wrapper {
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 10010; /* 🚀 Đã tăng lên 10010 để luôn nổi lên trên cùng */
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Nút hiển thị có hiệu ứng nhịp đập thu hút */
.software-info-btn {
  background: linear-gradient(135deg, #ffffff, #f0f4f8);
  color: #1a73e8;
  border: 1.5px solid #1a73e8;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: help;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(26, 115, 232, 0.15);
  transition: all 0.3s ease;
  animation: pulseBtn 2s infinite; /* Gọi hiệu ứng nhịp đập */
}

/* Hiệu ứng chớp bóng mờ */
@keyframes pulseBtn {
  0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}

.software-info-wrapper:hover .software-info-btn {
  background: #1a73e8;
  color: #ffffff;
  animation: none; /* Dừng đập khi rê chuột vào */
}

/* Thẻ thông tin đổ xuống */
.software-info-card {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  width: 320px;
  background: #ffffff;
  border-radius: 16px; 
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  padding: 25px 20px;
  opacity: 0;
  visibility: hidden;
  /* Kết hợp dịch chuyển và phóng to nhẹ */
  transform: translateY(-10px) scale(0.95); 
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-top: 6px solid #1a73e8;
  text-align: center; /* Canh giữa toàn bộ nội dung */
}

.software-info-wrapper:hover .software-info-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Vòng tròn Avatar trang trí */
.author-avatar {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #e8f0fe, #d0e7ff);
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 15px auto; /* Canh giữa khối avatar */
  box-shadow: 0 4px 10px rgba(26, 115, 232, 0.2);
}

.software-info-card h4 {
  margin: 0 0 10px 0;
  color: #2d6187;
  font-size: 18px;
  font-weight: 700;
}

.software-info-card p {
  margin: 0 0 20px 0;
  color: #5f6368;
  font-size: 14px;
  line-height: 1.6;
}

/* Nút Zalo */
.zalo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0068ff, #0056d6);
  color: #ffffff !important;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 104, 255, 0.3);
}

.zalo-link:hover {
  transform: translateY(-3px); /* Nổi bật lên khi rê chuột */
  box-shadow: 0 8px 20px rgba(0, 104, 255, 0.4);
}
 .software-qrcode {
  display: block; /* Chuyển sang dạng khối để có thể sử dụng margin auto */
  margin: 15px auto 0; /* Khoảng cách trên 15px và tự động canh giữa hai bên */
  width: 140px; /* Điều chỉnh độ rộng hình ảnh cho vừa vặn */
  height: auto;
  border-radius: 12px; /* Bo góc hình ảnh cho đồng bộ với giao diện */
  border: 1px solid #d0e7ff; /* Thêm viền xanh nhạt tạo điểm nhấn */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ để tăng chiều sâu */
  transition: transform 0.3s ease; /* Hiệu ứng mượt khi tương tác */
}

.software-qrcode:hover {
  transform: scale(1.05); /* Phóng to nhẹ khi rê chuột vào để gây chú ý */
}