/* Tổng thể giao diện */
.tax-hero-section { 
    background-color: #fffaf7; 
    padding: 60px 20px; 
    min-height: 80vh; 
    font-family: 'Inter', -apple-system, sans-serif !important; 
    color: #1f2937;
}

.tax-container { 
    max-width: 800px; 
    margin: 0 auto; 
    box-sizing: border-box; 
    text-align: center; 
}

/* Typography */
.hero-title { 
    font-size: 2.5rem; 
    font-weight: 800; 
    margin-bottom: 5px; 
    letter-spacing: -0.02em;
}
.hero-title .highlight { color: #f87316; }
.hero-subtitle { margin-top: 10px; color: #4b5563; }

/* System Status (LED) */
#system-status { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 13px; 
    padding: 5px 15px; 
    border-radius: 20px; 
    margin-bottom: 15px; 
    font-weight: 600;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-checking { background: #f3f4f6; color: #6b7280; }
.status-checking .status-dot { background: #9ca3af; animation: pulse 1s infinite; }
.status-online { background: #ecfdf5; color: #059669; }
.status-online .status-dot { background: #10b981; box-shadow: 0 0 8px #10b981; }
.status-offline { background: #fef2f2; color: #dc2626; }
.status-offline .status-dot { background: #ef4444; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Tabs điều hướng */
.vehicle-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.v-tab { 
    padding: 12px 25px; 
    border-radius: 30px; 
    border: 1px solid #e5e7eb; 
    background: #fff; 
    font-weight: 700; 
    color: #6b7280; 
    cursor: pointer; 
    transition: 0.3s; 
    font-family: inherit;
}
.v-tab.active { 
    background: #f87316; 
    color: #fff; 
    border-color: #f87316; 
    box-shadow: 0 4px 12px rgba(248, 115, 22, 0.2);
}

/* Ô tìm kiếm */
.search-main-box { 
    display: flex; 
    background: #fff; 
    padding: 8px; 
    border-radius: 18px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    border: 1px solid #ffd8a8; 
}
.input-inner { flex: 1; }
.input-inner input { 
    width: 100%; 
    border: none; 
    padding: 12px 15px; 
    font-size: 18px; 
    font-weight: 700; 
    outline: none; 
    font-family: inherit;
    color: #1f2937;
}

/* Nút Tra Cứu (Fix chính lỗi font tại đây) */
#phat-nguoi-button { 
    background: #f87316; 
    color: #fff; 
    border: none; 
    padding: 0 30px; 
    border-radius: 12px; 
    font-weight: 800; 
    cursor: pointer; 
    font-family: 'Inter', sans-serif !important; 
    font-size: 16px;
    transition: 0.2s;
}
#phat-nguoi-button:hover { background: #ea580c; transform: translateY(-1px); }

/* Kết quả trả về */
.result-card-vne { 
    margin-top: 30px; 
    background: #fff; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    text-align: left; 
}
.card-header-vne { background: #1f2937; color: #fff; padding: 18px 20px; font-weight: 700; }
.card-body-vne { padding: 20px; }

.v-card-item { 
    border-left: 5px solid #f87316; 
    background: #fffaf0; 
    padding: 18px; 
    border-radius: 10px; 
    margin-bottom: 15px; 
    position: relative; 
}
.v-status-tag { 
    float: right; 
    padding: 4px 12px; 
    border-radius: 15px; 
    font-size: 12px; 
    font-weight: 800; 
    text-transform: uppercase; 
}
.v-status-tag.unpaid { background: #ffe3e3; color: #e03131; }
.v-status-tag.paid { background: #ebfbee; color: #2f9e44; }

.v-info { margin-bottom: 8px; font-size: 15px; line-height: 1.5; }

/* Loader & Mobile */
.loader-vne { text-align: center; margin-top: 25px; font-weight: 600; color: #6b7280; }
.spinner-vne {
    width: 40px; height: 40px; border: 4px solid #f3f3f3;
    border-top: 4px solid #f87316; border-radius: 50%;
    animation: spin 1s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .search-main-box { flex-direction: column; padding: 10px; }
    #phat-nguoi-button { padding: 15px; margin-top: 8px; width: 100%; }
    .v-status-tag { float: none; display: inline-block; margin-bottom: 10px; }
    .hero-title { font-size: 1.8rem; }
}

/* Căn giữa nội dung thông báo không có lỗi */
.no-violation {
    text-align: center;
    padding: 40px 20px;
}

.no-violation i {
    display: block;
    margin-bottom: 15px;
}

.no-violation h3 {
    font-size: 1.2rem;
    color: #1f2937;
    margin: 0;
    text-transform: uppercase;
    font-weight: 800;
}

/* Căn giữa danh sách vi phạm (nếu cần) */
.violation-list {
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa các card con */
}

.v-card-item {
    width: 100%; /* Đảm bảo card vẫn chiếm hết chiều ngang */
    box-sizing: border-box;
}

/* Tối ưu hiển thị Meme */
.meme-box {
    text-align: center;
    padding: 20px;
}

.meme-video {
    max-width: 350px;
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background: #000;
}

/* Hiệu ứng rung nhẹ khi bị phạt */
.bi-phat-theme {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Cập nhật trong page-phat-nguoi.css */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Căn giữa theo chiều ngang */
    justify-content: center; /* Căn giữa theo chiều dọc nếu cần */
    text-align: center;      /* Căn giữa dòng chữ */
    margin-bottom: 30px;
}

.hero-title {
    width: 100%;
    text-align: center;
    display: block;
}

#system-status {
    margin-left: auto;
    margin-right: auto;
    display: inline-flex; /* Đảm bảo khối status không chiếm hết chiều ngang nhưng vẫn nằm giữa */
}

/* Tổng thể giao diện với Ảnh nền */
.tax-hero-section { 
    /* Sử dụng ảnh đường cao tốc hiện đại từ Unsplash */
    background: linear-gradient(rgba(255, 250, 247, 0.92), rgba(255, 250, 247, 0.92)), 
                url('https://i.pinimg.com/1200x/93/ba/02/93ba02c5e207e0be22c5396a715521a4.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Hiệu ứng cuộn trang chuyên nghiệp */
    padding: 60px 20px; 
    min-height: 100vh; 
    font-family: 'Inter', -apple-system, sans-serif !important; 
    color: #1f2937;
    position: relative;
}

/* Đảm bảo container nằm trên lớp nền */
.tax-container { 
    max-width: 800px; 
    margin: 0 auto; 
    box-sizing: border-box; 
    text-align: center; 
    position: relative;
    z-index: 2;
}


/* Thêm vào file CSS nếu muốn chữ phụ đề rõ hơn */
.hero-subtitle { 
    margin-top: 10px; 
    color: #4b5563; 
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Tạo bóng chữ để dễ đọc trên nền ảnh */
}

/* --- CẬP NHẬT MỚI: HẠ LỚP PHỦ & LÀM RÕ ẢNH --- */
.tax-hero-section { 
    /* Hạ lớp phủ xuống 0.6 để ảnh đường cao tốc hiện rõ rực rỡ */
    background: linear-gradient(rgba(255, 250, 247, 0.6), rgba(255, 250, 247, 0.7)), 
                url('https://i.pinimg.com/1200x/93/ba/02/93ba02c5e207e0be22c5396a715521a4.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 60px 20px; 
    min-height: 100vh; 
    position: relative;
}

/* Ứng dụng Glassmorphism (hiệu ứng kính) để không bị rối mắt */
.search-main-box, .result-card-vne, .v-tab {
    background: rgb(249, 127, 5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Tinh chỉnh tab khi không active để tiệp với nền */
.v-tab:not(.active) {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Đảm bảo chữ tiêu đề cực kỳ sắc nét trên nền ảnh */
.hero-title {
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

/* Làm nổi bật các tab phương tiện */
.vehicle-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    position: relative;
    z-index: 5;
}

.v-tab {
    padding: 12px 28px;
    border-radius: 30px;
    /* Sử dụng màu nền tối hơn một chút và làm mờ kính để nổi bật trên ảnh sáng */
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(248, 115, 22, 0.2) !important;
    font-weight: 700;
    color: #4b5563; /* Màu chữ đậm để dễ đọc */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.v-tab i {
    margin-right: 8px;
    color: #f87316; /* Làm icon nổi bật hơn */
}

/* Tab khi được chọn (Active) */
.v-tab.active {
    background: #f87316 !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
    box-shadow: 0 8px 20px rgba(248, 115, 22, 0.4);
    transform: translateY(-2px);
}

.v-tab.active i {
    color: #ffffff;
}

/* Làm nổi bật ô tìm kiếm chính */
.search-main-box {
    background: #ffffff !important;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
   
}

/* Chỉnh lại subtitle cho đậm hơn để không bị chìm vào mây */
.hero-subtitle {
    color: #374151 !important; /* Xám đậm hơn */
    font-weight: 600;
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
    padding: 2px 15px;
    border-radius: 10px;
}

/* --- PHẦN WRAPPER NỀN --- */
.no-thue-wrapper {
    /* Đồng bộ độ mờ và hiệu ứng với trang Phạt Nguội */
    background: linear-gradient(rgba(255, 247, 237, 0.65), rgba(255, 247, 237, 0.75)), 
                url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 60px 20px;
    min-height: 100vh;
}

/* --- CARD TRA CỨU --- */
.search-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* Thêm viền cam dày 2px để đồng bộ style */
    border: 2px solid #f87316 !important;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Đồng bộ nút bấm Tra cứu */
.btn-search-no-thue {
    background: #f87316 !important;
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(248, 115, 22, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-search-no-thue:hover {
    background: #ea580c !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(248, 115, 22, 0.4) !important;
}