/* SECTION: Đào Tạo Và Thi Thử */
 .training-section {
     padding: 80px 0;
     background: #f8f9fa;
 }

 .training-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .training-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .training-header h2 {
     font-size: 2.5rem;
     font-weight: bold;
     color: #2c3e50;
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .training-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: start;
 }

 /* Video chính */
 .main-video {
     position: relative;
 }

 .video-container {
     position: relative;
     width: 100%;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 .video-placeholder {
     position: relative;
     width: 100%;
     height: 350px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     background-image: url('https://www.youtube.com/embed/Y07ecSj9u3Q');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .video-overlay:hover {
     background: rgba(0, 0, 0, 0.5);
 }

 .play-button {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     padding: 20px;
     backdrop-filter: blur(10px);
     border: 2px solid rgba(255, 255, 255, 0.3);
     transition: all 0.3s ease;
 }

 .play-button:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: scale(1.1);
 }

 .video-info {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 5px 10px;
     border-radius: 15px;
     font-size: 0.9rem;
     font-weight: bold;
 }

 .video-title-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
     color: white;
     padding: 30px 20px 20px;
 }

 .video-title-overlay h3 {
     font-size: 1.3rem;
     margin: 0;
     font-weight: bold;
 }

 /* Danh sách bài viết */
 .articles-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .article-item {
     display: flex;
     background: rgb(220, 218, 218);
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .article-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 .article-image {
     position: relative;
     width: 120px;
     height: 120px;
     flex-shrink: 0;
     overflow: hidden;
 }

 .article-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .article-item:hover .article-image img {
     transform: scale(1.1);
 }

 .article-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     padding: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .article-content {
     flex: 1;
     padding: 15px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .article-content h4 {
     font-size: 1rem;
     font-weight: bold;
     color: #537495;
     margin: 0 0 8px 0;
     line-height: 1.3;
     text-transform: uppercase;
 }

 .article-content p {
     font-size: 0.85rem;
     color: #666;
     margin: 0;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .training-content {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .training-header h2 {
         font-size: 2rem;
     }

     .video-placeholder {
         height: 250px;
     }

     .article-item {
         flex-direction: column;
     }

     .article-image {
         width: 100%;
         height: 150px;
     }

     .article-content {
         padding: 20px;
     }

     .article-content h4 {
         font-size: 1.1rem;
     }

     .article-content p {
         font-size: 0.9rem;
     }
 }

 @media (max-width: 480px) {
     .training-section {
         padding: 60px 0;
     }

     .training-container {
         padding: 0 15px;
     }

     .training-header h2 {
         font-size: 1.8rem;
     }

     .video-placeholder {
         height: 200px;
     }

     .play-button {
         padding: 15px;
     }

     .play-button svg {
         width: 40px;
         height: 40px;
     }
 }