:root {
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.15);
  --accent-text: #ffffff;
  --panel-bg: rgba(2, 6, 23, 0.75);
  --card-text: #ffffff;
  --cal-text: #ffffff;
}

/* Quan trọng: Đảm bảo kích thước tính cả padding để không bị tràn màn hình */
* {
  box-sizing: border-box;
}

body { 
  margin:0; 
  font-family: system-ui; 
  background:#020617; 
  color:#e5e7eb; 
  overflow-x: hidden; 
}

.app { 
  max-width:420px; 
  margin:auto; 
  padding:16px;
  position: relative; 
}

/* MENU SIDEBAR */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  background-color: var(--panel-bg);
  backdrop-filter: blur(15px);
  transition: 0.4s;
  padding-top: 50px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  
  /* Cấu trúc Flexbox để đẩy footer xuống đáy */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Không cho cuộn toàn bộ menu */
}

.sidenav a {
  padding: 12px 25px;
  text-decoration: none;
  font-size: 16px;
  color: #e5e7eb;
  display: block;
  transition: 0.3s;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidenav a:hover { 
  color: var(--accent); 
  background: var(--accent-soft); 
}

.sidenav .closebtn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 36px;
  border-bottom: none;
}

/* Nội dung giữa: Cho phép cuộn nếu danh sách quá dài */
.nav-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Phần Footer: Luôn bám đáy và hiển thị rõ 2 nút chồng lên nhau */
.nav-bottom {
  flex-shrink: 0;
  margin-top: auto;
  padding-bottom: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-bottom a {
  border-bottom: none !important;
}

/* OVERLAY KHI MỞ MENU */
#overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* NÚT MỞ MENU */
.menu-trigger {
  position: absolute;
  top: 20px;
  left: 16px;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  background: var(--panel-bg);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Chỉnh sửa lại header của trang Reading */
.top-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  /* Đẩy lùi sang trái một khoảng để badge ngày nằm chính giữa màn hình app */
  margin-left: 55px; 
}

.date-badge {
  background: var(--panel-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px; /* Tăng padding để độ cao bằng với nút menu */
  border-radius: 14px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%; /* Để nó giãn ra giống như Vocabulary */
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* Các thành phần UI khác giữ nguyên */
.top-date, .calendar, #searchResults, #sideContent { 
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.search-box button, .actions button, .actions a { 
  background: var(--accent); 
  color: var(--accent-text); 
  border: none;
  transition: all 0.3s ease;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 5px;
}

.cal-header button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
}

.top-date { 
  border-radius:14px;
  padding:14px; 
  text-align:center; 
  font-weight:700; 
  cursor:pointer;
  margin-bottom: 12px; 
  margin-left: 55px; 
}

.search-box { 
  display:flex; 
  gap:8px; 
  margin-bottom: 10px; 
}

.search-box input { 
  flex:1; 
  padding:12px; 
  border-radius:10px; 
  border:none; 
  outline:none; 
  background: rgba(255,255,255,0.1);
  color:#fff; 
}

.search-box button { 
  border-radius:10px; 
  padding:0 18px; 
  font-weight:600; 
  cursor:pointer; 
}

#searchResults { 
  border-radius:12px; 
  padding:8px; 
  display:none; 
  margin-bottom: 10px;
}

.calendar { 
  border-radius:16px; 
  padding:15px; 
  margin-bottom:15px;
  display:none;
}

.calendar.open { 
  display:block; 
}

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

.day.active { 
  opacity: 1; 
  cursor: pointer; 
  background: var(--accent); 
  color: var(--accent-text);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.2);
}

.day {
  aspect-ratio: 1; /* Tạo ô vuông */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}


Vấn đề hiển thị lịch trong file vocabulary (như trong ảnh bạn cung cấp) xuất phát từ việc thiếu các quy tắc CSS để định dạng bố cục và căn chỉnh cho các phần tử bên trong bộ lịch.

