/* Cubao Free Font */
@import url('menu.css');
@import url(https://db.onlinewebfonts.com/c/0aaa83f760b96926c5f6785125095e23?family=Cubao+Free+2+Exp);
@font-face {
    font-family: "Cubao Free";
    src: url("https://db.onlinewebfonts.com/t/3995a90c225a2b186aaf7106a7200e40.woff2") format("woff2"),
        url("https://db.onlinewebfonts.com/t/3995a90c225a2b186aaf7106a7200e40.woff") format("woff"),
        url("https://db.onlinewebfonts.com/t/3995a90c225a2b186aaf7106a7200e40.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Effra Font */
@font-face {
    font-family: "Effra";
    src: url("https://db.onlinewebfonts.com/t/9a60b1e55db4817dbda772b8a2715feb.woff2") format("woff2"),
        url("https://db.onlinewebfonts.com/t/9a60b1e55db4817dbda772b8a2715feb.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Base reset for contact page */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background: #05021b;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Underway: text along circle border (SVG textPath), rotates like a dial */
.underway-container {
    position: absolute;
    top: -35%;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.underway-circle {
    position: absolute;
    width: 74%;
    height: 88%;
    z-index: 1;
    /* animation: underwayScaleUp 3s ease-in-out infinite; */
}

/* Full circle 100%, no cut */
.underway-circle--top-left {
    top: 0;
    left: -30%;
}

.underway-circle--top-right {
    top: -16%;
    right: -28%;
}

.underway-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: underwayCircleRotate 15s linear infinite;
}
.project-grid-see-more-btn{
    background-color: transparent;
    border: none;
 
}

.underway-circle--top-right .underway-svg {
    animation: underwayCircleRotate 15s linear infinite reverse;
}
.contact-page .of-submit {
   

    height: auto;
    min-height: 54px;
    font-weight: 400;
    color: #211754;
    border-radius: 8px;
    padding: 10px;
    font-size: clamp(14px, 6vw, 25px);
    border: 2px solid var(--Prim-4, #EE2B5D) !important;
    background: var(--Prim-5, #2D5DCB) !important;
    font-family: 'Cubao Free';
    border: none;
color: #DCD6FF !important;
    cursor: pointer;
    z-index: 2;
}
@keyframes underwayCircleRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes underwayScaleUp {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
}

.underway-text-path {
    font-size: 3px;
    font-weight: 400;
    fill: none;
    stroke: #c00;
    stroke-width: 0.05;
    stroke-linejoin: round;
    letter-spacing: 0.02em;
    paint-order: stroke fill;
}

/* Falling star images (star.png) at 12° angle – reused from main style */
.falling-stars-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.falling-star-img {
    position: absolute;
    top: -40px;
    width: 24px;
    height: auto;
    opacity: 0;
    transform: translate(0, 0) rotate(12deg);
    animation: fallingStarImg 5s linear infinite;
}

/* 7 stars, start from left, fall at 12° toward right */
.falling-star-img:nth-child(1) { left: 2%;  animation-delay: 0s;    animation-duration: 4.5s; width: 20px; }
.falling-star-img:nth-child(2) { left: 18%; animation-delay: 0.8s;  animation-duration: 5s; }
.falling-star-img:nth-child(3) { left: 34%; animation-delay: 1.5s;  animation-duration: 4.2s; width: 18px; }
.falling-star-img:nth-child(4) { left: 50%; animation-delay: 0.3s;  animation-duration: 5.5s; }
.falling-star-img:nth-child(5) { left: 66%; animation-delay: 2s;   animation-duration: 4.8s; width: 22px; }
.falling-star-img:nth-child(6) { left: 82%; animation-delay: 0.6s;  animation-duration: 4.3s; }
.falling-star-img:nth-child(7) { left: 95%; animation-delay: 1.2s;  animation-duration: 5.2s; width: 26px; }

/* Fall at exactly 12° from vertical: tan(12°) ≈ 0.2126 → 110vh down ≈ 23.38vh right */
@keyframes fallingStarImg {
    0% {
        transform: translate(0, 0) rotate(12deg);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    70% {
        transform: translate(16.37vh, 77vh) rotate(12deg);
        opacity: 0.75;
    }
    95% {
        transform: translate(22.32vh, 105vh) rotate(12deg);
        opacity: 0;
    }
    100% {
        transform: translate(23.38vh, 110vh) rotate(12deg);
        opacity: 0;
    }
}

/* Project type banner (reused on contact page) */
.project-type-banner {
    /* position: absolute; */
    left: 0;
    right: 0;
margin-top: 10%;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
    background-color: #EE2B5D;
    border-bottom: 5px solid #32C9C4;
    transform: rotate(3deg);
}

.project-type-banner-track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: projectTypeBannerMarquee 160s linear infinite;
}

.project-type-banner-text {
    display: inline-block;
    padding: 5px 0px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
    color: #ffffff;
}

@keyframes projectTypeBannerMarquee {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Scroll-to-top star + menu (Project, Home, Contact) */
.star-deco {
    position: absolute;
    width: 25px;
    height: auto;
    z-index: 9999;
    pointer-events: none;
}

.star-1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    margin-top: 29%;
}

.star-menu-wrap {
    position: fixed;
    top: auto;
    /* bottom: 120px; */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    z-index: 100;
    pointer-events: auto;
}

.star-menu-wrap .star-deco.star-1 {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    transform: none;
    display: block;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: clamp(28px, 6vw, 56px);
    height: auto;
    width: 100%;
}

.star-menu-wrap:hover .star-deco.star-1 {
    transform: scale(1.1);
}

.star-menu {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(clamp(4px, 1vw, 8px));
    padding: 0;
    margin-top: clamp(2px, 0.6vw, 4px);
    margin-bottom: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: clamp(4px, 1vw, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 101;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
}

.star-menu-wrap:hover .star-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(clamp(4px, 1vw, 8px));
}

/* --- TABLET & MOBILE TỔNG QUÁT --- */
@media (max-width: 1024px) {
    .star-menu-wrap { /* Thay .logo-class bằng class thật của bạn */
        width: 400px; /* Kích thước cho Tablet */
        height: auto;
        transition: all 0.3s ease; /* Hiệu ứng mượt khi xoay màn hình */
    }
}

/* --- MOBILE (DƯỚI 767px) --- */
@media (max-width: 767px) {
    .star-menu-wrap {
        width: 350px; /* Kích thước lớn hơn cho Mobile dọc */
    }
}

/* --- CHẾ ĐỘ XOAY NGANG (LANDSCAPE) --- */
/* Thường thì khi xoay ngang, chiều cao màn hình rất thấp, 
   ta nên thu nhỏ lại một chút để không chiếm hết diện tích */
@media (max-height: 500px) and (orientation: landscape) {
    .star-menu-wrap  {
        width: 400px; 
        max-height: 40px; /* Giới hạn chiều cao để không đẩy menu xuống quá thấp */
    }
    
    .star-menu-wrap {
        padding: 5px 15px; /* Thu hẹp khoảng cách menu khi nằm ngang */
    }
}

.star-menu a {
    display: block;
    padding: clamp(8px, 1.2vw, 12px) clamp(14px, 2.2vw, 22px);
    color: #32C9C4;
    font-family: 'Cubao Free', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 5.5vw, 3.6rem);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    -webkit-text-stroke: clamp(1px, 0.3vw, 2px) #EE2B5D;
    paint-order: stroke fill;
    transition: color 0.2s ease, -webkit-text-stroke 0.2s ease;
    border-bottom: none;
}

.star-menu a:hover {
    background: transparent;
    color: #EE2B5D;
    -webkit-text-stroke-color: #32C9C4;
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7) rotate(15deg);
    }
}

.star-menu-wrap.is-sticky {
    position: fixed;
    top: auto;
    left: auto;
    bottom: 30px;
    right: 30px;
    transform: none;
    margin: 0;
    z-index: 1000;
    transition: all 0.5s ease;
    animation: starPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.star-menu-wrap.is-sticky .star-deco.star-1 {
    width: 40px;
}

.star-menu-wrap.is-sticky:hover .star-deco.star-1 {
    transform: scale(1.2) rotate(180deg);
}

.star-menu-wrap.is-sticky .star-menu {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 8px;
    transform: translateX(-50%) translateY(0);
}

.star-menu-wrap.is-sticky:hover .star-menu {
    transform: translateX(-50%) translateY(0);
}

.star-deco.is-sticky {
    position: fixed;
    top: auto;
    left: auto;
    bottom: 30px;
    right: 30px;
    transform: none;
    margin: 0;
    z-index: 1000;
    cursor: pointer;
    transition: all 0.5s ease;
    width: 40px;
    animation: starPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes starPop {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.star-deco.is-sticky:hover {
    transform: scale(1.2) rotate(180deg);
}

/* Hide star when scrolled (no sticky, does not follow screen) */
.star-menu-wrap.scrolled,
.star-deco.scrolled {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Back to top button (back-top.png): visible when scrolled down */
.back-top-btn {
    position: fixed;
    bottom: 30px;
    right: 44px;
    z-index: 999;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}
.back-top-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.back-top-btn:hover {
    transform: scale(1.1);
}
.back-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

.contact-hero-section {
    position: relative;
    padding: 80px 0;
    /* margin-bottom: 100px; */
}

.contact-hero-section .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10%;
}

/* Center left column content (avatar) vertically & horizontally */
.contact-hero-section .col-md-6:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-side {
    padding: 0px 12% 0% 0%;
    display: flex;
    flex-direction: column;
    margin-top: -15%;
}

.contact-side .about-block {
    position: relative;
    order: 1;
    margin-bottom: 24px;
    transform: rotate(-12deg);
}

.contact-side .about-block .about-me-img {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 80%;
    margin: 0 auto 16px;
    display: block;
}

.contact-side .about-block .about-me-text {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 25px;
    text-shadow: none !important;
}

.contact-side .skills-frames {
    position: relative;
    width: 100%;
    left: 0;
    margin: 0;
    top: 0;
    order: 2;
    transform: rotate(-12deg);
}

/* Scroll down button under skills - desktop only */
.contact-scroll-down {
    position: relative;
    width: 100%;
    left: 0;
    margin: 0;
    top: 0;
    order: 2;
    display: flex;
    justify-content: right;
}

.contact-scroll-down-icon {
    display: block;
    width: auto;
    max-width: 260px;
}

@media screen and (max-width: 1024px) {
    .contact-scroll-down {
        display: none;
    }
}

/* Center skills-frames block inside right column on contact page */
.contact-page .contact-side .skills-frames {
    width: auto;
    margin: 0 auto;
    left: 8%;
}

.contact-side .awards-grid {
    margin-top: 0;
    margin-bottom: 30px;
    justify-content: flex-start;
}

/* Awards section - fit viewport, no horizontal overflow */
.awards-section {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Awards Grid - separate block section, 24px gap between cards */
.awards-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    padding: 0;
    position: relative;
    z-index: 10;
    margin-top: 40px;
    margin-bottom: 50px;
    max-width: 90%;
    box-sizing: border-box;
    margin: auto;
}

.award-card {
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
    transform: rotate(-12deg);
}

.award-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}

/* Desktop ratio: 30% - 35% - 35% */
.award-card:nth-child(1) {
    flex-basis: 30%;
    max-width: 30%;
}

.award-card:nth-child(2),
.award-card:nth-child(3) {
    flex-basis: 35%;
    max-width: 35%;
}

.award-card:nth-child(2) {
    z-index: 2;
}

.award-card:nth-child(3) {
    z-index: 3;
}

.award-img-wrapper {
    border-radius: 0;
    overflow: visible;
    max-width: 100%;
    display: inline-block;
    width: fit-content;
}

.award-img-wrapper img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Align first award image to the right on desktop only */
@media (min-width: 992px) {
    .award-card:nth-child(1) .award-body {
        align-items: flex-end;
        margin-left: auto;
    }
}

/* Desktop: show validation errors as modal, not inline alert */
@media (min-width: 992px) {
    .contact-page .contact-form-overlay .alert {
        display: none;
    }
}

.award-text {
    margin-top: 5px;

    padding-left: 0;
    margin-left: 0;
    /* Specific margins set below per card */
    transform-origin: top left;
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* Specific text alignment per card */
.award-card:nth-child(1) .award-text {
    text-align: center;
}

.award-card:nth-child(2) .award-text {
    text-align: center;
}

.award-card:nth-child(3) .award-text {
    text-align: center;
}

.award-title {
    font-family: 'Cubao Free 2 Exp', 'Cubao Free', 'Black Ops One', cursive, sans-serif;
    font-size: 30px;
    /* Requested size */
    font-weight: 400;
    color: #EE2B5D;
    margin: 0;
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: -0.3px;
}

.award-subtitle {

    font-size: 24px;
    /* Scaled up subtitle */
    font-weight: 400;
    color: #211754;
    margin: 4px 0 0 0;
}

/* Contact Page - Flex Column Layout & Full Background */
.contact-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background-image: url('../assets/images/bg_contact_page.png');
    background-size: cover;
    background-position: t;
    background-repeat: no-repeat;
}

/* Each main section as a vertical block from top to bottom */
.contact-page > section,
.contact-form {
    width: 100%;
    position: relative;
    padding: 60px 0;
}

/* Top section: Contact page image */
.contact-wrapper {
    position: relative;
    /* Context for absolute hero */
    width: 100%;
    line-height: 0;
}

.contact-wrapper img {
    width: 100%;
    display: block;
}

/* Contact avatar spotlight effect */
.contact_avatar {
    position: relative;
    width: 80%;
    max-width: 80%;
    line-height: 0;
    overflow: hidden;
    cursor: none;
    transform: rotate(-12deg);
    margin: 0 auto;
}

.contact-avatar-base {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
}

.contact-avatar-spotlight {
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/avata_about.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    --spot-rect-half-w: 25%;
    --spot-rect-half-h: 25%;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--spot-y, -50%) - var(--spot-rect-half-h)),
            black calc(var(--spot-y, -50%) - var(--spot-rect-half-h)),
            black calc(var(--spot-y, -50%) + var(--spot-rect-half-h)),
            transparent calc(var(--spot-y, -50%) + var(--spot-rect-half-h))
        ),
        linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--spot-x, -50%) - var(--spot-rect-half-w)),
            black calc(var(--spot-x, -50%) - var(--spot-rect-half-w)),
            black calc(var(--spot-x, -50%) + var(--spot-rect-half-w)),
            transparent calc(var(--spot-x, -50%) + var(--spot-rect-half-w))
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--spot-y, -50%) - var(--spot-rect-half-h)),
            black calc(var(--spot-y, -50%) - var(--spot-rect-half-h)),
            black calc(var(--spot-y, -50%) + var(--spot-rect-half-h)),
            transparent calc(var(--spot-y, -50%) + var(--spot-rect-half-h))
        ),
        linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--spot-x, -50%) - var(--spot-rect-half-w)),
            black calc(var(--spot-x, -50%) - var(--spot-rect-half-w)),
            black calc(var(--spot-x, -50%) + var(--spot-rect-half-w)),
            transparent calc(var(--spot-x, -50%) + var(--spot-rect-half-w))
        );
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.js-contact-avatar-wrap:hover .contact-avatar-spotlight {
    opacity: 1;
}

