web/
├── index.html
├── menu1.html
├── gioithieu.html
├── kiniem.html
├── thanhtich.html
├── sodolop2.html
├── style.css
└── memory.html
└── img/
       ├── 20_10_2025.jpg
       ├── stem11giainhi.jpeg
       ├── 26_3_2024.jpeg
       ├── 20_11_2023.jpg
       ├── 9_4_2025.jpg
       ├── thiennguyenlop10.jpg
       ├── trailop10.jpeg
       ├── boy_s_day.jpeg
       ├── baotuonglop10.jpeg
       ├── choicuoi11.jpeg
       ├── choicuoinam.PNG
       ├── giaidieutuoihong10.jpeg
       └── thiennguyenkhoitoan.jpg
└──game/
       │
       ├── game.html
       ├── choicuoi11.jpg
       ├── m.quan.jpg
       ├── mthu.jpg
       ├── Chi.jpg
       ├── Cuong.jpg
       ├── GKhanh.jpg
       ├── Minh.JPG
       └── Tuan.jpg

* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: "Times New Roman", serif;
}
       
.body {
       min-height: 100vh;
       background: linear-gradient(to bottom, #8fb3ff, #eef4ff);
       display: flex;
       justify-content: center;
}
       
       
.wrapper {
       width: 1200px;
       min-height: 100vh;
       padding: 20px 40px;
}
       
.header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 50px;
}
       
.header .title {
       font-size: 22px;
       color: #1f3c88;
}
       
.header .page-btn {
       padding: 10px 30px;
       border-radius: 999px;
       border: 1.5px solid #4d73ff;
       background: transparent;
       color: #1f3c88;
       text-decoration: none;
       font-size: 16px;
}
.pill {
       padding: 14px 40px;
       background-color: #8fb3ff;
       border-radius: 999px;
       text-align: center;
       font-size: 18px;
       text-decoration: none;
       color: #000;
       border: 1.5px solid rgba(0,0,0,0.15);
       }
       
.pill.small {
       padding: 10px 24px;
       font-size: 14px;
       }
       
.pill.dark {
       background-color: #0b4fb3;
       color: white;
       border: none;
       }
.menu {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 40px 140px;
       justify-content: center;
       margin-top: 80px;
}
       
.menu .col {
       display: flex;
       flex-direction: column;
       gap: 30px;
       }
       
.intro {
       display: grid;
       grid-template-columns: 1.1fr 1fr;
       gap: 60px;
       align-items: center;
}
       
.intro .text {
       font-size: 18px;
       line-height: 1.8;
       color: #000;
}
       
.intro img {
       width: 100%;
       border-radius: 30px;
       }
       
.schema-menu {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 35px 120px;
       justify-content: center;
       margin-top: 80px;
}
       
.class-map {
       display: flex;
       justify-content: space-between;
       margin-top: 50px;
}
       
.group {
       text-align: center;
}
       
.group h3 {
       margin-bottom: 20px;
       font-size: 18px;
}
       
.group .members {
       display: grid;
       grid-template-columns: repeat(2, 90px);
       gap: 12px;
       justify-content: center;
}
       
.student-table {
       width: 100%;
       border-collapse: collapse;
       background-color: rgba(255,255,255,0.6);
       border-radius: 20px;
       overflow: hidden;
}
       
.student-table th,
.student-table td {
       padding: 14px 10px;
       text-align: center;
       font-size: 16px;
}
       
.student-table thead {
       background-color: #8fb3ff;
}
       
.student-table th {
       font-weight: bold;
}
       
.student-table tr:nth-child(even) {
       background-color: rgba(255,255,255,0.4);
}
       
.student-table tr:hover {
       background-color: rgba(143,179,255,0.4);
}
       
.top-buttons{
       display: flex;
       justify-content: space-between;
       padding: 0 60px;
       margin-top: 20px;
}
       
.intro-class {
       max-width: 1100px;
       margin: 30px auto;
       padding: 40px;
       background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
       border-radius: 30px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.1);
       position: relative;
       border: 1px solid rgba(103, 126, 234, 0.2);
}
       
       /* Khung ảnh lớp */
.class-photo-container {
       display: grid;
       text-align: center;
       justify-items: center;      /* căn giữa các item trong lưới */
       justify-content: center;
       margin: 10px 0 30px 0;
}
       
.class-photo {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    border: 5px solid white;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.class-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
}
       
