@import url('menu.css');
@import url(https://db.onlinewebfonts.com/c/0aaa83f760b96926c5f6785125095e23?family=Cubao+Free+2+Exp);

/* 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; */
}

/* Push circle half off-screen so only semicircle is visible; text path has padding (smaller radius) so it is not cut when rotating */
/* 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;
}

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

@keyframes underwayCircleRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes underwayScaleUp {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
}
.py-5{
    padding-top: 0px !important;
    padding-bottom: 0px !important;

}
.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;
}

.background-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background-image: url('../assets/images/home-page-1.png');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.background-container .xiaowfolio-logo-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.background-container .card-circles-row {
    transform: rotate(0deg);
    margin-top: 0;
    margin-bottom: 0;
    min-height: 100vh;
    width: 100%;
    flex-shrink: 0;
    margin: 11% auto;
}

.background-container .contact-bottom-section {
    margin-top: 0;
    flex-shrink: 0;
}

.contact-bottom-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin-top: auto;
}

.contact-footer-img {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 100%;
    height: auto;
    z-index: 90;

}

.contact-circle-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: visible;
}

.contact-circle {
    position: absolute;
    bottom: -24%;
    left: 50%;
    transform: translateX(-44%);
    width: 220%;
    overflow: hidden;
}

/* Second contact circle (red text, lower) */
.contact-circle--red {
    bottom: -32%;
    width: 230%;
    transform: translateX(-49%);
}

.contact-circle-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: contactCircleRotate 110s linear infinite;
}

.contact-circle--red .contact-circle-svg {
    animation: contactCircleRotate 110s linear infinite;
}

.contact-circle-text-path {
    font-size: 0.03rem;
    font-weight: 400;
    fill: none;
    stroke: #2D5DCB;
    stroke-width: 0.04;
    stroke-linejoin: round;
    letter-spacing: 0.02em;
    paint-order: stroke fill;
}

/* Override color for red circle text */
.contact-circle-text-path--red {
    stroke: #EE2B5D;
}

@keyframes contactCircleRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Straight contact text line (horizontal), running left-to-right */
.contact-line-banner {
    position: absolute;
    left: 0;
    right: 0;
    font-family: "Cubao Free", sans-serif;
    bottom: 25%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    transform: rotate(8deg);
    background: #211754;
}

.contact-line-track {
    display: inline-flex;
    white-space: nowrap;
    animation: contactLineMarquee 100s linear infinite;
    will-change: transform;
}
.contact-line-text {
    display: inline-block;
    margin-right: 0;
    padding-right: 10px;
    font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 2vw + 0.6rem, 1.7rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    color:  rgb(45 93 203);
    border-bottom: 2px solid red;
}

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

/* Legacy: keep .underway-img if used elsewhere */
.underway-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 148px;
    z-index: 1;
    pointer-events: none;
}

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

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

/* Decorative Stars */
.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: hover shows Project / Home / Contact; fixed so it does not hide on scroll */
.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));
}

/* Star stays visible on scroll (no hide); .scrolled kept for JS compatibility but not used to hide */
.star-menu-wrap.scrolled,
.star-deco.scrolled {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- 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 Sticky State (Return to Top) - applied to wrap when present */
.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);
}

/* Back to top button (back-top.png): visible when scrolled down */
.back-top-btn {
    position: fixed;
    bottom: 30px;
    right: 44px;
    z-index: 999;
    width: 36px;
    height: 36px;
    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;
}
@media (max-width: 767px) {
    .back-top-btn{
        right: 30px;
        width: 24px;
        height: 24px;
    }
}
.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;
}

/* Back button on project detail page: same floating style as back-top */
.project-detail-back-btn {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 2001;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}
@media (max-width: 767px) {
    .project-detail-back-btn{
        width: 24px;
        height: 24px;
    }
}
.project-detail-back-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.project-detail-back-btn:hover {
    transform: rotate(-90deg) scale(1.1);
}

/* Falling star images (star.png) at 12° angle */
.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;
    }
}

/* Underway Bold */
.underway-bold-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 14px;
    z-index: 1;
    pointer-events: none;
}

.underway-bold-img img {
    width: 100%;
    display: block;
}

/* XIAOWFOLIO Logo - centered on screen (no negative margin), scales per screen */
.xiaowfolio-logo-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 75%;
    max-width: 100%;
    min-height: 465px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
    border: none;
}

/* Vector SVG: 6 circles + red squares on path (aligned by definition) */
.logo-circles-svg {
    position: absolute;
    inset: 0;
    width: 45%;
    object-fit: contain;
    pointer-events: none;
    opacity: 1;
    margin: auto;
}

.xiaowfolio-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    animation: logoEntrance 1.2s ease-out forwards;
    margin-top: 6%;
    width: 70%;
}

.xiaowfolio-logo img {
    width: auto;
    height: auto;
    max-width: 75%;
    /* max-height: clamp(80px, 20vw, 200px); */
    object-fit: contain;
    animation: logoPulse 3s ease-in-out 1.2s infinite;
}

@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }

    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes logoPulse {

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

    50% {
        transform: scale(1.03);
    }
}

/* =============================================
   CARD CIRCLES - Overlapping zigzag (1,3 higher | 2,4 lower)
   ============================================= */
.card-circles-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-top: 0;
    margin-bottom: 0;
    padding: 4vw 2vw 5vw;
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    transform: rotate(-2deg);
    background-image: url('../assets/images/background_home_2.png');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Inner wrapper: cards constrained to 50% viewport width */
.card-circles-row-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    margin: 0 auto;
    padding: 30% 0%;
}

.card-circle {
    flex-shrink: 0;
    position: relative;
    width: min(490px, 27vw);
    height: min(490px, 27vw);
    border-radius: 50%;
    overflow: hidden;
  
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, box-shadow 0.3s ease;
    cursor: pointer;
    margin-left: -2.7vw;
    background: #1a1a4a;
}

.card-circle:first-child {
    margin-left: 0;
}

/* Cards inside inner: scale to fit 80% width */
.card-circles-row-inner .card-circle {
    width: min(410px, 25vw);
    height: min(410px, 25vw);
    margin-left: -5vw;
}

.card-circles-row-inner .card-circle:first-child {
    margin-left: 0;
}

.card-circles-row-inner .card-circle-1,
.card-circles-row-inner .card-circle-3 {
    margin-top: min(-100px, -5vw);
}

.card-circles-row-inner .card-circle-2,
.card-circles-row-inner .card-circle-4 {
    margin-top: min(100px, 5vw);
}

@media (min-width: 1804px) {
    .card-circle {
        width: 490px;
        height: 490px;
        margin-left: min(-120px, calc((100vw - 1960px) / 3));
    }

    .card-circles-row-inner .card-circle {
        width: min(392px, 20vw);
        height: min(392px, 20vw);
        margin-left: min(-60px, calc((80vw - 1568px) / 3));
    }
}

.card-star-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    height: auto;
    z-index: 5;
    pointer-events: none;
}

.card-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Halftone mask overlay */
.card-mask-overlay {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    /* animation: maskFloat 5s ease-in-out infinite; */
}

/* Stagger animation delay for each card */
.card-circle-1 .card-mask-overlay {
    animation-delay: 0s;
}

.card-circle-2 .card-mask-overlay {
    animation-delay: 1s;
}

.card-circle-3 .card-mask-overlay {
    animation-delay: 2s;
}

.card-circle-4 .card-mask-overlay {
    animation-delay: 3s;
}