/* Bottom section: Form overlay on image */
/* Skills Frames - 2 rows: 3 items top, 2 items bottom; rotated 13deg; aligned on same baseline */
.skills-frames {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: auto auto;
    align-items: end;
    justify-content: center;
    gap: 0 0;
    row-gap: 12px;
    position: absolute;
    width: 100%;
    left: 21%;
    margin-left: 60px;
    top: 60%;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
}

.skills-frames img.skills-image,
.skills-frames > img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.skill-frame:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.skill-frame:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.skill-frame:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
}

.skill-frame:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
}

.skill-frame:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
}

.skill-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 120px;
    margin: 0 -10px;
    padding: 16px 24px;
    pointer-events: auto;
    overflow: hidden;
    box-sizing: border-box;
}

.skill-frame img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.skill-label {
    position: relative;
    z-index: 1;
    transform: rotate(-12deg);
    font-family: 'Cubao Free 2 Exp', 'Cubao Free', 'Black Ops One', cursive, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    letter-spacing: -0.3px;
    color: #DCD6FF;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
}

.contact-form {
    width: 100%;
    line-height: 0;
    overflow: visible;
}

/* Desktop contact form width */
@media (min-width: 992px) {
    .contact-page .contact-form {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
    }
}

/* Overlay container - image as background, form on top */
.contact-form-overlay {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: visible;
}

