* {
    -webkit-tap-highlight-color: transparent;
}

/* ================================================
   TABLET (47rem – 64rem / 752px – 1024px)
   Grid trung gian — tránh nhảy 4→1 col
================================================ */
@media (min-width: 47rem) and (max-width: 64rem) {
    .network__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .partner__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .works__wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================
   HAMBURGER — Show on mobile (≤ 53.875rem / 862px)
================================================ */
@media (max-width: 53.875rem) {
    .hamburger {
        display: flex;
    }

    .mobile-nav {
        display: flex;
    }

    .header__nav {
        display: none;
    }
}


@media (min-width: 88.75rem) {
    .about__wrapper {
        max-width: 1440px;
    }

    .about__item__skill {
        font-size: 3rem;
    }

    .about__item__link>a {
        font-size: 2.8rem;
    }

    .contact__mail__text,
    .contact__card__desc {
        font-size: 3.4rem;
    }

    .contact__card__title {
        font-size: 2.4rem;
    }

    .work__class,
    .work__genre {
        font-size: 2.6rem;
    }

    .works__viewmore__link {
        font-size: 3.4rem;
    }

    .msg__copy {
        font-size: 3.2rem;
    }

    .bubble:nth-child(2) {
        bottom: 0%;
        right: -3%;
    }

    .bubble:nth-child(3) {
        top: 50%;
        left: -20%;
    }

    .bubble:nth-child(4) {
        top: 0%;
        right: 0%;
    }

    .title {
        font-size: 10.4rem !important;
    }

    .content .about .desc,
    .content .works .desc,
    .content .contact .desc {
        font-size: 4rem;
    }

    .page__credit__title,
    .page__desc__title {
        font-size: 5.6rem;
    }

    .page__about {
        max-width: 1600px;
        grid-column-gap: 45px;
    }

    .page__about p {
        font-size: 2rem;
    }

    .works__genre__button button {
        font-size: 2.2rem;
    }

    .page__credit {
        margin-right: 10rem;
    }

    .project__type,
    .project__category {
        font-size: 2rem;
    }

    .project__name {
        font-size: 2.4rem;
    }

    .project__date {
        font-size: 1.6rem;
    }

    .network__card__name {
        font-size: 1.8rem;
    }

    .network__social {
        width: 32px;
        height: 32px;
    }

    .network__social svg {
        width: 16px;
        height: 16px;
    }

    .network__social--group::after,
    .network__social--page::after {
        width: 11px;
        height: 11px;
        font-size: 7px;
    }

    .partner__card__name {
        font-size: 1.8rem;
    }
}

@media (min-width: 45rem) and (max-width: 76rem) {
    .about__wrapper {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .about__icon {
        margin: 0 0 30px 0;
    }

    .about__item__title,
    .about__item__title span {
        font-size: 3.6rem
    }

    .about__item__skill {
        font-size: 2.4rem;
    }

    .about__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .works__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }

    .about__item__link>a,
    .works__viewmore__link {
        font-size: 2.0rem;
    }

    .work__class {
        padding: 7px 16px 6px;
        font-size: 2rem;
    }

    .work__genre {
        font-size: 2rem;
        padding: 6px 16px 4px;
    }

    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project__type {
        padding: 7px 16px 6px;
        font-size: 1.8rem;
    }

    .project__category {
        font-size: 1.8rem;
        padding: 6px 16px 4px;
    }

    .network__grid,
    .partner__grid {
        display: grid;
        gap: 16px;
    }

    .network__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .network__card,
    .partner__card {
        width: 100%;
    }
}

@media (max-width: 53.875rem) {

    /* Prevent horizontal overflow from header */
    html,
    body {
        overflow-x: hidden;
    }

    .header {
        overflow: hidden;
        min-width: 0;
    }

    .header__title {
        min-width: 0;
        overflow: hidden;
    }

    .header__title p {
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.2;
        max-width: 100%;
    }

    .header__nav {
        min-width: 0;
        overflow: hidden;
    }

    .header__nav>ul {
        min-width: 0;
        flex-wrap: nowrap;
    }

    .header__nav>ul>li {
        margin-left: 20px;
    }

    .work__wrapper {
        margin-top: 10px;
    }

    .works__wrapper {
        margin-top: 6px !important;
        width: 100%;
        grid-template-columns: repeat(1, 1fr)
    }

    .about__wrapper {
        margin-top: 30px;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .about__icon {
        margin: 0 0 30px 0;
    }

    .about__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page__credit__title,
    .page__desc__title {
        margin-bottom: 6px;
    }

    .about__item__title,
    .about__item__title span {
        text-align: center;
        font-size: 2.8rem;
    }

    .about__item__blocks {
        justify-content: center;
        flex-wrap: wrap;
    }

    .about__block {
        font-size: 1.8rem;
        padding: 10px 24px;
        border: 1px solid var(--border-color);
    }

    .about__item__highlight-block {
        font-size: 2.6rem;
        padding: 12px 28px;
    }

    .about-detail__text {
        font-size: 2.4rem;
    }

    .about-detail__gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-detail__highlight-block {
        font-size: 2rem;
        padding: 14px 28px;
    }

    .about__item__skill {
        text-align: center;
        font-size: 1.8rem;
    }

    .header {
        padding: 20px 16px
    }

    .header .header__title .logo {
        margin-left: 10px;
        padding-top: 9px;
    }

    .header .header__title .logo img {
        width: 40px;
        height: 40px;
    }

    .header__title>p {
        display: none;
    }

    .header__nav>ul>li {
        margin-bottom: 2px;
        margin-left: 28px;
    }

    .wrap__icon {
        width: 270px;
        height: 270px;
    }

    .about__item__link {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .about__item__link>a {
        margin-top: 16px;
        text-align: center;
        padding: 8px 80px 6px;

    }

    .works__wrapper {
        margin-top: 25px;
    }

    .works {
        margin-bottom: 40px;
    }

    .work__class {
        padding: 7px 22px;
        font-size: 1.8rem;
    }

    .work__genre {
        padding: 6px 16px 5px;
        font-size: 1.8rem;
    }

    .content .about,
    .content .about-detail,
    .content .works,
    .content .contact {
        padding: 0 16px;
    }

    .content .about>h1,
    .content .about-detail>h1,
    .content .works>h1,
    .content .contact>h1,
    .content .about .title,
    .content .about-detail .title,
    .content .works .title,
    .content .contact .title {
        font-size: clamp(2rem, 8vw, 4.2rem);
        line-height: 1.3;
        word-break: break-word;
        white-space: normal !important;
        display: flex;
        flex-wrap: wrap;
        /* Allow title text and line to wrap */
        align-items: center;
        overflow: visible !important;
    }

    .content .about .title::after,
    .content .about-detail .title::after,
    .content .works .title::after,
    .content .contact .title::after {
        margin-left: 10px;
        min-width: 20px;
        flex-shrink: 1;
        /* Allow the line to shrink if text needs more space */
    }

    .content .about .desc,
    .content .about-detail .desc,
    .content .works .desc,
    .content .contact .desc {
        align-items: start;
        font-size: 2.2rem;
    }

    .content .about-detail .desc {
        font-size: 2.8rem;
    }

    .content>section {
        margin-top: 20px;
    }

    .header>.header__title p,
    .header a {
        font-size: 1.8rem;
    }

    .header a p {
        margin-left: -30px;
    }

    .content .about .desc::before,
    .content .about-detail .desc::before,
    .content .works .desc::before,
    .content .contact .desc::before {
        font-size: 4rem;
        margin-top: -10.2px;
        margin-left: 0px;
    }

    .contact__card {
        min-width: 100%;
        margin-top: 20px;
    }

    .page__review {
        grid-template-columns: repeat(1, 1fr);
    }

    .page__title {
        font-size: 3.4rem;
        padding: .02rem 2rem .30rem 2rem;
    }

    .page {
        margin-top: 30px;
        padding: 0 16px;
    }

    .page__artist {
        font-size: 1.8rem;
    }

    .page__wrapper {
        margin-top: 30px;
    }

    .page__credit__title,
    .page__desc__title {
        line-height: 1.3;
    }

    .page__about p {
        font-size: 1.4rem;
    }

    .footer {
        margin-top: 60px;
        padding: 40px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 24px;
        width: 100%;
        margin-bottom: 0;
    }

    .footer__links a {
        font-size: 1.5rem;
    }

    .copy {
        font-size: 1.35rem;
        line-height: 1.5;
        opacity: 0.9;
    }

    .page__artist {
        padding: .75rem 2rem .74rem;
    }

    .works__viewmore__link {
        font-size: 2rem;
        padding: 8px 20px;
        border: 1px solid var(--border-color);
    }

    .works__genre__button {
        margin-right: 6px;
    }

    .works__genre__button button {
        padding: 6px 14px 6px;
        font-size: 1.2rem;
    }

    .works__genre {
        margin-top: 0px;
    }

    .projects__grid {
        margin-top: 25px;
        grid-template-columns: 1fr;
    }

    .projects {
        margin-bottom: 40px;
    }

    .project__type {
        padding: 7px 22px;
        font-size: 1.6rem;
    }

    .project__category {
        padding: 6px 16px 5px;
        font-size: 1.6rem;
    }

    .content .projects .title,
    .content .projects>h1 {
        font-size: clamp(2rem, 8vw, 4.2rem);
        line-height: 1.3;
        word-break: break-word;
        white-space: normal !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        overflow: visible !important;
    }

    .content .projects .title::after {
        margin-left: 10px;
        min-width: 20px;
        flex-shrink: 1;
    }

    .content .projects .desc {
        align-items: start;
        font-size: 2.2rem;
    }

    .content .projects .desc::before {
        font-size: 4rem;
        margin-top: -10.2px;
        margin-left: 0px;
    }

    .content .projects {
        padding: 0 16px;
    }

    .project__name {
        font-size: 1.8rem;
    }

    .project__date {
        font-size: 1.2rem;
    }

    .network {
        margin-bottom: 40px;
    }

    .network__grid {
        margin-top: 25px;
        gap: 16px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .network__card {
        width: 100%;
    }

    .content .network .title,
    .content .network>h1 {
        font-size: clamp(2rem, 8vw, 4.2rem);
        line-height: 1.3;
        word-break: break-word;
        white-space: normal !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        overflow: visible !important;
    }

    .content .network .title::after {
        margin-left: 10px;
        min-width: 20px;
        flex-shrink: 1;
    }

    .content .network .desc {
        align-items: start;
        font-size: 2.2rem;
    }

    .content .network .desc::before {
        font-size: 4rem;
        margin-top: -10.2px;
        margin-left: 0px;
    }

    .content .network {
        padding: 0 16px;
    }

    .network__card__name {
        font-size: 1.4rem;
    }

    .network__social {
        width: 24px;
        height: 24px;
    }

    .network__social svg {
        width: 12px;
        height: 12px;
    }

    .network__social--group::after,
    .network__social--page::after {
        width: 10px;
        height: 10px;
        font-size: 6px;
        top: -4px;
        right: -4px;
    }

    .network__card__info {
        padding: 6px 6px 8px;
    }

    .network__card__socials {
        gap: 4px;
    }

    .content .partner {
        padding: 0 16px;
    }

    .partner__grid {
        margin-top: 25px;
        gap: 16px;
        grid-template-columns: repeat(2, 1fr);
    }

    .partner__card {
        width: 100%;
    }

    .content .partner .title,
    .content .partner>h1 {
        font-size: clamp(2rem, 8vw, 4.2rem);
        line-height: 1.3;
        word-break: break-word;
        white-space: normal !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        overflow: visible !important;
    }

    .content .partner .title::after {
        margin-left: 10px;
        min-width: 20px;
        flex-shrink: 1;
    }

    .content .partner .desc {
        align-items: start;
        font-size: 2.2rem;
    }

    .content .partner .desc::before {
        font-size: 4rem;
        margin-top: -10.2px;
        margin-left: 0px;
    }

    .partner__card__name {
        font-size: 1.8rem;
    }

}

@media (max-width: 63.938rem) {
    .page__about {
        display: block;
        margin: 30px auto 60px;
    }

    .page__desc {
        margin-top: 30px;
    }
}

@media (max-width: 32.5rem) {

    .contact__mail__text,
    .contact__card__desc {
        font-size: 1.8rem;
        white-space: normal !important;
        word-break: break-word;
    }
}

/* ==========================================================================
   EVENT MODAL RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .event-modal__container {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    
    .event-modal__cover {
        height: 200px;
    }
    
    .event-modal__body {
        padding: 0 16px 20px 16px;
    }
    
    .event-modal__title {
        font-size: 1.8rem;
    }
    
    .event-modal__info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .event-modal__close {
        top: 20px;
        right: 20px;
    }
}