Dựa trên mã nguồn bạn gửi, đây là những lý do cụ thể và cách khắc phục:

1. Nguyên nhân lỗi

Thiếu định dạng Header: Các nút chuyển tháng (◀, ▶) và nhãn tháng (#monthLabel) đang hiển thị mặc định (dạng block hoặc inline), khiến chúng bị xếp chồng lên nhau thay vì nằm trên cùng một hàng.
+1


Thiếu định dạng Grid cho ngày: Mặc dù bạn đã có class .grid trong CSS , nhưng các thẻ div con đại diện cho ngày chưa được thiết lập kích thước (như aspect-ratio hoặc height) để tạo thành các ô vuông đều nhau.
+1


Thiếu căn chỉnh chữ: Văn bản bên trong các ô ngày chưa được căn giữa.

2. Cách khắc phục
Bạn hãy thêm hoặc cập nhật các đoạn CSS sau vào file style.css (hoặc trong thẻ <style> của file vocabulary.html) để đồng bộ giao diện với ảnh mẫu:

A. Sửa phần Header của Lịch
Thêm đoạn mã này để các nút điều hướng và tên tháng nằm trên một hàng:

CSS
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 5px;
}

.cal-header button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
}
B. Sửa phần Grid hiển thị ngày
Cập nhật class .day để các ô ngày có hình vuông và nội dung được căn giữa giống file reading:

CSS
.day {
  aspect-ratio: 1; /* Tạo ô vuông */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

.day:hover {
  background: rgba(255, 255, 255, 0.1);
}
C. Đồng bộ màu sắc hiển thị
Đảm bảo màu chữ của lịch luôn rõ ràng:

CSS
#monthLabel {
  color: var(--accent);
  font-size: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  color: #fff; /* Màu chữ trắng cho ngày */
}

.day:hover {
  background: rgba(255, 255, 255, 0.1);
}

.main { 
  display:flex; 
  flex-direction: column; 
  gap:12px;
  align-items:center; 
}

.card { 
  width:100%; 
  max-width:320px; 
  perspective:1000px; 
}

.flip {
  position: relative;
  min-height: 260px; 
  cursor: pointer;
  background: var(--card-dynamic, #1e293b);
  border-radius: 28px; 
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 15px 45px rgba(0,0,0,0.5);
}

.flip.flipped { 
  transform: rotateY(180deg);
}

.face, .back { 
  position: absolute; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 25px;
  backface-visibility: hidden; 
}

.back { 
  transform: rotateY(180deg); 
  flex-direction: column; 
  gap: 12px;
}

.korean.big { 
  font-size:52px; 
  font-weight:900;
  color: var(--card-text); 
}

.vietnamese { 
  font-size:22px; 
  font-weight:500; 
  color: #cbd5e1; 
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 12px; 
}

.actions { 
  display:flex; 
  gap:8px;
  width: 100%; 
  margin-top: 10px; 
}

.actions button, .actions a { 
  flex:1; 
  border-radius:12px; 
  height: 50px; 
  font-weight:700;
  cursor:pointer; 
  text-decoration: none;
}

.side { 
  width:100%; 
  max-height:0; 
  overflow:hidden; 
  transition: all 0.5s ease; 
  opacity:0; 
}

.side.open { 
  max-height:500px; 
  opacity:1; 
  margin-top:15px;
}

#sideContent { 
  width:100%; 
  max-height:400px; 
  border-radius:20px; 
  padding: 20px; 
  box-sizing: border-box; 
  overflow-y: auto; 
  font-size: 16px; 
  color: #f1f5f9;
}

.side-table { 
  width: 100%; 
  border-collapse: collapse;
}

.side-table tr { 
  border-bottom: 1px solid var(--accent-soft); 
  cursor: pointer;
}

.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    text-align: center;
    padding: 20px;
  }
  .welcome-text {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;
    background: var(--panel-bg);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  #realTimeClock {
    font-size: 18px;
    margin-top: 15px;
    color: var(--accent);
    font-weight: 700;
  }