.contact-form-bg {
    width: 100%;
    display: block;
}

.contact-page {
    --contact-form-input-font-size: clamp(18px, 1.4vw + 10px, 18px);
    --contact-form-placeholder-font-size: var(--contact-form-input-font-size);
}

/* Contact Me icon - overlapping boundary */
.contact-icon {
    position: absolute;
    top: -15%;
    left: 0;
    width: 32%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

/* Social icons 2x2 grid */
.social-icons-grid {
    position: absolute;
    top:65%;
    left: 0;
    width: 32%;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, auto);
    row-gap: clamp(8px, 1.5vw, 16px);
    column-gap: clamp(12px, 2vw, 20px);
    justify-content: center;
    align-content: center;
    justify-items: center;
    transform: translateY(-50%);
}

.social-icon-link {
    display: block;
    width: clamp(50px, 6vw, 80px);
    height: clamp(50px, 6vw, 80px);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: rotate(-12deg);
}

/* Hard shadow behind (pseudo-element) */
.social-icon-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 8px;
    z-index: -1;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 0 rgba(255, 105, 180, 0);
}

.social-icon-link:hover {
    transform: translate(4px, -4px);

}

.social-icon-link:hover::before {
    /* transform: translate(-4px, 6px); */
    opacity: 1;
    box-shadow: -5px 5px 0px rgba(255, 105, 180, 1);
}

.social-icon-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

/* Form positioned absolutely on top of the image */
.overlay-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Contact form field labels:
   - Desktop keeps an absolute overlay layout, so labels are hidden.
   - Tablet/mobile switches to a stacked layout, so labels are shown. */
.overlay-form-label {
    display: none;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    line-height: 1.2;
    /* font-family: 'Cubao Free 2 Exp', 'Cubao Free', 'Black Ops One', cursive, sans-serif; */
    font-weight: 400;
    font-size: 16px;
    color: #DCD6FF;
    text-transform: none;
}

/* Inputs overlay exactly on white boxes */
.overlay-form input,
.overlay-form textarea {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Effra', 'Outfit', sans-serif;
    font-weight: 400;
    color: #32C9C4;
    box-sizing: border-box;
    padding: 1%;
    cursor: text;
    letter-spacing: 0;
    line-height: 100%;
    font-size: var(--contact-form-input-font-size);
    /* Cách khuyên dùng: số không đơn vị sẽ nhân với font-size hiện tại */
    line-height: 1.6;
}

.overlay-form input::placeholder,
.overlay-form textarea::placeholder {
    color: #32C9C4;
    opacity: 0.5;
    font-size: var(--contact-form-placeholder-font-size);
}

.overlay-form input:focus,
.overlay-form textarea:focus {
    background: rgba(49, 200, 200, 0.06);
}

/* Name input - on the white box */
.of-name {
    top: 11.5%;
    left: 38.1%;
    width: 28.0%;
    height: 8.0%;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
}

/* Company input */
.of-company {
    top: 11.5%;
    left: 67.2%;
    width: 28.0%;
    height: 8.0%;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
}

/* Email input */
.of-email {
    top: 26.7%;
    left: 38.1%;
    width: 57.1%;
    height: 8.0%;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
}