.photo-caption {
       margin-top: 10px;
       font-size: 20px;
       color: #667eea;
       font-weight: 600;
       background: linear-gradient(135deg, #667eea20, #764ba220);
       padding: 8px 30px;
       border-radius: 50px;
       display: inline-block;
}
       
       /* Container thông tin lớp */
.class-info-container {
    background: linear-gradient(135deg, #667eea10, #764ba210);
    display: grid;
    border-radius: 30px;
    padding: 30px;
    margin: 20px 0;
    border: 2px dashed #667eea40;
}
       
       /* Thông tin lớp học */
.class-details {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 25px;
       margin: 20px 0;
}
       
.info-card {
       background: white;
       padding: 25px;
       border-radius: 20px;
       box-shadow: 0 10px 25px rgba(102, 126, 234, 0.1);
       border-left: 5px solid #667eea;
       transition: all 0.3s ease;
}
       
       .info-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
}
       
.info-card strong {
       color: #667eea;
       font-size: 24px;
       display: block;
       margin-bottom: 15px;
       border-bottom: 2px solid #eee;
       padding-bottom: 8px;
}
       
.info-card p {
       margin: 12px 0;
       font-size: 18px;
       color: #333;
       display: flex;
       align-items: center;
       gap: 10px;
}
       
.info-card p::before {
       content: "•";
       color: #667eea;
       font-size: 24px;
       font-weight: bold;
}
       
       /* KHU VỰC GIÁO VIÊN */
       .teacher-section {
       margin: 40px 0 30px;
}
       
.section-title {
       text-align: center;
       font-size: 32px;
       font-weight: 700;
       color: #667eea;
       margin-bottom: 30px;
       position: relative;
}
       
.section-title::after {
       content: '';
       display: block;
       width: 100px;
       height: 4px;
       background: linear-gradient(90deg, #667eea, #764ba2);
       margin: 10px auto;
       border-radius: 2px;
}
       
.teacher-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 30px;
       justify-content: center;
       max-width: 600px;
       margin: 0 auto;
}

.teacher-card {
       background: white;
       border-radius: 20px;
       padding: 25px;
       text-align: center;
       box-shadow: 0 10px 25px rgba(0,0,0,0.1);
       transition: all 0.3s ease;
       border: 2px solid rgba(102, 126, 234, 0.2);
       }
       
.teacher-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 35px rgba(102, 126, 234, 0.3);
       border-color: #667eea;
       }

.teacher-avatar {
       width: 180px;
       height: 180px;
       border-radius: 50%;
       margin: 0 auto 20px;
       background: linear-gradient(135deg, #667eea, #764ba2);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 70px;
       font-weight: bold;
       border: 5px solid white;
       box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


.teacher-name {
       font-size: 24px;
       font-weight: 700;
       color: #333;
       margin: 15px 0 5px;
}

.teacher-role {
       font-size: 18px;
       color: #667eea;
       font-weight: 600;
       background: #f0f3ff;
       padding: 8px 20px;
       border-radius: 50px;
       display: inline-block;
}

/* KHU VỰC BAN CÁN SỰ */
.bcs-section {
       margin: 40px 0 20px;
}

.bcs-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 25px;
       justify-content: center;
}

.bcs-card {
       background: white;
       border-radius: 20px;
       padding: 20px;
       text-align: center;
       box-shadow: 0 10px 25px rgba(0,0,0,0.1);
       transition: all 0.3s ease;
       border: 1px solid rgba(102, 126, 234, 0.2);
       }

.bcs-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 35px rgba(102, 126, 234, 0.3);
       }

.bcs-avatar {
       width: 150px;
       height: 150px;
       border-radius: 50%;
       margin: 0 auto 15px;
       background: linear-gradient(135deg, #667eea, #764ba2);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 60px;
       font-weight: bold;
       border: 4px solid white;
       box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.bcs-avatar {
       width: 150px;
       height: 150px;
       border-radius: 50%;
       object-fit: cover;
       border: 4px solid white;
       box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.bcs-name {
       font-size: 20px;
       font-weight: 700;
       color: #333;
       margin: 10px 0 5px;
}

.bcs-role {
       font-size: 16px;
       color: #667eea;
       font-weight: 600;
       background: #f0f3ff;
       padding: 5px 15px;
       border-radius: 50px;
       display: inline-block;
}

.bcs-class {
       font-size: 14px;
       color: #999;
       margin-top: 8px;
}

/* Thống kê */
.student-stats {
       text-align: center;
       margin-top: 30px;
       padding: 15px 25px;
       background: linear-gradient(135deg, #667eea, #764ba2);
       border-radius: 50px;
       color: white;
       font-size: 20px;
       font-weight: 500;
       }

.student-stats span {
       background: rgba(255,255,255,0.2);
       padding: 5px 20px;
       border-radius: 30px;
       margin: 0 10px;
       font-weight: bold;
       font-size: 24px;
}

.memory-container {
       max-width: 1100px;
       margin: 40px auto;
       padding: 40px;
       background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
       border-radius: 30px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.1);
       border: 1px solid rgba(103, 126, 234, 0.2);
}

.memory-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
}

.memory-card {
       background: white;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 25px rgba(0,0,0,0.1);
       transition: all 0.3s ease;
}

.memory-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 35px rgba(102, 126, 234, 0.3);
}

.memory-card img {
       width: 100%;
       height: 220px;
       object-fit: cover;
}

.memory-content {
       padding: 20px;
}

.memory-content h3 {
       font-size: 20px;
       margin-bottom: 10px;
       color: #667eea;
}

.memory-content p {
       font-size: 16px;
       color: #555;
       line-height: 1.6;
}
.myImg {
       width: 300px;
       cursor: pointer;
       transition: 0.3s;
}

.myImg:hover {
       opacity: 0.8;
}

/* Lightbox */
.lightbox {
       display: none;
       position: fixed;
       z-index: 999;
       padding-top: 60px;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0,0,0,0.9);
}

.lightbox-img {
       margin: auto;
       display: block;
       max-width: 90%;
       max-height: 80%;
}

.close {
       position: absolute;
       top: 20px;
       right: 35px;
       color: white;
       font-size: 40px;
       cursor: pointer;
}