@keyframes maskFloat {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.5;
    }

    25% {
        transform: translateY(-20px) rotate(2deg) scale(1.05);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-10px) rotate(-1deg) scale(1.02);
        opacity: 0.6;
    }

    75% {
        transform: translateY(-25px) rotate(1.5deg) scale(1.06);
        opacity: 0.75;
    }

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

/* Zigzag: cards 1,3 higher — cards 2,4 lower (overlapping row) */
.card-circle-1 {
    z-index: 2;
    margin-top: min(-160px, -8vw);
}

.card-circle-2 {
    z-index: 3;
    margin-top: min(160px, 8vw);
}

.card-circle-3 {
    z-index: 4;
    margin-top: min(-274px, -8vw) !important;
}

.card-circle-4 {
    z-index: 5;
    margin-top: min(160px, 8vw);
}

.card-circle:hover {
    transform: scale(1.1);
    z-index: 10;
}

.card-text {
    position: absolute;
    bottom: 20%;
    left: 53%;
    transform: translateX(-50%) rotate(-10deg);
    font-family: 'Cubao Free 2 Exp', 'Cubao Free', 'Black Ops One', cursive, sans-serif;
    font-size: clamp(16px, 2.4vw, 30px);
    font-weight: 400;
    z-index: 6;
    pointer-events: none;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -0.3px;
    line-height: 100%;
}

.card-circle-1 .card-text {
    color: #DCD6FF;
    -webkit-text-stroke: 1.5px #2D5DCB;
}

.card-circle-2 .card-text {
    color: #211754;
    -webkit-text-stroke: 1.5px #DCD6FF;
}

.card-circle-3 .card-text {
    color: #211754;
    -webkit-text-stroke: 1.5px #DCD6FF;
}

.card-circle-4 .card-text {
    color: #DCD6FF;
    -webkit-text-stroke: 1.5px #DB3F9B;
}

/* Project type page: horizontal overlapping cards, ascending to the right */
.card-type-row {
    position: relative;
    width: 100%;
    max-width: 100vw;
    padding: 2rem 1rem;
    overflow: visible;
    margin-top: 0%;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 12%;
}
.card-type-row-inner-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.selected-category-name {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #DCD6FF;
    text-shadow: 0 16px 0 #32C9C4;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--Prim-4, #EE2B5D);
    font-family: "Cubao Free", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 40px;
}

@media (max-width: 767px) {
    .selected-category-name {
        font-size: clamp(1.75rem, 6vw, 2.4rem);
        -webkit-text-stroke-width: 1px;
        margin-top: 24px;
        text-shadow: 0 5px 0 #32C9C4;
        padding: 0 1rem;
        word-break: break-word;
    }
}
.card-type-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.582);
    pointer-events: none;
    z-index: 0;
}

.card-type-row-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: 0;
    overflow: visible;
}

.card-type-card {
    flex-shrink: 0;
    display: block;
    width: clamp(80px, 24vw, 200px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    transition: opacity 0.3s ease;
    position: relative;
    transition: transform 0.35s ease, z-index 0.2s ease;
    cursor: pointer;
    margin-left: -8rem;
    z-index: 1;
    transform: rotate(-0.8deg);
    box-shadow: -8px 10px 0 6px rgba(238, 43, 93, 0.85)!important;
    box-sizing: border-box;
}

.card-type-card:first-child {
    margin-left: 0;
}

.card-type-card:hover {
    z-index: 10;
    transform: rotate(-0.5deg) scale(1.02);
    box-shadow: -10px 12px 0 8px rgba(238, 43, 93, 0.9) !important;
}

.card-type-card.active {
    z-index: 10;
    box-shadow: -8px 10px 0 6px rgba(238, 43, 93, 0.85)!important;
}

.card-type-row-inner.has-selection {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    margin: 0px 5%;
}

.card-type-row-inner.has-selection .card-type-card {
    min-width: 0;
    flex: 1 1 0;
    width: 25%;
    max-width: 25%;
    aspect-ratio: 1;
    margin-left: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: none;
}

.card-type-row-inner.has-selection .card-type-card:hover {
    box-shadow: none;
}

.card-type-row-inner.has-selection .card-type-card.active {
    box-shadow: none;
}

.card-type-row-inner.has-selection .card-type-card:not(.active) {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.card-type-row-inner.has-selection .card-type-card.active {
    opacity: 1;
    outline-offset: 4px;
}

.card-type-row-inner.has-selection .card-type-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-type-row-inner .card-type-1 { margin-bottom: 2rem; z-index: 2; }
.card-type-row-inner .card-type-2 { margin-bottom: 5rem; z-index: 3; }
.card-type-row-inner .card-type-3 { margin-bottom: 8rem; z-index: 4; }
.card-type-row-inner .card-type-4 { margin-bottom: 11rem; z-index: 5; }

.card-type-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Project type cards: show category name overlay like home cards */
.card-type-card .card-text {
    position: absolute;
    bottom: 20%;
    left: 53%;
    transform: translateX(-50%) rotate(-10deg);
    font-family: 'Cubao Free 2 Exp', 'Cubao Free', 'Black Ops One', cursive, sans-serif;
    font-size: clamp(16px, 2.4vw, 30px);
    font-weight: 400;
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -0.3px;
    line-height: 100%;
    color: #DCD6FF;
    -webkit-text-stroke: 1.5px rgba(45, 93, 203, 0.9);
}

.card-type-2 .card-text,
.card-type-3 .card-text {
    color: #211754;
    -webkit-text-stroke: 1.5px #DCD6FF;
}

.card-type-4 .card-text {
    color: #DCD6FF;
    -webkit-text-stroke: 1.5px #DB3F9B;
}

@media (min-width: 768px) {
    .card-type-card {
        width: clamp(100px, 22vw, 200px);
        margin-left: -10rem;
    }
    .card-type-card:first-child {
        margin-left: 0;
    }
}

.project-type-page {
    scroll-behavior: smooth;
    position: relative;
    min-height: 100vh;
}

/* Project type page: running text banner over project arc section */
.project-type-banner{
    position: absolute;
    left: 0;
    right: 0;
    top: 1%;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
    background-color: #EE2B5D;
    border-bottom: 5px solid #32C9C4;
    transform: rotate(-4deg);
}
.project-type-banner1 {
    position: relative;
    left: -10%;
    right: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
    background-color: #8E24B6;
    border-bottom: 5px solid #32C9C4;
    transform: rotate(1deg);
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 120%;
}

.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);
    }
}

/* Bottom running text banner on project type page */
.project-type-bottom-banner {
    /* left: -32%; */
    position: absolute;
    width: 103%;
    /* margin: 4rem auto 0; */
    overflow: hidden;
    background-color: #211754;
    border-bottom: 5px solid #DB3F9B;
    transform: rotate(5deg);
    margin-top: -11%;
}

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

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

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

/* Project detail page: reuse bottom banner but keep it at bottom of content */
.project-detail-wrapper .project-type-bottom-banner {
    position: relative;
    left: -5px;
    /* width: 100%; */
    margin-top: 40px;
    transform: rotate(5deg);
    margin-bottom: 70px;
}

.project-type-page__top-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url(../assets/images/top-type.png);
    background-size: 100% auto;
    background-position: top center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    background-repeat: no-repeat;
    width: 100%;
}