/* Message textarea */
.of-message {
    top: 41.9%;
    left: 38.1%;
    width: 57.1%;
    height: 36.4%;
    font-size: clamp(0.7rem, 1.1vw, 0.95rem);
    resize: none;
    line-height: 1.6;
    padding-top: 1%;
}

/* Submit button - invisible on top of image button (default usage on other pages) */
.of-submit {
    position: absolute;
    top: 82.3%;
    left: 53.9%;
    width: 25.4%;
    height: 9.0%;
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    font-size: 0;
    z-index: 3;
}

.of-submit:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}


/* Interactive Hero - Masking Effect */
.interactive-hero {
    position: absolute;
    top: 190px;
    left: -0.5%;

    /* Moved closer to the left edge */
    width: 963.43px;
    height: 963.43px;
    margin: 0;
    /* Remove margins that were pushing content */
    z-index: 10;
    /* Ensure it sits on top */
    line-height: 0;
    overflow: hidden;
    cursor: none;
    /* Hide default cursor if desired, or 'crosshair' */
    /* Represents 1/4 area (quadrant) of 963.43px */
    --mask-size: 481.71px;
    /* ~50% of width */
}

.hero-base {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Force stretch to container dimensions */
}

.hero-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Allow interaction to pass through if needed */

    /* Masking Properties */
    -webkit-mask-image: url('../Cover 3.png');
    mask-image: url('../Cover 3.png');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: var(--mask-size) var(--mask-size);
    mask-size: var(--mask-size) var(--mask-size);

    /* Position calculated to center the mask on cursor */
    -webkit-mask-position: calc(var(--x) - (var(--mask-size) / 2)) calc(var(--y) - (var(--mask-size) / 2));
    mask-position: calc(var(--x) - (var(--mask-size) / 2)) calc(var(--y) - (var(--mask-size) / 2));

    /* Transition for smoother movement (optional, remove if laggy) */
    transition: -webkit-mask-position 0.1s ease, mask-position 0.1s ease, opacity 0.3s ease;
    opacity: 0;
    /* Hidden by default */
}

/* Show mask only on hover */
.interactive-hero:hover .hero-reveal {
    opacity: 1;
}


/* Interactive Hero Project - Same as Contact but separate class */
.interactive-hero-project {
    position: absolute;
    top: 1790px;
    left: 1%;
    width: 963.43px;
    height: 963.43px;
    margin: 0;
    z-index: 10;
    line-height: 0;
    overflow: hidden;
    cursor: none;

    /* Variables for mask position */
    --x: 50%;
    --y: 50%;
    /* Represents 1/4 area (quadrant) of 963.43px */
    --mask-size: 481.71px;
    /* ~50% of width */
}

/* Show mask only on hover */
.interactive-hero-project:hover .hero-reveal-project {
    opacity: 1;
}

.hero-base-project {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Optional: Grayscale for base if user wants contrast */
    /* filter: grayscale(100%); */
}

.hero-reveal-project {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;

    /* Masking Properties */
    -webkit-mask-image: url('../cover 4.png');
    mask-image: url('../cover 4.png');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: var(--mask-size) var(--mask-size);
    mask-size: var(--mask-size) var(--mask-size);

    /* Position calculated to center the mask on cursor */
    -webkit-mask-position: calc(var(--x) - (var(--mask-size) / 2)) calc(var(--y) - (var(--mask-size) / 2));
    mask-position: calc(var(--x) - (var(--mask-size) / 2)) calc(var(--y) - (var(--mask-size) / 2));

    transition: -webkit-mask-position 0.1s ease, mask-position 0.1s ease, opacity 0.3s ease;
    opacity: 0;
    /* Hidden by default */
}

/* Scroll Limit Button (Frame 32) */
.scroll-limit-btn {
    position: absolute;
    bottom: 69%;
    /* Increased from 25% to push it up */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 450px;
    /* Increased 3x from 150px */
    margin-left: 650px;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.3s ease;
}


/* Underway Decoration */
.underway-img {
    position: absolute;
    bottom: 77%;

    z-index: 15;
    pointer-events: none;
    /* Decorative element */
}

/* Project Cards Grid (Dynamic Render) */
.project-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns as per request */
    gap: 20px;
    padding: 20px;
    width: 80%;
    /* Adjust width as needed */
    margin: 300px auto 50px auto;
    /* Combined margin: top, right, bottom, left */
    /* Center grid and add top spacing */
    z-index: 60;
    /* Increased z-index */
    position: relative;
}

.project-card {
    display: block;
    width: 100%;
    /* aspect-ratio removed to let image dictate height if needed */
    position: relative;
    text-decoration: none;
}

.project-card img {
    /* margin-top removed as we are using overflow: visible now */
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Changed to contain to show full image without cropping */
    transition: opacity 0.3s ease;
}

/* Hover Effect: Switch Image */
.project-card .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    /* Hidden by default */
}

.project-card:hover .default-img {
    opacity: 0;
}

/* Hover Effect: Switch Image */
.project-card:hover .hover-img {
    opacity: 1;
}

/* About Me Image with Animation */
.about-me-img {
    position: absolute;
    top: 35%;
    /* Adjust vertical position */
    right: 15%;
    width: 30%;
    /* Resized to 50% smaller */
    /* Adjust size */
    z-index: 15;
    pointer-events: none;
    animation: floatAboutMe 3s ease-in-out infinite;
}

@keyframes floatAboutMe {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* About Me Text */
.about-me-text {
    position: absolute;
    top: 54%;
    right: 6%;
    width: max-content;
    white-space: nowrap;
    font-family: 'Effra', sans-serif;
    font-weight: 400;
    font-size: 36px;
    color: #211754;
  
    line-height: 1.2;
    z-index: 15;
    pointer-events: none;
    text-align: left;
    /* Halogen pulse animation */
    animation: halogenPulse 4s infinite alternate;
}

@keyframes halogenPulse {
    0% {
        text-shadow: 0 0 2px rgba(33, 23, 84, 0.1);
        opacity: 0.9;
    }

    20% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(33, 23, 84, 0.3);
    }

    50% {
        text-shadow: 0 0 15px rgba(33, 23, 84, 0.6), 0 0 5px rgba(255, 255, 255, 0.4);
        opacity: 0.85;
    }

    80% {
        opacity: 1;
    }

    100% {
        text-shadow: 0 0 2px rgba(33, 23, 84, 0.1);
        opacity: 0.9;
    }
}

/* =========================================
   RESPONSIVE - Tablet Landscape (≤1024px)
   ========================================= */
