# Thiết kế đồng bộ màu Status Bar trên di động với Header

Tài liệu thiết kế cấu hình màu thanh trạng thái (status bar) trên trình duyệt di động Android/iOS đồng bộ với màu nền tiêu đề (header) của ứng dụng tra cứu lịch thi NEU.

## 1. Yêu cầu & Mục tiêu
- **Mục tiêu**: Khi truy cập ứng dụng bằng điện thoại (iOS Safari hoặc Android Chrome), thanh trạng thái phía trên cùng của thiết bị sẽ hiển thị cùng tông màu xanh đậm `#1a24be` của phần tiêu đề (`.hero-section`).
- **Nền tảng mục tiêu**: iOS (Safari di động) và Android (Chrome di động).
- **Yêu cầu an toàn**: Nội dung logo, text trên header không bị đè bởi "tai thỏ" (camera notch) hoặc thanh trạng thái.

## 2. Thiết kế chi tiết

### 2.1 Cập nhật HTML Layout (`resources/views/layouts/app.blade.php`)
- Thêm thuộc tính `viewport-fit=cover` vào thẻ meta `viewport` để cho phép trình duyệt hiển thị toàn bộ chiều cao màn hình, bao gồm cả khu vực dưới status bar.
- Thêm thẻ `<meta name="theme-color" content="#1a24be">` xác định màu nền của status bar.

### 2.2 Cập nhật CSS (`public/css/app.css`)
Bổ sung Safe Area Inset vào padding-top của `.hero-section` để bù đắp khoảng trống do status bar chiếm dụng trên iOS tràn viền:
- `.hero-section`: `padding-top: calc(3rem + env(safe-area-inset-top));`
- `@media (min-width: 768px)`: `padding-top: calc(4rem + env(safe-area-inset-top));`

## 3. Kế hoạch xác minh (Verification Plan)
- **Kiểm tra tự động**: Chạy máy chủ cục bộ bằng `php artisan serve` để xác nhận không lỗi biên dịch hoặc lỗi cú pháp CSS.
- **Kiểm tra thủ công**:
  - Truy cập giao diện trên trình giả lập mobile (Chrome DevTools Mobile Emulator hoặc Safari Responsive Mode).
  - Xác nhận mã nguồn HTML chứa đúng thẻ meta mới.
  - Xác nhận quy tắc CSS safe-area đã được áp dụng chuẩn xác cho `.hero-section`.