/* Left panel: large image preview when clicking a project circle (popup overlay) */
.project-preview-panel {
    position: fixed;
    left: 10%;
    top: 0;
    width: 55%;
    max-width: 40%;
    height: 100vh;
    background: transparent;
    /* border-right: 2px solid rgba(0, 212, 255, 0.4);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem 4rem 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.project-preview-panel.project-preview-panel-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.project-preview-panel .project-preview-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 212, 255, 0.2);
    color: #DCD6FF;
    font-size: 1.75rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.project-preview-panel .project-preview-close:hover {
    background: rgba(0, 212, 255, 0.5);
}
.project-preview-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-preview-card-wrap {
    position: relative;
    width: 90%;
    max-width: 100%;
    overflow: visible;
}
.project-preview-detail-link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: none;
}
/* Card frame: magenta border, image + project name overlaid at bottom */
.project-preview-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #e8e6eb;
    border: 4px solid #EE2B5D;
    border-radius: 6px;
    overflow: hidden;
    transform: rotate(-15deg);
}
.project-preview-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e6eb;
}
/* Source image hidden; drawn to canvas with grayscale + colored corner */
.project-preview-img.project-preview-img-src {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    visibility: hidden;
    pointer-events: none;
}
.project-preview-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.project-preview-spotlight {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    --spot-rect-half-w: 30%;
    --spot-rect-half-h: 24%;
    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;
}
.project-preview-card-wrap:hover .project-preview-spotlight {
    opacity: 1;
}
/* Project name on card-wrap, large uppercase, can overflow */
.project-preview-name {
    position: absolute;
    left: 0%;
    bottom: 0;
    transform: rotate(-15deg);
    padding: 0.25rem 0;
    font-size: clamp(2rem, 6vw, 4rem);
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--Prim-3, #DB3F9B);
    font-family: "Cubao Free";
    font-style: normal;
    font-weight: 400;
    line-height: 94%;
    text-transform: uppercase;
    color: #DCD6FF;
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
    pointer-events: none;
    width: 115%;
    transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease, transform 0.2s ease;
}