@media screen and (max-width: 1024px) {
   /* === PROJECT-TYPE BANNER POSITION - TABLET/MOBILE === */

    /* === PAGE LAYOUT (use mobile-style constraints up to 1024px) === */
    .contact-page {
        overflow-x: hidden;
        min-height: 100vh;
        height: auto;
        --contact-form-input-font-size: clamp(16px, 1.2vw + 10px, 22px);
        --contact-form-placeholder-font-size: var(--contact-form-input-font-size);
    }
    .award-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        max-width: 100%;
    }
    
    .contact-page .contact-form {
        background-color: #211754;
    }

    .contact-wrapper {
        position: relative;
        min-height: auto;
        height: auto;
        width: 100%;
    }

    .contact-wrapper>img {
        width: 100%;
    }

    /* === INTERACTIVE HERO === */
    .interactive-hero,
    .interactive-hero-project {
        width: 65%;
        max-width: 700px;
        height: auto;
        aspect-ratio: 1/1;
        top: 250px;
    }

    /* === AWARDS GRID === */
    .awards-grid {
        transform: none;
        margin-bottom: 20px;
        max-width: 100%;
        overflow: visible;
    }

    .award-card:nth-child(1) .award-img-wrapper,
    .award-card:nth-child(2) .award-img-wrapper,
    .award-card:nth-child(3) .award-img-wrapper {
        width: fit-content;
        max-width: 100%;
        height: auto;
    }

    /* .award-title,
    .award-subtitle {
        font-size: 26px;
    } */
    .contact-page .award-title
    {
        /* 1. Làm chữ to hơn: tăng giá trị clamp */
         font-size: clamp(22px, 8vw, 30px); 
        
         /* 2. Làm chữ đậm hơn */
         font-weight: 800; 
 
         /* 3. Kéo giãn chiều cao chữ (1.5 là cao gấp 1.5 lần bình thường) */
         display: inline-block; /* Bắt buộc phải có để transform hoạt động */
         transform: scaleY(1.2); 
         
         /* 4. Chỉnh khoảng cách dòng để không bị đè lên nhau do scaleY */
         line-height: 0.8; 
         
         /* 5. Chỉnh khoảng cách giữa các chữ nếu muốn */
         letter-spacing: 0px; 
         
         /* Đảm bảo căn chỉnh không bị lệch sau khi scale */
         transform-origin: center; 
    }

    /* === AWARDS GRID - TABLET: STACK CARDS FULL WIDTH === */
    .awards-grid {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .award-card,
    .award-card:nth-child(2),
    .award-card:nth-child(3) {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    /* Center award images on tablet/mobile */
    .award-img-wrapper {
        text-align: center;
    }

    .award-img-wrapper img {
        margin-left: auto;
        margin-right: auto;
    }

 

    /* === HERO COLUMNS - TABLET/LARGE MOBILE: STACK 2 COLS === */
    .contact-hero-section .row {
        flex-wrap: wrap;
    }

    .contact-hero-section .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* === SKILLS FRAMES === */
    .skills-frames {
        left: 5%;
        transform: scale(0.7);
        transform-origin: center;
    }

    .skill-frame img {
        width: 100%;
        height: 100%;
    }

    .skill-label {
        font-size: 26px;
    }

    /* === CONTACT FORM - TABLET USES MOBILE STACKED LAYOUT === */
    .contact-page .contact-form {
        padding: 24px 16px 40px;
        margin-top: 0;
    }

    .contact-page .contact-form-overlay {
        max-width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: normal;
    }

    .contact-page .contact-form-bg {
        display: none;
    }

    .contact-page .contact-icon {
        position: relative;
        top: auto;
        left: auto;
        width: 60%;
        /* max-width: 260px; */
        margin: 8px 0;
        display: block;
        order: 1;
    }

    .contact-page .social-icons-grid {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 2%;
        margin: 5% 0 0 16px;
        order: 2;
    }

    /* Validation alert: place it under social icons on mobile/tablet */
    .contact-page .contact-form-overlay .alert {
        order: 3;
        width: 100%;
        max-width: 480px;
        margin-bottom: 8px;
    }

    .contact-page .social-icon-link {
        width: 100px;
        height: 100px;
    }

    .contact-page .overlay-form {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        /* max-width: 480px; */
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 0 16px;
        order: 4;
    }

    .contact-page .overlay-form input,
    .contact-page .overlay-form textarea {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 44px;
        font-size: var(--contact-form-input-font-size);
        padding: 12px 14px;
        border: 1px solid rgba(50, 201, 196, 0.5);
        /* border-radius: 8px; */
        background: #ffffff;
        line-height: 1.4;
        -webkit-appearance: none;
        appearance: none;
        font-family: 'Effra', sans-serif;
        /* Cách khuyên dùng: số không đơn vị sẽ nhân với font-size hiện tại */
        line-height: 1.2;
    }

    .contact-page .overlay-form input::placeholder,
    .contact-page .overlay-form textarea::placeholder {
        font-size: var(--contact-form-placeholder-font-size);
    }

    .contact-page .overlay-form textarea {
        min-height: 100px;
        resize: vertical;
    }

    .contact-page .overlay-form-label {
        display: block;
        font-size: var(--contact-form-placeholder-font-size);
        margin: 0;
    }

    .contact-page .of-name,
    .contact-page .of-company,
    .contact-page .of-email,
    .contact-page .of-message {
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
    }
    /* Mobile/Tablet: real visible button under the stacked form */
    .contact-page .of-submit {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        font-size: clamp(14px, 4vw, 26px);
        border-radius: 8px;
        border: 2px solid var(--Prim-4, #EE2B5D) !important;
        background: var(--Prim-5, #2D5DCB) !important;
        font-family: 'Cubao Free';
        color: #DCD6FF !important;
        cursor: pointer;
        z-index: 2;
    }


    .contact-page .of-submit:hover {
        background: rgba(50, 201, 196, 1);
    }

    /* === ABOUT ME === */
    .about-me-text {
        font-size: 28px;
    }

    /* === SCROLL BUTTON === */
    .scroll-limit-btn {
        max-width: 300px;
        margin-left: 0;
        left: 70%;
    }

    /* === PROJECT CARDS === */
    .project-cards-grid {
        width: 90%;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================
   RESPONSIVE - Tablet Portrait & iPad Air (≤820px)
   ========================================= */
@media screen and (max-width: 820px) {

    /* ─────────────────────────────────────────
       CONTACT PAGE LAYOUT
       Switch from absolute overlapping to
       vertical flow layout for mobile.
       ───────────────────────────────────────── */
    .contact-page {
        overflow-x: hidden;
        min-height: 100vh;
        height: auto;
    }

    .contact-wrapper {
        position: relative;
        min-height: auto;
        height: auto;
    }
   /* === PROJECT-TYPE BANNER POSITION - TABLET/MOBILE === */


    /* Background image stays as-is (relative in flow) */
    .contact-wrapper>img:not(.hero-base):not(.hero-reveal):not(.scroll-limit-btn):not(.underway-img) {
        width: 100%;
        min-height: 150vh;
        display: block;
        object-fit: cover;
        object-position: top center;
    }

    /* ─────────────────────────────────────────
       INTERACTIVE HERO
       Scale down, keep absolute but smaller.
       ───────────────────────────────────────── */
    .interactive-hero,
    .interactive-hero-project {
        width: 64%;
        max-width: 384px;
        height: auto;
        aspect-ratio: 1/1;
        top: 80px;
        left: 2%;
        position: absolute;
        margin: 0;
        z-index: 10;
        --mask-size: 32vw;
    }

    .interactive-hero-project {
        top: 80px;
        margin-top: 82%;
    }

    /* ─────────────────────────────────────────
       SCROLL BUTTON
       ───────────────────────────────────────── */
    .scroll-limit-btn {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        max-width: 200px;
        z-index: 20;
    }

    /* ─────────────────────────────────────────
       UNDERWAY DECORATION
       ───────────────────────────────────────── */
    .underway-img {
        display: none;
    }

    /* ─────────────────────────────────────────
       ABOUT ME SECTION
       Stack vertically below wrapper.
       ───────────────────────────────────────── */
    .about-me-img {
        position: relative;
        width: 160px;
        top: auto;
        right: auto;
        left: 200px;
        margin: -195% auto 10px;
        display: block;
        z-index: 5;
    }

    .about-me-text {
        position: relative;
        top: auto;
        right: auto;
        width: 90%;
        left: 200px;
        margin: -3% auto 20px;
        font-size: 18px;
        text-align: center;
        transform: rotate(0deg);
        white-space: normal;
        z-index: 5;
    }

    /* ─────────────────────────────────────────
       AWARDS GRID
       Stack vertically, center cards.
       ───────────────────────────────────────── */
    .awards-grid {
        flex-direction: column;
        align-items: center;
        margin-top: 24px;
        margin-bottom: 24px;
        position: relative;
        z-index: 2;
        max-width: 100%;
    }

    .award-card,
    .award-card:nth-child(2),
    .award-card:nth-child(3) {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 16px;
        transform: rotate(-12deg) !important;
        /* giữ nguyên rotate -12deg từ base */
    }

    .award-card:first-child {
        margin-top: 0;
    }

    .award-card:nth-child(1) .award-img-wrapper,
    .award-card:nth-child(2) .award-img-wrapper,
    .award-card:nth-child(3) .award-img-wrapper {
        width: fit-content;
        max-width: 100%;
        height: auto;
    }

    /* .award-title,
    .award-subtitle {
        font-size: 22px;
    } */
    .award-title{
        /* 1. Làm chữ to hơn: tăng giá trị clamp */
        font-size: clamp(24px, 8vw, 34px); 
            
        /* 2. Làm chữ đậm hơn */
        font-weight: 800; 

        /* 3. Kéo giãn chiều cao chữ (1.5 là cao gấp 1.5 lần bình thường) */
        display: inline-block; /* Bắt buộc phải có để transform hoạt động */
        transform: scaleY(1.5); 
        
        /* 4. Chỉnh khoảng cách dòng để không bị đè lên nhau do scaleY */
        line-height: 0.8; 
        
        /* 5. Chỉnh khoảng cách giữa các chữ nếu muốn */
        letter-spacing: 1px; 
        
        /* Đảm bảo căn chỉnh không bị lệch sau khi scale */
        transform-origin: center; 
    }
    /* ─────────────────────────────────────────
       SKILLS FRAMES (contact page only)
       ───────────────────────────────────────── */
    .contact-page .skills-frames {
        position: relative;
        top: auto;
        left: auto;
        margin: 24px 0 0 0;
        width: 100%;
        z-index: 20;
        margin-left: 0;
    }

    .contact-page .skill-frame,
    .contact-page .skill-frame:nth-child(1),
    .contact-page .skill-frame:nth-child(2),
    .contact-page .skill-frame:nth-child(3),
    .contact-page .skill-frame:nth-child(4),
    .contact-page .skill-frame:nth-child(5) {
        margin: 3px;
        grid-column: auto;
        grid-row: auto;
        width: auto !important;
        height: auto !important;
    }

    .contact-page .skill-frame img {
        width: 100%;
        height: 100%;
    }

    .contact-page .skill-label {
        font-size: 20px;
    }

    /* ─────────────────────────────────────────
       CONTACT FORM
       Full width, scale inputs down.
       ───────────────────────────────────────── */
    .contact-form {
        margin-top: 15px;
        position: relative;
        z-index: 5;
    }

    .contact-form-overlay {
        width: 100%;
    }

    .contact-icon {
        width: 100%;
        max-width: 100%;
        top: -12%;
        left: 0;
    }

    .overlay-form input,
    .overlay-form textarea {
        font-size: 14px;
    }

    .overlay-form input::placeholder,
    .overlay-form textarea::placeholder {
        font-size: 14px;
    }

    .of-name,
    .of-company,
    .of-email,
    .of-message {
        font-size: clamp(11px, 2.5vw, 14px);
    }

    .social-icons-grid {
        left: 0;
        width: 100%;
        gap: 8px;
    }

    .social-icon-link {
        width: 32px;
        height: 32px;
    }


    /* ─────────────────────────────────────────
       PROJECT CARDS GRID
       ───────────────────────────────────────── */
    .project-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
        margin-top: 100px;
        gap: 15px;
    }

    /* ─────────────────────────────────────────
       FLOATING MENU
       ───────────────────────────────────────── */
    .floating-menu-container {
        bottom: 20px;
        right: 20px;
    }

    .menu-trigger {
        width: 55px;
        height: 55px;
    }

    .menu-items {
        bottom: 75px;
        right: 0;
    }

    .awards-grid {
        margin-top: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0;

        overflow: visible;
    }

    .award-card,
    .award-card:nth-child(1),
    .award-card:nth-child(2),
    .award-card:nth-child(3) {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        transform: none;
        margin-left: 0;
    }

    .award-card:first-child {
        margin-top: 0;
    }

    .award-card:nth-child(1) .award-img-wrapper,
    .award-card:nth-child(2) .award-img-wrapper,
    .award-card:nth-child(3) .award-img-wrapper {
        width: fit-content;
        height: auto;
    }

    .scroll-limit-btn {
        bottom: 70%;
        margin-left: 300px;

    }

    .contact-form {
        margin-top: 10%
    }

}

/* =========================================
   RESPONSIVE - Mobile (≤480px)
   ========================================= */
@media screen and (max-width: 480px) {

    /* === PAGE LAYOUT === */
    .contact-page {
        width: 100vw;
        overflow-x: hidden;
    }
   /* === PROJECT-TYPE BANNER POSITION - TABLET/MOBILE === */


    .contact-wrapper>img:not(.hero-base):not(.hero-reveal):not(.scroll-limit-btn):not(.underway-img) {
        width: 115% !important;
        max-width: none !important;
        min-height: 98vh;
        margin-left: -7.5%;
        object-fit: cover;
        object-position: top center;
    }

    /* === INTERACTIVE HERO === */
    .interactive-hero,
    .interactive-hero-project {
        max-width: 260px;
        top: 40px;
    }

    /* === SKILLS FRAMES (contact page only) === */
    .contact-page .skills-frames {
        position: relative;
        top: auto;
        left: auto;
        margin: 16px 0 0 0;
        width: 100%;
        z-index: 20;
    }

    .contact-page .skill-frame,
    .contact-page .skill-frame:nth-child(1),
    .contact-page .skill-frame:nth-child(2),
    .contact-page .skill-frame:nth-child(3),
    .contact-page .skill-frame:nth-child(4),
    .contact-page .skill-frame:nth-child(5) {
        margin: 3px;
        grid-column: auto;
        grid-row: auto;
        width: auto !important;
        height: auto !important;
        margin: -10px !important;
    }

    .contact-page .skill-frame img {
        width: 100%;
        height: 100%;
    }

    .contact-page .skill-label {
        font-size: 16px;
    }

    /* === AWARDS GRID === */
    .awards-grid {
        margin-top: 20px;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0;
        margin-left: 0;
        overflow: visible;
    }

    .award-card,
    .award-card:nth-child(2),
    .award-card:nth-child(3) {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        margin-left: 0;
        /* giữ nguyên rotate -12deg từ base */
    }

    .award-card:nth-child(1) .award-img-wrapper,
    .award-card:nth-child(2) .award-img-wrapper,
    .award-card:nth-child(3) .award-img-wrapper {
        width: fit-content;
        max-width: 100%;
        height: auto;
    }

    /* .award-title,
    .award-subtitle {
        font-size: 18px;
    } */
    .contact-page .award-title
    {
        /* 1. Làm chữ to hơn: tăng giá trị clamp */
         font-size: clamp(14px, 8vw, 22px); 
        
         /* 2. Làm chữ đậm hơn */
         font-weight: 800; 
 
         /* 3. Kéo giãn chiều cao chữ (1.5 là cao gấp 1.5 lần bình thường) */
         display: inline-block; /* Bắt buộc phải có để transform hoạt động */
         transform: scaleY(1.5); 
         
         /* 4. Chỉnh khoảng cách dòng để không bị đè lên nhau do scaleY */
         line-height: 0.8; 
         
         /* 5. Chỉnh khoảng cách giữa các chữ nếu muốn */
         letter-spacing: 0px; 
         
         /* Đảm bảo căn chỉnh không bị lệch sau khi scale */
         transform-origin: center; 
    }

    .award-card:nth-child(1) .award-text,
    .award-card:nth-child(2) .award-text,
    .award-card:nth-child(3) .award-text {
        text-align: left;
    }

    /* === ABOUT ME === */
    .about-me-img {
        width: 120px;
        margin: -200% auto 8px;
        left: 44px;
    }

    .about-me-text {
        font-size: 15px;
        width: 40%;
        margin-bottom: 15px;
        left: 90px;
    }

    /* === SCROLL BUTTON === */
    .scroll-limit-btn {
        bottom: 65%;
        margin-left: 150px;
        max-width: 150px;
    }

    /* === CONTACT FORM === */
    .contact-form {
        margin-top: -5%;
    }

    .contact-icon {
        width: 42%;
        top: -14%;
    }

    .overlay-form input,
    .overlay-form textarea {
        font-size: 11px;
    }

    .overlay-form input::placeholder,
    .overlay-form textarea::placeholder {
        font-size: 11px;
    }

    .overlay-form-label {
        font-size: 11px;
    }

    .of-name,
    .of-company,
    .of-email,
    .of-message {
        font-size: clamp(9px, 3vw, 11px);
    }

    .social-icons-grid {
        gap: 5px;
    }

    .social-icon-link {
        width: 25px;
        height: 25px;
    }

    /* === PROJECT CARDS === */
    .project-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        width: 95%;
        margin-top: 20px;
        gap: 8px;
        padding: 10px;
    }

    .project-card {
        transform: rotate(0deg) !important;
    }

    /* === FLOATING MENU === */
    .floating-menu-container {
        bottom: 14px;
        right: 14px;
    }

    .menu-trigger {
        width: 48px;
        height: 48px;
    }

    .menu-items {
        bottom: 65px;
    }

    .interactive-hero {
        width: 45%;
        left: 10px;
    }

}

/* =========================================
   RESPONSIVE - Small Mobile (≤360px)
   ========================================= */
@media screen and (max-width: 360px) {

    /* === INTERACTIVE HERO === */
    .interactive-hero,
    .interactive-hero-project {
        max-width: 220px;
        top: 30px;
    }

    /* === AWARDS === */
    .award-card,
    .award-card:nth-child(2),
    .award-card:nth-child(3) {
        transform: scale(0.5);
        margin-top: -50px;
    }

    /* .award-title,
    .award-subtitle {
        font-size: 16px;
    } */
    .contact-page .award-title
    {
        /* 1. Làm chữ to hơn: tăng giá trị clamp */
         font-size: clamp(14px, 8vw, 22px); 
        
         /* 2. Làm chữ đậm hơn */
         font-weight: 800; 
 
         /* 3. Kéo giãn chiều cao chữ (1.5 là cao gấp 1.5 lần bình thường) */
         display: inline-block; /* Bắt buộc phải có để transform hoạt động */
         transform: scaleY(1.5); 
         
         /* 4. Chỉnh khoảng cách dòng để không bị đè lên nhau do scaleY */
         line-height: 0.8; 
         
         /* 5. Chỉnh khoảng cách giữa các chữ nếu muốn */
         letter-spacing: 0px; 
         
         /* Đảm bảo căn chỉnh không bị lệch sau khi scale */
         transform-origin: center; 
    }

    /* === ABOUT ME === */
    .about-me-img {
        width: 100px;
    }

    .about-me-text {
        font-size: 12px;
    }

    /* === SKILLS === */
    .skill-frame,
    .skill-frame:nth-child(1),
    .skill-frame:nth-child(2),
    .skill-frame:nth-child(3),
    .skill-frame:nth-child(4),
    .skill-frame:nth-child(5) {
        transform: scale(0.42);
    }

    .skill-frame img {
        width: 100%;
        height: 100%;
    }

    .skill-label {
        font-size: 14px;
    }

    /* === CONTACT FORM === */
    .overlay-form input,
    .overlay-form textarea {
        font-size: 9px;
    }

    .overlay-form-label {
        font-size: 9px;
    }

    .of-name,
    .of-company,
    .of-email,
    .of-message {
        font-size: 9px;
    }

    .social-icon-link {
        width: 22px;
        height: 22px;
    }

    /* === FLOATING MENU === */
    .menu-trigger {
        width: 42px;
        height: 42px;
    }
}

/* =========================================
   CONTACT PAGE - Mobile only (≤767px)
   Web layout unchanged; fix stacking & overflow
   ========================================= */
@media screen and (max-width: 767px) {
    .contact-page {
        overflow-x: hidden;
        --contact-form-input-font-size: 16px;
        --contact-form-placeholder-font-size: 16px;
    }

    .contact-hero-section {
        padding: 24px 16px 40px;
        margin-bottom: 40px;
    }

    .contact-hero-section .row {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-hero-section .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Left column: avatar - full width, contained */
    .contact-page .contact-wrapper {
        width: 100%;
        padding: 0;
    }

    .contact-page .contact_avatar {
        width: 100%;
        max-width: 100%;
        line-height: 0;
        overflow: hidden;
    }

    .contact-page .contact_avatar .hero-base {
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
        object-position: center top;
        display: block;
    }

    /* Right column: about + skills - stack below, centered */
    .contact-page .contact-side {
        padding: 24px 16px;
        align-items: center;
        text-align: center;
    }

    .contact-page .contact-side .about-block {
        margin-bottom: 20px;
    }

    .contact-page .contact-side .about-block .about-me-img {
        width: 70%;
        max-width: 200px;
        margin: 0 auto 12px;
        display: block;
    }

    .contact-page .contact-side .about-block .about-me-text {
        width: 100%;
        font-size: clamp(14px, 4vw, 18px);
        text-align: center;
        margin: 0 auto;
        line-height: 1.4;
    }

    /* Skills image - single image on contact page */
    .contact-page .contact-side .skills-frames {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 auto;
        /* width: 90%; */
        /* max-width: 320px; */
        display: block;
        z-index: 1;
    }

    .contact-page .contact-side .skills-frames .skills-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Awards section - no overflow, centered */
    .contact-page .awards-section {
        padding-left: 16px;

    }

    .contact-page .awards-grid {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
        margin-bottom: 32px;
        padding: 0;
        transform: none;
    }

    .contact-page .award-card {
        width: 80%;
        margin-left: 0 !important;
        margin-left: 0 !important;
        transform: rotate(-13deg);
        margin-top: 16px;
        
    }

    .contact-page .award-card:nth-child(1) .award-text,
    .contact-page .award-card:nth-child(2) .award-text,
    .contact-page .award-card:nth-child(3) .award-text {
        text-align: center;
    }

    /* .contact-page .award-title,
    .contact-page .award-subtitle {
        font-size: clamp(14px, 5vw, 20px);
    } */
    .contact-page .award-title
    {
        /* 1. Làm chữ to hơn: tăng giá trị clamp */
         font-size: clamp(14px, 8vw, 18px); 
        
         /* 2. Làm chữ đậm hơn */
         font-weight: 800; 
 
         /* 3. Kéo giãn chiều cao chữ (1.5 là cao gấp 1.5 lần bình thường) */
         display: inline-block; /* Bắt buộc phải có để transform hoạt động */
         transform: scaleY(1.2); 
         
         /* 4. Chỉnh khoảng cách dòng để không bị đè lên nhau do scaleY */
         line-height: 0.8; 
         
         /* 5. Chỉnh khoảng cách giữa các chữ nếu muốn */
         letter-spacing: 0px; 
         
         /* Đảm bảo căn chỉnh không bị lệch sau khi scale */
         transform-origin: center; 
    }

    /* Contact form - mobile: stacked layout instead of overlay to prevent break */
    .contact-page .contact-form {
        padding: 24px 16px 40px;
        margin-top: 0;
    }

    .contact-page .contact-form-overlay {
        max-width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: normal;
    }

    .contact-page .contact-form-bg {
        display: none;
    }

    .contact-page .contact-icon {
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        max-width: 100%;
        margin: 8px 0;
        order: 1;
        display: block;
    }

    .contact-page .social-icons-grid {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 8px;
        margin: 13% 0;
        order: 2;
    }

    .contact-page .social-icon-link {
        width: 60px;
        height: 60px;
    }

    /* Stacked form - no absolute overlay on mobile */
    .contact-page .overlay-form {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        /* max-width: 400px; */
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 0 16px;
        order: 3;
    }

    .contact-page .overlay-form input,
    .contact-page .overlay-form textarea {
        position: relative;
        top: auto;
        left: auto;
        width: 100% !important;
        height: auto;
        min-height: 44px;
        font-size: var(--contact-form-input-font-size);
        padding: 12px 14px;
        border: 1px solid rgba(50, 201, 196, 0.5);
        /* border-radius: 8px; */
        background: rgba(255, 255, 255, 0.85);
        line-height: 1.4;
        -webkit-appearance: none;
        appearance: none;
        font-family: 'Effra', sans-serif;
        font-size: 16px;       /* Nên để tối thiểu 16px trên mobile để tránh trình duyệt tự zoom */
        /* Cách khuyên dùng: số không đơn vị sẽ nhân với font-size hiện tại */
        line-height: 1.2;
    }

    .contact-page .overlay-form input::placeholder,
    .contact-page .overlay-form textarea::placeholder {
        font-size: var(--contact-form-placeholder-font-size);
    }

    .contact-page .overlay-form textarea {
        min-height: 100px;
        resize: vertical;
    }

    .contact-page .of-name,
    .contact-page .of-company,
    .contact-page .of-email,
    .contact-page .of-message {
        top: auto;
        left: auto;
        width: 100% !important;
        height: auto;
    }

   

    .contact-page .of-submit:hover {
        background: rgba(50, 201, 196, 1);
    }

    /* Star decoration - move so it doesn't overlap content on mobile
       NOTE: This CSS is loaded by other pages (e.g. project_detail), so we must
       scope it to real Contact page only. */
    body:has(.contact-page) .star-deco.star-1 {
       
        margin-top: 0;

        left: auto;

        transform: none;
    }
}