@media screen and (min-width: 781px) and (max-width: 1024px) {
    .container, .hero-section, .about-wrapper, .exp-container, .project-grid {
        max-width: 95%;
        gap: 30px; /* Giảm gap lớn 80px-120px xuống */
    }

    .hero-section {
        padding-top: 120px;
    }

    h1 {
        font-size: 2.5rem;
    }

    .about-image-side .image-circle {
        width: 320px;
        height: 320px;
    }

    .project-grid {
        grid-template-columns: repeat(2, 1fr); /* Giữ 2 cột cho tablet */
    }
}
@media screen and (max-width: 780px) {
    /* Menu chuyển về dạng gọn hơn hoặc ẩn bớt */
    .menu {
        padding: 10px 20px;
    }

    .menu-links {
        gap: 12px;
    }

        .menu-links li a {
            font-size: 0.8rem;
        }

    /* Hero Section */
    .hero-section {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 100px;
        gap: 40px;
    }

    .hero-text {
        align-items: center;
        text-align: center;
    } 

    .iconMXHcontact {
        flex-direction: column;
        align-items: center;
    }

    /* About Me */
    .about-wrapper {
        flex-direction: column;
    }

    .about-content-side {
        text-align: center;
    }

    .about-stats {
        justify-content: center;
    }

    /* Education & Awards */
    .edu-awards-layout {
        grid-template-columns: 1fr;
    }

    /* Experience - Chuyển trục Timeline về bên trái */
    .timeline::before {
        left: 30px;
    }

    .timeline-item, .timeline-item:nth-child(even) {
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 60px;
    }

    .exp-card {
        width: 100% !important;
        text-align: left !important;
        left: 0 !important;
    }

    .exp-dot {
        left: 30px;
    }

    .exp-visual {
        display: none; /* Ẩn icon lớn bên phải để đỡ rối trên Tablet */
    }

    /* Skills Grid */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 992px) {
    .contact-grid {
        flex-direction: column; /* Tablet cũng nên cho xếp dọc để nội dung rộng rãi */
    }

    .info-card {
        width: 100%;
        box-sizing: border-box;
    }
}
/* 1. TABLET NGANG (Landscape) & LAPTOP NHỎ (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .container, .hero-section, .edu-awards-layout, .skills-grid, .project-grid {
        padding-left: 5%;
        padding-right: 5%;
    }

    .hero-section {
        gap: 50px;
        padding-top: 120px;
    }

    .image-circle {
        width: 320px;
        height: 320px;
    }

    .about-title {
        font-size: 2.5rem;
    }
}

/* 2. TABLET DỌC (Portrait) (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Menu Navigation */
    .menu {
        width: 90%;
        padding: 10px 20px;
    }

    .menu-links {
        display: none; /* Ẩn menu chữ, nên cân nhắc dùng Hamburger Menu ở bước sau */
    }

    /* Hero Section */
    .hero-section {
        flex-direction: column-reverse; /* Ảnh lên trên hoặc dưới tùy ý, ở đây ưu tiên text */
        text-align: center;
        padding-top: 100px;
        gap: 30px;
    }

    .hero-text {
        align-items: center;
        text-align: center;
    }

    .profile {
        justify-content: center;
        max-width: 300px;
    }

    /* Layout Sections */
    .about-wrapper, .edu-awards-layout, .contact-grid {
        flex-direction: column;
        display: flex;
    }

    .about-image-side, .about-content-side, .column-container, .contact-left, .info-card {
        width: 100%;
    }

    /* Timeline Experience */
    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        flex-direction: row !important;
        justify-content: flex-start;
        margin-bottom: 30px;
    }

    .exp-card {
        width: calc(100% - 80px) !important;
        margin-left: 60px !important;
        text-align: left !important;
    }

    .exp-dot {
        left: 30px;
    }

    .exp-visual {
        display: none; /* Ẩn icon decor để tránh rối mắt trên tablet/mobile */
    }
}