/* Only one type's projects visible at a time; default = first */
.project-arc-section {
    display: none;
    padding: 4rem 0 5rem 1rem;
    padding-top: 25%;
    min-height: 320px;
    background-image: url('../assets/images/type-bg.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.project-arc-section.project-arc-section-active {
    display: block;
}

.project-arc-section-grid {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
    /* gap: 2rem; */
}

.project-arc-section:not(.project-arc-section-active) {
    display: none;
}

.project-arc-section-header {
    margin-bottom: 2rem;
    grid-column: 1 / -1;
}

.project-arc-section-title {
    text-align: center;
    color: #DCD6FF;
    font-size: 1.5rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.project-arc-section .project-arc-section-header {
    margin-bottom: 0;
}

.project-arc-section-grid .project-inline-preview {
    justify-self: start;
    width: 100%;
    max-width: 100%;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-arc-section.project-arc-section-has-preview .project-inline-preview {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hover behavior on project preview (type page) */
.project-arc-section.project-arc-section-has-preview .project-inline-preview:hover {
    /* "Zoom out" on hover */
    transform: translateY(0) scale(1.08);
    cursor: pointer;
}

.project-arc-section.project-arc-section-has-preview .project-inline-preview:hover .project-preview-name {
    color: #EE2B5D; /* match menu hover pink */
    -webkit-text-stroke-color: #32C9C4;
    transform:rotate(-15deg) scale(1.08);
}

.project-arc-section-grid .project-arc {
    justify-self: end;
    width: 100%;
    max-width: 100%;
}

.project-arc.project-arc-less-than {
    position: relative;
    width: 100%;
    min-width: 280px;
    min-height: 420px;
    margin-left: auto;
    margin-right: 0;
    overflow: visible;
}

.project-arc-circle-wrap {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.project-arc-less-than .project-arc-circle-wrap.project-arc-circle-1 { left: 18%; top: 50%; }
.project-arc-less-than .project-arc-circle-wrap.project-arc-circle-2 { left: 48%; top: 24%; }
.project-arc-less-than .project-arc-circle-wrap.project-arc-circle-3 { left: 82%; top: 12%; }
.project-arc-less-than .project-arc-circle-wrap.project-arc-circle-4 { left: 48%; top: 76%; }
.project-arc-less-than .project-arc-circle-wrap.project-arc-circle-5 { left: 82%; top: 88%; }

.project-arc-circle-wrap.active .project-arc-circle {
    transform: scale(1.35);
    box-shadow: -5px 6px 0 2px rgba(0, 185, 203, 0.9);
}

.project-arc-circle-wrap.active .project-arc-circle:hover {
    transform: scale(1.35);
    box-shadow: -8px 10px 0 6px #EE2B5D;
}

.project-arc-circle {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(139, 92, 246, 0.4);
    box-shadow: -6px 8px 0 4px rgba(0, 185, 203, 0.85);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.project-arc-circle:hover {
    transform: scale(1.18);
    box-shadow: -8px 10px 0 6px rgba(238, 43, 93, 0.9);
}

.project-arc-circle-placeholder {
    cursor: default;
    pointer-events: none;
    background: #DCD6FF;
    box-shadow: -6px 8px 0 4px rgba(0, 185, 203, 0.6);
}

.project-arc-circle-placeholder:hover {
    transform: none;
    box-shadow: -6px 8px 0 4px rgba(0, 185, 203, 0.6);
}

.project-arc-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    .project-arc-circle {
        width: 118px;
        height: 118px;
    }
    .project-arc.project-arc-less-than {
        min-width: 360px;
        min-height: 420px;
    }
}

/* Extra projects grid: 1 row 4 columns, card style (lavender, rotated, cyan shadow) */
.project-grid-section {
    margin-top: 25%;
    padding:0 1rem 15rem;;
    max-width: 100%;
}
.project-grid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 4rem;
    margin-bottom: 1.5rem;
    margin-top: 100px;
}
.project-grid-row:last-child {
    margin-bottom: 0;
}
.project-grid-card {
    flex: 0 0 calc(25% - 1.5rem);
    max-width: 200px;
    min-width: 100px;
    display: block;
    text-decoration: none;
    position: relative;
    transition: transform 0.25s ease;
}
.project-grid-card:hover {
    transform: scale(1.03);
}
.project-grid-card:hover .project-grid-card-inner {
    box-shadow: -11px 9px 0 0 #EE2B5D;
}
.project-grid-card-placeholder {
    pointer-events: none;
    cursor: default;
}
.project-grid-card-placeholder:hover {
    transform: none;
}
.project-grid-card-placeholder .project-grid-card-inner {
    aspect-ratio: 1;
    background: #DCD6FF;
    box-shadow: -11px 9px 0 0 #32C9C4;

}
.project-grid-card-inner {
    display: block;
    position: relative;
    aspect-ratio: 1;
    background: #e8e0f0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: -11px 9px 0 0 #32C9C4;
    transform: rotate(-10deg);
    transition: box-shadow 0.25s ease;
}
/* .project-grid-card:hover .project-grid-card-inner {
    box-shadow: -8px 5px 0 rgba(255, 105, 180, 0.55), -10px 8px 16px rgba(255, 105, 180, 0.35);
} */
.project-grid-card-name {
    position: absolute;
    bottom: 0;
    transform: rotate(-14deg);
    transform-origin: center;
    /* TĂNG CHIỀU RỘNG TỐI ĐA */
    width: max-content;       /* Chữ dài bao nhiêu lấy bấy nhiêu */
    max-width: 120%;          /* Cho phép tràn nhẹ ra ngoài mép ô (nếu thiết kế cho phép) */
    text-align: center;
    line-height: 1.1;         /* Thu hẹp khoảng cách dòng để tiết kiệm diện tích */
    font-family: "Cubao Free", sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #DCD6FF;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
    /* CẤU HÌNH WRAP CHỮ */
    white-space: normal;       /* Cho phép xuống hàng tự nhiên */
    word-wrap: break-word;     /* Ngắt từ nếu từ quá dài */
    overflow-wrap: break-word; /* Hỗ trợ trình duyệt hiện đại */
    /* white-space: nowrap; */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, bottom 0.25s ease;
}
.project-grid-card-year {
    margin-left: 6px;
    font-size: 0.7rem;
    opacity: 0.9;
}
.project-grid-card:hover .project-grid-card-name {
    opacity: 1;
    bottom: -30px;
}
.project-grid-card-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
@media (max-width: 991px) {
    .project-grid-card {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
    .project-arc-section-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 9rem;
    }
    /* .project-preview-name {
        width: 100%;
    } */
    .project-grid-see-more-btn {
        position: relative !important;
        right: auto !important;
        display: block;
        margin: 2rem auto 0;
        width: 200px;
        height: auto;
        aspect-ratio: 350/300;
    }
    .project-arc.project-arc-less-than {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem 0.75rem;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        position: relative;
    }
    .project-arc-less-than .project-arc-circle-wrap {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        flex-shrink: 0;
    }
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-1,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-2,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-3,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-4,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-5 {
        left: auto;
        top: auto;
        transform: none;
    }
    .card-type-row-inner.has-selection {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin: 0 auto;
        width: fit-content;
        max-width: 100%;
    }
    .card-type-row-inner.has-selection .card-type-card {
        flex: 0 0 auto;
        width: clamp(110px, 32vw, 180px);
        max-width: none;
        margin-bottom: 0.75rem;
        margin-top: 0;
        margin-left: 0;
    }
    .card-type-row-inner.has-selection .card-type-card:nth-child(1) { margin-left: 0; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(2) { margin-left: 8.5rem; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(3) { margin-left: 17rem; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(4) { margin-left: 25.5rem; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(5) { margin-left: 34rem; }
    .project-grid-section {
        margin-top: 15%;
    }
    .project-grid-row {
        margin-left: 10%;
        margin-right: 10%;
    }
}
@media (max-width: 575px) {
    .project-grid-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Project type page: mobile layout (desktop unchanged) */
@media (max-width: 767px) {
    /* .project-type-page {
        padding-bottom: 2rem;
    } */
    .project-type-page .py-5 {
     
        overflow-x: hidden;
    }
    /* Preview panel: fullscreen overlay on mobile */
    .project-preview-panel {
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        padding: 1rem;
        background: rgba(20, 15, 35, 0.97);
    }
    .project-preview-panel .project-preview-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }
    .project-preview-card {
        transform: rotate(-8deg);
    }
    .project-preview-img-wrap {
        min-height: 160px;
    }
    .project-preview-name {
        width: 100%;
        font-size: clamp(1rem, 4vw, 1.5rem);
        padding: 0.2rem 0;
    }
    /* Category cards row: tighter overlap, smaller images, less margin */
    .card-type-row {
        padding: 0.5rem 0.25rem;

    }
    .card-type-row-inner .card-type-1 { margin-bottom: 0; }
    .card-type-row-inner .card-type-2 { margin-bottom: 1.5rem; }
    .card-type-row-inner .card-type-3 { margin-bottom: 3rem; }
    .card-type-row-inner .card-type-4 { margin-bottom: 4.5rem; }
    .card-type-row-inner.has-selection {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin: 0 auto;
        width: fit-content;
        max-width: 100%;
    }
    .card-type-row-inner.has-selection .card-type-card {
        flex: 0 0 auto;
        width: clamp(96px, 28vw, 150px);
        max-width: none;
        margin-bottom: 0.5rem;
        margin-top: 0;
        margin-left: 0;
    }
    .card-type-row-inner.has-selection .card-type-card:nth-child(1) { margin-left: 0; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(2) { margin-left: 3.75rem; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(3) { margin-left: 7.5rem; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(4) { margin-left: 11.25rem; }
    .card-type-row-inner.has-selection .card-type-card:nth-child(5) { margin-left: 15rem; }
    .card-type-card {
        width: clamp(64px, 22vw, 100px);
        margin-left: -3.5rem;
    }
    .card-type-card:first-child {
        margin-left: 0;
    }
    /* Arc section: on mobile – single column, circles evenly spaced */
    .project-arc-section {
        padding: 1.5rem 0.75rem 2rem;
        min-height: 200px;
        overflow: hidden;
    }
    .project-arc-section-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 4rem;
        max-width: 100%;
        margin: 0 auto;
        margin-top: 25%;
    }
    .project-grid-see-more-btn {
        position: relative !important;
        display: block;
        margin: 2rem auto 0;
        right: auto !important;
        width: 180px;
        height: auto;
        aspect-ratio: 350/300;
    }
    .project-arc-section-title {
        font-size: 1.2rem;
    }
    .project-arc.project-arc-less-than {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem 0.75rem;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .project-arc-less-than .project-arc-circle-wrap {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        flex-shrink: 0;
    }
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-1,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-2,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-3,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-4,
    .project-arc-less-than .project-arc-circle-wrap.project-arc-circle-5 {
        left: auto;
        top: auto;
        transform: none;
    }
    .project-type-bottom-banner{
        /* left: -18%; */
        width: 107%;
        /* margin: 4rem auto 0; */
        transform: rotate(5deg);
        margin-top: -15%;
    }
    .project-arc-circle {
        width: 96px;
        height: 96px;
    }
    .project-grid-section {
        margin-top: 15%;
        padding: 0 0.5rem 1rem;
        margin-bottom: 10%;
    }
    .project-grid-row {
        gap: 0.75rem 0.75rem;
        margin-top: 5.25rem;
        margin-left: 6%;
        margin-right: 6%;
    }
    .project-grid-card {
        flex: 0 0 calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .card-type-card {
        width: clamp(56px, 20vw, 88px);
        margin-left: -2.5rem;
    }
    .project-arc.project-arc-less-than {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.25rem 0.5rem;
    }
    .project-arc-circle {
        width: 60px;
        height: 60px;
    }
    .project-grid-row {
        margin-left: 8%;
        margin-right: 8%;
        gap: 1rem 1.25rem;
    }
    .project-grid-card {
        flex: 0 0 calc(45% - 0.625rem);
        max-width: calc(45% - 0.625rem);
    }
}

/* Contact Images - fixed at bottom right of page */
/* Fixed at bottom-right, does not scroll with page */
.contact-bottom-section .contact-img {
    position: absolute;
    /* bottom:27%; */
    right: 24px;
    left: auto;
    top: auto;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: auto;
    bottom: 42%;
}

.contact-img {
    /* bottom: 24px; */
    right: 24px;
    left: auto !important;
    top: auto !important;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: auto;
    margin-right: 13%;
    /* margin-top: 16%; */
}

.contact-img a {
    display: inline-block;
    animation: contactEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        contactFloat 4s ease-in-out 1s infinite;
    opacity: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

/* Contact composite: 3 layers (arrow-top, middle, arrow-bottom) */
.contact-img-composite {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
}

/* Arrows sized relative to middle: balanced with central text, behind it (z-index 1) */
.contact-arrow-top,
.contact-arrow-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 60%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    transform: scale(3);
}

.contact-arrow-top {
    top: -53%;
    object-position: bottom left;
    left: 83%;
}

.contact-arrow-bottom {
    bottom: -56%;
    object-position: bottom left;
    left: 100%;
}

.contact-middle {
    position: relative;
    display: block;
    width: 75%;
    z-index: 2;
}

.contact-middle .contact-middle-default,
.contact-middle .contact-middle-hover {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.35s ease;
}

.contact-middle .contact-middle-hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Hover: swap middle image and separate arrows along diagonal (keep same scale) */
.contact-img a:hover .contact-arrow-top {
    transform: scale(3) translate(28px, -13px);
}

.contact-img a:hover .contact-arrow-bottom {
    transform: scale(3) translate(-28px, 13px);
}

.contact-img a:hover .contact-middle .contact-middle-default {
    opacity: 0;
}

.contact-img a:hover .contact-middle .contact-middle-hover {
    opacity: 1;
    transform: scale(1.06) translateX(-10px);
}

.contact-img a::after {
    content: none;
}

.contact-img a:hover {
    animation-play-state: paused;
    transform: scale(1.08) rotate(-2deg);
    /* filter: drop-shadow(0 8px 20px rgba(0, 217, 255, 0.3)); */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.contact-img a:hover::after {
    opacity: 1;
}

.contact-img a:active {
    transform: scale(0.95) rotate(0deg);
    transition: transform 0.1s ease;
}

@keyframes contactEntrance {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes contactFloat {

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

    25% {
        transform: translateY(-8px) rotate(0.5deg);
    }

    75% {
        transform: translateY(4px) rotate(-0.5deg);
    }
}

.contactme-marquee {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.contactme-img {
    display: block;
    width: 200%;
    animation: marqueeScroll 30s linear infinite;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Cubao Free Font */
@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;
}

:root {
    --xf-bg-main: #0c0430;
    --xf-bg-deep: #141740;
    --xf-accent-pink: #ff4fb6;
    --xf-accent-pink-soft: #ff8bd5;
    --xf-accent-cyan: #39f6ff;
    --xf-accent-purple: #8a7bff;
    --xf-text-main: #ffffff;
    --xf-text-soft: #f5dbff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #211754;
    color: var(--xf-text-main);
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100vw;
}

/* Ensure overlay image fits but allows scrolling if tall */
#design-overlay img {
    max-width: 100%;
    height: auto;
}

/* =============================================
   PICTURE GALLERY SECTION
   ============================================= */
.project-detail-wrapper {
    position: relative;
    background-color: #dcd6ff;
    /* background-image: url('../assets/images/bg_project_detail.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;*/
    min-height: 100vh;
}

.project-image-thumbnail {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.project-image-thumbnail .project-product-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 0;
}

/* Project skills list under project name */
.project-detail-wrapper .project-list-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding-top: 5%;

}

.project-detail-wrapper .project-list-skills-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    width: 100%;
    justify-content: center;
    padding: 0px 36px;
}

.project-detail-wrapper .project-skill-item {
    /* flex: 0 0 calc((100% - 16px) / 3); */
    min-width: 0;
    padding: 24px 10px;
    font-size: clamp(1.0rem, 1.8vw, 1.5rem);
    line-height: 1.1;
    text-align: center;
    color: #DCD6FF !important;
    font-family: "Cubao Free", sans-serif;
    /* font-weight: 600; */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-detail-wrapper .project-skill-item.bg-skill1 {
    background-image: url('../assets/images/bg-skill1.png');
}

.project-detail-wrapper .project-skill-item.bg-skill2 {
    background-image: url('../assets/images/bg-skill2.png');
}

/* Section 1: Project name + Brief/Idea – sits above gallery */
.project-header-section {
    position: relative;
    z-index: 2;
    padding: 0px 24px;
    padding-top: 4cqh;
    background-image: url('../assets/images/bg_project_detail_top.png');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: 10%;
}

/* Brief/Idea info card - overlapping project detail image */
.project-info-card {
    bottom: 55%;
    right: 2%;
    width: 30%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

/* =============================================
   COVER REVEAL SECTION (mouse mask)
   ============================================= */
.cover-reveal-section {
    position: relative;
    margin-top: -77%;
    z-index: 2;
    overflow: hidden;
    cursor: none;
    width: 50%;
    margin-left: 0;
    margin-right: auto;
}

.cover-reveal-section-2 {
    position: relative;
    margin-top: -138%;
    z-index: 2;
    overflow: hidden;
    cursor: none;
    width: 50%;
    margin-left: 0;
    margin-right: auto;
}


.cover-base,
.cover-color {
    position: relative;
    width: 100%;
}

.cover-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(0px at 50% 50%);
    transition: clip-path 0.05s ease;
    z-index: 2;
}

.cover-img-gray {
    width: 100%;
    display: block;
    filter: grayscale(100%);
}

.cover-img-color {
    width: 100%;
    display: block;
}

.cover-mask-overlay {
    position: absolute;
    width: 350px;
    height: 350px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    border: 3px solid #00D9C0;
    border-radius: 4px;
}

/* =============================================
   PROJECT CARDS GRID (4x2 tilted cards)
   ============================================= */
.project-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-top: 180px;
    margin-left: 80px;
}

.project-card {
    display: block;
    transform: rotate(-5deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.project-card:hover {
    transform: rotate(0deg) scale(1.05);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.picture-gallery-section {
    position: relative;
    background: transparent;
    padding: 8% 0 80px;
    overflow: visible;
    /* margin-top: -120%; */
    z-index: 2;
}

/* Decorative diagonal lines */
.gallery-diag-line {
    position: absolute;
    width: 1px;
    height: 140%;
    background: rgba(75, 60, 160, 0.25);
    transform-origin: top center;
    pointer-events: none;
    z-index: 1;
}

.diag-1 {
    top: -10%;
    left: 18%;
    transform: rotate(-15deg);
}

.diag-2 {
    top: -10%;
    left: 55%;
    transform: rotate(-12deg);
}

.diag-3 {
    top: -10%;
    right: 12%;
    transform: rotate(-18deg);
}

/* Floating blue four-pointed diamond stars */
.gallery-diamond {
    position: absolute;
    background: #3358C2;
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    z-index: 3;
    pointer-events: none;
    animation: galleryFloat 4s ease-in-out infinite;
}

.gd-1 {
    width: 22px;
    height: 22px;
    top: 5%;
    left: 3%;
    animation-delay: 0s;
}

.gd-2 {
    width: 16px;
    height: 16px;
    top: 18%;
    right: 8%;
    animation-delay: 0.7s;
}

.gd-3 {
    width: 20px;
    height: 20px;
    top: 48%;
    left: 5%;
    animation-delay: 1.4s;
}

.gd-4 {
    width: 14px;
    height: 14px;
    top: 55%;
    right: 4%;
    animation-delay: 2.1s;
}

.gd-5 {
    width: 18px;
    height: 18px;
    top: 85%;
    left: 4%;
    animation-delay: 2.8s;
}

.gd-6 {
    width: 16px;
    height: 16px;
    top: 90%;
    right: 6%;
    animation-delay: 3.5s;
}

@keyframes galleryFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.85;
    }

    50% {
        transform: translateY(-10px) scale(1.15);
        opacity: 1;
    }
}

/* White rectangle cards container */
.gallery-cards-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 30px; */
    padding: 0 12%;
    /* padding-top: 15%; */
}

.gallery-card {
    width: 100%;
    /* max-width: 750px; */
    /* Let content define height so long text can expand */
    /* min-height: 200px; */
    /* background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
}

/* =============================================
   TWO-COLUMN LAYOUT (Info + Brief/Idea)
   ============================================= */
.project-detail-columns {
    display: flex;
    gap: 30px;
    padding: 3% 12%;
    position: relative;
    z-index: 2;
    align-items: flex-start;
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto; /* center block */
}

/* =============================================
   PROJECT INFO SECTION (Achievement, Reflection, etc.)
   ============================================= */
.project-info-container {
    flex: 1;
    text-align: left;
    /* max-width: 700px; */

}

.project-info-inner {
    /* margin: 16px; */
}

/* Two-column row: Project name | Brief/Idea */
.project-name-brief-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.project-name-column {
    flex: 0 1 60%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    border-radius: 6px;
}

.project-name-tilted {
    display: inline-block;
    transform: rotate(-13deg);
    transform-origin: left bottom;
}

.project-name-bg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 0px 0px 100px;
    background-image: url('../assets/images/bg_project_name.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.project-review-gallery video {
    width: 100%;
}

.project-name-text {
    font-family: 'Cubao Free', 'Black Ops One', sans-serif;
    font-size: 4rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
    -webkit-text-stroke: 2px #00D9C0;
    /* text-shadow: 0 0 4px #00D9C0, 0 0 8px #00D9C0; */
    letter-spacing: 0;
    line-height: 1;
    display: inline-block;
    margin-bottom: -25px;
}

.project-name-text--short {
    font-size: clamp(8.5rem, 5.5vw, 10.5rem);
}

.project-name-text--ultra-short {
    font-size: 18.5rem;
}

.project-name-subtext {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.9rem, 1.6vw, 1.2rem);
    font-weight: 400;
    color: #ffffff;
    margin-top: 8px;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #DCD6FF;
}

.project-name-image {
    margin-top: 12px;
    max-width: 50%;
    height: auto;
    display: block;
}

.project-name-bg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* max-height: 27vh; */
    object-fit: contain;

}

/* Column 2: Brief/Idea card with Rectangle 52 */
.brief-idea-card {
    position: relative;
    flex: 0 0 45%;
    margin-left: auto;
    margin-right: 3%;
}

.brief-idea-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
    /* object-fit: cover; */
    z-index: 0;
}

.brief-idea-overlay {
    position: relative;
    width: 100%;
    padding: 4%  7%  15% 7%;
    display: flex;
    flex-direction: column;
    justify-content: top;
    gap: 15px;
}

.brief-idea-title {
    font-family: 'Cubao Free', 'Black Ops One', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: #211754;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.brief-idea-text {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 400;
    color: #211754;
    line-height: 1.5;
    margin: 0;
}
.project-review-gallery img {
    width: 100%;
}
.project-info-block{
    text-align: left;
}
.project-info-block1{
    text-align: center;
}
/* .project-info-block {
    margin-bottom: 30px;
} */

.project-info-title {
    font-family: 'Cubao Free', 'Black Ops One', 'Bungee', cursive, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 400;
    color: #211754;
    letter-spacing: -0.3px;
    line-height: 1;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.project-info-block{
    padding-bottom: 36px;
}
.project-info-text {
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 400;
    color: #211754;
    line-height: 1.6;
    letter-spacing: -0.3px;
    margin: 0;
    white-space: pre-line;
}

.project-product-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin-top: 10px;
}

/* Bottom blue diamond */
.gd-bottom {
    width: 24px;
    height: 24px;
    left: 50%;
    bottom: 220px;
    transform: translateX(-50%);
    animation-delay: 0.5s;
}

/* =============================================
   FIND NOT MY WORK HERE - MARQUEE
   ============================================= */
.find-marquee-wrapper {
    position: relative;
    z-index: 2;
    width: 120%;
    margin-left: -10%;
    overflow: hidden;
    transform: rotate(-8deg);
    margin-top: 60px;
    padding: 12px 0;
}

.find-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: findMarquee 18s linear infinite;
}

.find-marquee-track span {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: #211754;
    opacity: 0.45;
    letter-spacing: 0.02em;
}

@keyframes findMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Bottom magenta triangle */
.bottom-magenta-triangle {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 200px;
    margin-top: 30px;
    background: linear-gradient(135deg, #c020c0 0%, #E92C5E 50%, #ff4fb6 100%);
    clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}

/* =============================================
   RESPONSIVE - Tablet (≤1024px): iPad Air, iPad Mini, tablet landscape
   ============================================= */
@media (max-width: 1024px) {
    .project-grid-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 2rem;
        margin-bottom: -2.5rem;

    }
    /* === PROJECT PAGES === */
    .project-cards-grid {
        margin-left: 40px;
        margin-top: 140px;
        gap: 24px;
    }
    .project-preview-name {
        font-size: clamp(2rem, 8vw, 4rem);
        text-align: center;
        -webkit-text-stroke-width: 1.5px !important;
    }
    .cover-reveal-section {
        margin-top: -70%;
    }

    .cover-reveal-section-2 {
        margin-top: -130%;
    }

    /* === PROJECT DETAIL === */
    /* .gallery-cards-container {
        padding: 0 8%;
        gap: 25px;
    } */


    .project-name-brief-row {
        margin-top: -200% !important;
    }

    .project-info-inner {
        margin-left: 0%;
    }

    /* === SHARED === */
    .find-marquee-wrapper {
        margin-top: 50px;
    }

    .bottom-magenta-triangle {
        height: 170px;
    }

    /* INDEX PAGE - tablet: same structure as desktop, only card-circles 2 per row; no double scroll */
    .background-container {
        min-height: auto;
    }

    
    .background-container .xiaowfolio-logo-wrap {
        min-height: auto;
        margin-top: 32%;
        margin-bottom: 10%;
    }
    .xiaowfolio-logo img{
        max-width: 100%;
    }
    .xiaowfolio-logo{
        width: 84%;
    }
    .background-container .card-circles-row,
    .card-circles-row {

        margin-top:25%;
        margin-bottom: 5%;
        background-image: url('../assets/images/mid.png');
        background-size: contain;
        background-position: center center;
    }
    .logo-circles-svg{
        width: 90%;
    }
    .contact-bottom-section {
        min-height: 40vh;
        margin-top: 50% !important;
        overflow: visible;
    }
    .contact-bottom-section .contact-img {
        bottom: 60%;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
    }

    .contact-circle-container {
        min-height: 40vh;
        z-index: 2;
    }

    .contact-circle,
    .contact-circle--red {
        visibility: visible;
        opacity: 1;
    }

    .contact-circle-text-path,
    .contact-circle-text-path--red {
        font-size: 0.06rem;
        stroke-width: 0.06;
    }

    .contact-img a,
    a.contact-img-1 {
        animation-play-state: paused !important;
        transform: scale(1.08) rotate(-2deg) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .contact-img a .contact-arrow-top,
    a.contact-img-1 .contact-arrow-top {
        transform: scale(3) translate(28px, -13px) !important;
    }

    .contact-img a .contact-arrow-bottom,
    a.contact-img-1 .contact-arrow-bottom {
        transform: scale(3) translate(-28px, 13px) !important;
    }

    .contact-img a .contact-middle .contact-middle-default,
    a.contact-img-1 .contact-middle .contact-middle-default {
        opacity: 0 !important;
    }

    .contact-img a .contact-middle .contact-middle-hover,
    a.contact-img-1 .contact-middle .contact-middle-hover {
        opacity: 1 !important;
        transform: scale(1.06) translateX(-10px) !important;
    }

    .contact-img a::after,
    a.contact-img-1::after {
        opacity: 1 !important;
    }
    .background-container{
        background-position: top left;

    }

    .card-circles-row-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        padding: 24px 50px !important;
        max-width: 90% !important;
        transform: rotate(-10deg);
    }

    .card-circles-row-inner .card-circle {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        justify-self: center;
    }

    .card-circles-row-inner .card-circle-1,
    .card-circles-row-inner .card-circle-2,
    .card-circles-row-inner .card-circle-3,
    .card-circles-row-inner .card-circle-4 {
        margin-top: 0 !important;
    }

    /* ─────────────────────────────────────────
       PROJECT PAGES (project_page / project_page_2)
       ───────────────────────────────────────── */
    .project-detail-wrapper {
        overflow: hidden;
        /* background-image: url('../assets/images/detail_tablet.png'); */
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    }

    .project-detail-wrapper>img {
        width: 100%;
        min-height: 100vh;
        object-fit: cover;
        object-position: top center;
    }

    .project-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        padding: 0 3%;
        max-width: 100%;
    }

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

    .project-card:nth-child(even),
    .project-card:nth-child(3),
    .project-card:nth-child(6) {
        transform: rotate(0deg);
    }

    .project-card:hover {
        transform: scale(1.05);
    }

    .cover-reveal-section,
    .cover-reveal-section-2 {
        width: 80%;
        margin-top: -30%;
        margin-left: auto;
        margin-right: auto;
    }

    .cover-mask-overlay {
        width: 180px;
        height: 180px;
    }

    /* ─────────────────────────────────────────
       PROJECT DETAIL (project_detail.html)
       ───────────────────────────────────────── */
    .project-detail-wrapper .project-header-section {
        margin-top: 0;
        padding-top: 12%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .project-detail-wrapper .picture-gallery-section {
        margin-top: 0;
        padding: 30px 0 40px;
    }

    .project-detail-wrapper .gallery-cards-container {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 0 0%;
        /* gap: 18px; */
        margin-top: 0;
        /* padding-top: 24px; */
        z-index: 2;
    }

    .project-detail-wrapper .project-info-container {
        margin-top: 0;
    }

    .project-detail-wrapper .gallery-card {
        max-width: 100%;
    }

    .gallery-diamond {
        display: none;
    }

    .gd-bottom {
        display: block;
    }

    .gallery-diag-line {
        display: none;
    }

    .project-detail-wrapper .project-detail-columns {
        flex-direction: column;
        padding: 20px 5%;
        gap: 20px;
    }

    .project-detail-wrapper .project-info-container {
        padding: 0;
        margin-top: 0;
    }

    .project-detail-wrapper .project-info-inner {
        margin-left: 0;
        /* padding-left: 16px; */
    }

    .project-detail-wrapper .project-name-brief-row {
        margin-top: 0 !important;
        flex-direction: column;
        gap: 20px;
    }

    .project-detail-wrapper .project-name-column {
        flex: 1 1 auto;
        min-height: auto;
        align-items: center;
        text-align: center;
    }

    .project-detail-wrapper .project-name-tilted {
        display: inline-block;
        transform: rotate(-10deg);
        transform-origin: center bottom;
        margin-bottom: 5%;
        width: 115%;
    }
    .project-name-subtext{
        width: 90%;
        margin-left: 7%;
    }

    .project-detail-wrapper .project-name-bg {
        justify-content: center;
        /* padding: 16px 40px 10px 40px; */
    }

    .project-detail-wrapper .brief-idea-card {
        max-width: 100%;
        flex: 0 0 auto;
        margin: 0% 6% 16% 6%;
    }

    .project-info-card {
        position: relative;
        width: 85%;
        bottom: auto;
        right: auto;
        margin: 0 auto 20px;
        display: block;
    }

    /* ─────────────────────────────────────────
       SHARED COMPONENTS
       ───────────────────────────────────────── */
    .find-marquee-wrapper {
        margin-top: 40px;
        width: 110%;
        margin-left: -5%;
    }

    .bottom-magenta-triangle {
        height: 140px;
    }

    .floating-menu-container {
        bottom: 20px;
        right: 20px;
    }

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

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

    .menu-link {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* =============================================
   RESPONSIVE - Mobile (≤480px)
   ============================================= */
@media (max-width: 480px) {
    .contact-arrow-top {
        top: -18%;
        object-position: bottom left;
        left: 52%;
    } 
    .project-detail-wrapper .project-list-skills-content{
        padding: 0px;
    }
    .contact-arrow-bottom {
        bottom: -15%;
        object-position: bottom left;
        left: 126%;
    }
    .background-container{
        background-image: url('../assets/images/bg_home_mb.png');
    }
    body {
        background-image: url('../assets/images/bg_home_mb.png');
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    }
    /* === INDEX PAGE === */
    #design-overlay img {
        width: 115% !important;
        margin-left: -7.5%;
    }

    .xiaowfolio-logo-wrap {
        top: 50%;
        transform: translate(0%, -110%);
    }
    .background-container .xiaowfolio-logo-wrap {
        position: relative;
        margin-top: 50%;
        top: auto;
        transform: none;
        min-height: auto;
    }

    .project-detail-wrapper>img {
        height: auto;
        max-height: 250vh;
        /* hoặc tuỳ chỉnh theo ý bạn */
        width: 100%;
        object-fit: cover;
    }

    .xiaowfolio-logo img {
        width: 95%;
    }

    .contact-img {

        right: 16px;
    }

    .contact-img a {
        width: 70%;
    }

    .star-1 {
        width: 14px;
        margin-top: 15%;
    }

    /* === PROJECT PAGES === */
    .project-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 95%;
        padding: 0 3%;
        margin-top: 20px;
    }

    .cover-reveal-section,
    .cover-reveal-section-2 {
        width: 95%;
        margin-top: -25%;
    }

    .cover-mask-overlay {
        width: 130px;
        height: 130px;
    }

    /* === PROJECT DETAIL === */
    .project-detail-wrapper .project-header-section {
        padding-top: 8%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .project-detail-wrapper .project-name-text {
        font-size: clamp(2rem, 7vw, 3rem);
        padding: 12px 24px;
    }

    .project-detail-wrapper .project-name-text--short {
        font-size: clamp(4.4rem, 13vw, 3.6rem);
    }

    .project-detail-wrapper .project-name-text--ultra-short {
        font-size: clamp(3.2rem, 42vw, 10.2rem);
    }

    /* .project-detail-wrapper .project-name-subtext {
        font-size: 0.85rem;
    } */
    .project-detail-wrapper .project-name-subtext {
        /* 1. Tăng kích thước chữ (dùng !important để chắc chắn ghi đè các dòng cũ) */
        font-size: 1.3rem !important; 
        
        /* 2. Giúp chữ dễ đọc hơn khi xuống dòng */
        line-height: 1.5; 
        
        /* 3. Tạo khoảng cách để không bị dính vào phần tên phía trên và skill phía dưới */
        margin-left: 20px;
        margin-right: 24px;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        
        /* 4. Đảm bảo chữ không bị che bởi các phần tử tuyệt đối (nếu có) */
        position: relative;
        z-index: 5;
        
        /* 5. Giới hạn độ rộng để chữ không tràn sát mép màn hình */
        padding: 0 10px;
        display: block;
        width: 100%;
    }

.project-detail-wrapper .project-list-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    max-width: 100%;
}

.project-detail-wrapper .project-list-skills-content {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    justify-content: center;
}

.project-detail-wrapper .project-skill-item {
    /* flex: 0 0 calc((100% - 16px) / 3); */
    min-width: 0;
    padding: 12px 10px;
    font-size: clamp(0.55rem, 3.0vw, 0.8rem);
    line-height: 1.1;
    text-align: center;
    color: #0b0715;
    /* font-weight: 600; */
    text-transform: uppercase;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-detail-wrapper .project-skill-item.bg-skill1 {
    background-image: url('../assets/images/bg-skill1.png');
}

.project-detail-wrapper .project-skill-item.bg-skill2 {
    background-image: url('../assets/images/bg-skill2.png');
}

    .project-detail-wrapper .project-name-bg {
        margin-top: -40px;
        max-height: 20vh;
        margin-left: 8%;
    }
    .project-name-bg {
        padding: 12px 0px 0px 16px;
    }

    .project-detail-wrapper .gallery-cards-container {
        /* padding: 0 12px; */
        /* gap: 14px; */
        width: 100%;
        /* padding-top: 20px; */
    }

    .project-detail-wrapper .gallery-card {
        min-height: 160px;
    }

    .project-detail-wrapper .project-detail-columns {
        padding: 16px 12px;
        gap: 16px;
    }

    .project-detail-wrapper .project-info-container {
        margin-top: 0;
    }

    .project-detail-wrapper .project-info-title {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
    }

    .project-detail-wrapper .project-info-text {
        font-size: 0.95rem;
    }

.project-review-gallery {
    display: flex;
    flex-wrap: wrap;
    /* gap: 10px; */
    /* margin-top: 8px; */
}

.project-review-image {
    display: block;
    width: 100%;
    height: auto;
    /* max-height: 260px; */
    object-fit: contain;
    /* border-radius: 6px; */
}

.project-review-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    /* border-radius: 6px; */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

    .project-name-brief-row {
        flex-direction: column;
        margin-top: 0;
    }

    .project-name-column {
        flex: 1 1 auto;
        min-height: 160px;
    }

    .brief-idea-card {
        flex: 0 0 auto;
        max-width: 90%;
        margin: 0 auto;
    }

    .project-info-card {
        width: 92%;
        margin: 0 auto 14px;
    }

    /* === SHARED === */
    .find-marquee-wrapper {
        margin-top: 25px;
        transform: rotate(-5deg);
    }

    .bottom-magenta-triangle {
        height: 90px;
    }

    .floating-menu-container {
        bottom: 14px;
        right: 14px;
    }

    /* Only for non–project-detail pages (e.g. index) */
    .project-info-container {
        margin-top: -115%;
    }

    .project-detail-wrapper .project-info-container {
        margin-top: 0;
    }

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

    .menu-items {
        bottom: 65px;
    }

    .menu-link {
        padding: 7px 14px;
        font-size: 0.8rem;
    }
}

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

    .xiaowfolio-logo-wrap {
        top: 50%;
        transform: translate(22%, -110%);
    }
    .background-container .xiaowfolio-logo-wrap {
        position: relative;
        top: auto;
        transform: none;
        min-height: auto;
    }

    .xiaowfolio-logo img {
        width: 98%;
    }

    .contact-img {
        top: 10% !important;
        bottom: auto !important;
        right: 12px;
    }

    .contact-img a {
        width: 75%;
    }

    .project-cards-grid {
        padding: 0 2%;
        gap: 10px;
    }

    .project-detail-wrapper .project-header-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .project-detail-wrapper .gallery-cards-container,
    .project-detail-wrapper .project-detail-columns {
        padding-left: 10px;
        padding-right: 10px;
    }

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

@media (max-width: 480px) {
    .contact-img {
        position: absolute !important;
        top: 12% !important;
        bottom: auto !important;
        right: 12px !important;
        display: block !important;
        align-items: flex-end !important;
        gap: 0 !important;
        padding-right: 0 !important;
    }
}

/* See more button on project type page */
.project-grid-see-more-btn {
    position: absolute;
    right: 13%;
    /* top: 40%; */
    width: 350px;
    height: 300px;
    border: none;
    padding: 0;
    cursor: pointer;
    background-image: url("../assets/images/see.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    z-index: 5;
}

.project-arc-section {
    position: relative;
}

/* =============================================
   INDEX PAGE - Mobile (phones only): 767px so iPad Mini (768px) / iPad Air (820px) keep tablet layout
   ============================================= */
   @media (max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {
    .card-circles-row-inner {

        padding: 30% 0px !important; 

        }
        .card-circles-row-inner .card-circle
    {
            max-width: 295px !important;
    }
    .contact-bottom-section{
        min-height: 100vh;
    }
   }
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }
    .card-circles-row-inner {
        gap: 17px !important;
        padding: 24px 20px !important;
        }
    .project-preview-name {
        font-size: clamp(2rem, 8vw, 4rem);
        text-align: center;
        -webkit-text-stroke-width: 1px !important;
        transform: rotate(-8deg);
    }
    .project-arc-section.project-arc-section-has-preview .project-inline-preview:hover .project-preview-name {
        color: #EE2B5D;
        -webkit-text-stroke-color: #32C9C4;
        transform: rotate(-8deg) scale(1.08);
    }
    .contact-img {
        display: block !important;
        right: 16px !important;
    }

    a.contact-img-1 {
        transform: scale(1.08) rotate(-2deg) !important;
    }

    a.contact-img-1 .contact-arrow-top {
        transform: scale(3) translate(28px, -13px) !important;
    }

    a.contact-img-1 .contact-arrow-bottom {
        transform: scale(3) translate(-28px, 13px) !important;
    }

    a.contact-img-1 .contact-middle .contact-middle-default {
        opacity: 0 !important;
    }

    a.contact-img-1 .contact-middle .contact-middle-hover {
        opacity: 1 !important;
        transform: scale(1.06) translateX(-10px) !important;
    }

    a.contact-img-1::after {
        opacity: 1 !important;
    }

    /* Keep contact-img overrides; card layout inherits tablet styles */
}
/* project cart css */
/* Container chính thay thế cho project-grid-row */
.project-grid-container {
    display: grid;
    /* Khoảng cách giữa các ô */
    gap: 10px; 
    width: 100%;
}

/* Cấu hình số cột cho từng thiết bị */

/* Desktop: 4 cột */
@media (min-width: 1024px) {
    .project-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet: 3 cột */
@media (min-width: 768px) and (max-width: 1023px) {
    .project-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: 2 cột (giúp hình ảnh không bị quá nhỏ) */
@media (max-width: 767px) {
    .project-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px; /* Giảm khoảng cách trên mobile */
    }
}

/* Đảm bảo hình ảnh vuông và đẹp như trong thiết kế */
.project-grid-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.project-grid-card-inner {
    width: 100%;
    aspect-ratio: 1 / 1; /* Tạo khung vuông hoàn hảo */
    overflow: hidden;
    /* border-radius: 12px; Bo góc nhẹ cho hiện đại */
}

.project-grid-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ảnh phủ kín khung, không bị méo */
    transition: transform 0.3s ease;
}

.project-grid-card:hover .project-grid-card-img {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ khi di chuột */
}