@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700;900&display=swap');
/* === 1. RESET & GLOBAL TỐI ƯU === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Urbanist', sans-serif;
    background-color: #A8322D; /* Nền đỏ trùng màu Hero */
    color: #111;
    cursor: none; /* Ẩn chuột thật */
}

/* === 2. HERO SECTION (POSTER STYLE) TỐI ƯU === */
/* === 2. HERO SECTION (POSTER STYLE) TỐI ƯU === */
.hero-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    
    /* SỬA: Tăng z-index lên 1 để đè lên Footer */
    z-index: 1; 
    
    /* SỬA: Xóa dòng background-color ở đây (hoặc comment lại) */
    /* background-color: #A8322D; */ 
    
    overflow: hidden;
}

.hero-content-wrapper {
    height: 100%;
    width: 100%;

    background-color: #A8322D;
    padding: 60px 80px; /* Căn lề 4 phía */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Hàng trên: Logo & Link Behance */
.hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.logo-img {
    height: 50px; /* Kích thước logo */
    width: auto;
    filter: brightness(0) invert(1); /* Biến logo đỏ thành trắng */
}

.hero-link {
    color: #fff;
    text-decoration: underline;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Phần giữa: Em Giang */
.hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}


.hero-big-text {
    display: flex;
    align-items: center;
    gap: 5px; /* Khoảng cách giữa chữ và ảnh */
    font-weight: 900;
    
    /* SỬA: Tăng từ 10rem lên 13rem (hoặc 14rem nếu muốn to nữa) */
    font-size: 14rem; 
    
    line-height: 1;
    letter-spacing: -5px;
}

.hero-character-img {
    height: 380px;
    width: auto;
    margin-bottom: 20px;
}

.hero-big-text span {
    margin-top: 100px; /* Đẩy chữ xuống thấp để ngang với người */
}

/* Hàng dưới: Info & Icon */
.hero-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}

.scroll-indicator {
    animation: bounce 2s infinite;
    margin-bottom: 10px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(10px); }
    60% { transform: translateY(5px); }
}

/* === 3. CONTENT LAYER (TRẮNG TRƯỢT LÊN) TỐI ƯU === */
/* === 3. CONTENT LAYER (TRẮNG TRƯỢT LÊN) TỐI ƯU === */
.content-layer {
    position: relative;
    z-index: 10; /* Đảm bảo nằm TRÊN footer */
    background-color: #fff;
    min-height: 100vh;
    padding-top: 0;
    
    /* SỬA: Bo tròn cả 4 góc (thêm 2 góc dưới) */
    border-radius: 40px; 
    
    overflow: hidden; 
    
    /* SỬA: Thêm bóng đổ để tạo cảm giác "nổi" lên trên footer */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); 
    
    /* QUAN TRỌNG: Tạo khoảng trống để footer hiện ra khi cuộn hết */
    /* Giá trị này phải bằng hoặc lớn hơn chiều cao của footer (.red-footer) */
    margin-bottom: 400px; 
}

/* === VIDEO INTRO FULL MÀN HÌNH TỐI ƯU === */
.intro-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Chiều cao bằng đúng màn hình */
    background-color: #87CEEB;
    overflow: hidden;
}

.full-width-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Chữ đè lên Video */
.video-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    poUrbanist-events: none;
}

/* === PHẦN GIỚI THIỆU BẢN THÂN (TEXT INTRO) TỐI ƯU === */
.intro-text-section {
    background-color: #fff;
    padding: 100px 20px;
    text-align: center;
    color: #111;
}

.intro-content-box {
    max-width: 800px;
    margin: 0 auto;
}

.intro-content-box h3 {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 40px;
    color: #333;
}

.intro-content-box p {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Tiêu đề chung */
.section-header {
    padding-top: 40px;
    text-align: center;
    margin-bottom: 60px;
}

/* === PHẦN ẢNH TOÀN CẢNH (SEA WIDE) TỐI ƯU === */
.full-width-image-section {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    position: relative;
}

.full-width-image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === WORKS HEADER & FILTER TỐI ƯU === */
.projects {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px 100px 20px;
}

/* === WORKS HEADER & FILTER TỐI ƯU === */
.works-header {
    /* Kỹ thuật phá vỡ khung 1200px để tràn ra 100% màn hình */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    text-align: center; /* Căn giữa chữ so với toàn màn hình */
    margin-bottom: 80px;
    padding-top: 60px;
}

.huge-red-title {
    /* GIẢM TỪ 12vw XUỐNG 9.5vw */
    /* 9.5vw là con số an toàn cho cụm từ dài khoảng 13-14 ký tự */
    font-size: 9.5vw; 
    
    font-weight: 900;
    color: #A8322D;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: 2px;
    margin: 0 0 40px 0;
    white-space: nowrap;
}

.works-filter-menu {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.filter-item {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    text-decoration: underline;
    text-decoration-color: #000;
    text-underline-offset: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

 .filter-item:hover {
    color: #A8322D;
    text-decoration-color: #A8322D;
} 

/* === PROJECT GRID (SCATTERED/EDITORIAL) TỐI ƯU === */
.project-grid-scattered-final {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 50px;
    padding-bottom: 50px;
}

.scatter-final.item-right {
    margin-top: 150px;
}

.image-wrapper-raw {
    width: 100%;
    /* aspect-ratio giữ nguyên tùy theo code cũ của bạn */
    
    /* --- THÊM/SỬA DÒNG NÀY ĐỂ TẠO VIỀN ĐEN --- */
    border: 2px solid #000 !important; /* Viền đen 2px bao quanh toàn bộ ảnh */
    
    overflow: hidden;
    transition: transform 0.3s ease;
    
    /* Đảm bảo không còn gạch thừa nào */
    position: relative;
}

/* Xóa triệt để các gạch đen nếu còn sót */
.image-wrapper-raw::before,
.image-wrapper-raw::after {
    display: none !important;
    content: none !important;
}

.image-wrapper-raw.vertical-tall {
    aspect-ratio: 2 / 3;
}

.image-wrapper-raw img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.raw-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 5px;
}

/* Icon Trang Trí (Cây cối) */
.pixel-deco {
    position: absolute;
    z-index: 1;
    width: 30px;
    height: auto;
    image-rendering: pixelated;
}

.tree-top { top: -50px; left: 30%; }
.tree-mid-left { top: 30%; left: -50px; }
.tree-mid-right { top: 50%; right: -50px; }


/* === 5 YEARS IN DESIGN (SKILLS FOCUS) - ĐÃ SỬA LỖI CHỒNG CHÉO === */
.skills-section-focus {
    background-color: #f0f0f0;
    padding: 80px 20px 100px 20px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.years-title {
    /* Kích thước tối đa để vừa khít 1 dòng (khoảng 8.5% chiều rộng màn hình) */
    font-size: 9.5vw; 
    
    font-weight: 900;       
    text-align: center;
    margin-bottom: 80px;    
    text-transform: uppercase;
    color: #000;            
    
    /* QUAN TRỌNG: Giữ chữ luôn trên 1 dòng */
    white-space: nowrap; 
    
    /* Co chữ lại cho chặt chẽ giống poster */
    letter-spacing: -0.04em; 
    line-height: 1;       
    
    /* Đảm bảo không bị padding của container ép xuống dòng */
    width: 100%;
    display: block;
}

.skills-list-focus-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

/* Đã chỉnh line-height lớn hơn để tránh chồng chéo */
.skills-list-focus {
    text-align: center;
    line-height: 1.3; 
    position: relative;
    z-index: 10;
}

/* Đã chỉnh font-size và line-height cho khớp với hiệu ứng Zoom */
.skill-item-focus {
    font-size: 2.5rem; 
    line-height: 1.4; /* Quan trọng: Tăng khoảng cách để không đè lên nhau khi phóng to */
    text-transform: uppercase;
    font-weight: 400;
    color: #444; /* Màu gốc xám đậm (JS sẽ chỉnh thành đen khi focus) */
    
    will-change: transform, opacity, font-weight, color;
    transition: none;
    margin: 5px 0;
}

/* ICON TRANG TRÍ */
/* === DECORATION ELEMENTS (STICKERS) - ĐÃ CHỈNH THEO ẢNH MẪU === */
/* =========================================
   ICON TRANG TRÍ (BỐ CỤC MỚI - ẢNH 2)
   ========================================= */

/* =========================================
   STICKER LAYOUT (STYLE SETH LUKIN)
   ========================================= */

/* =========================================
   STICKER LAYOUT (SETH LUKIN STYLE - SÁT LỀ)
   ========================================= */

/* =========================================
   FIX LỖI STICKER KHÔNG ĐỔI (Dán vào cuối file)
   ========================================= */

/* Container bao trùm */
/* =========================================
   STICKER ORBIT LAYOUT (BỐ CỤC VỆ TINH)
   ========================================= */

.deco-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important; /* Chuột xuyên qua để bấm chữ */
    z-index: 1;
    overflow: visible;
}

.deco-obj {
    position: absolute !important;
    image-rendering: pixelated;
    width: 80px; /* Kích thước trung bình, bạn có thể chỉnh riêng từng cái */
    height: auto;
    transition: transform 0.3s ease;
}

/* --- ĐỊNH VỊ TỌA ĐỘ (MÔ PHỎNG ẢNH 2) --- */

/* --- ĐỊNH VỊ TỌA ĐỘ MỚI (TẢN RỘNG RA NHƯ ẢNH 2) --- */

/* =========================================
   STICKER LAYOUT - PHIÊN BẢN RỘNG & SÁT LỀ (FINAL)
   ========================================= */

/* --- ĐỊNH VỊ TỌA ĐỘ MỚI (VÒNG CUNG RỘNG) --- */

/* 1. Góc trên Trái (Quả Táo) - Đẩy cao lên và sát lề trái hơn */
.pos-orbit-1 {
    top: 5% !important;    
    left: 15% !important;   /* Cách lề một chút để tạo góc bo */
    transform: rotate(-15deg);
    width: 80px;
}

/* 2. Góc trên Phải (Đám Mây) - Đối xứng */
.pos-orbit-2 {
    top: 5% !important;
    right: 15% !important; 
    transform: rotate(10deg);
    width: 90px;
}

/* 3. Giữa Trái - Cao (Phong bì) -> SÁT SẠT LỀ */
.pos-orbit-3 {
    top: 30% !important;    /* Kéo lên cao hơn */
    left: 1% !important;    /* Sát mép (1%) */
    transform: rotate(-5deg);
    width: 70px;
}

/* 4. Giữa Phải - Cao (Chó 1) -> SÁT SẠT LỀ */
.pos-orbit-4 {
    top: 30% !important;
    right: 1% !important;   /* Sát mép (1%) */
    transform: rotate(15deg);
    width: 75px;
}

/* 5. Giữa Trái - Thấp (Chó 2) -> SÁT SẠT LỀ */
.pos-orbit-5 {
    top: 65% !important;    /* Kéo xuống thấp hẳn */
    left: 2% !important;    /* Sát mép */
    transform: rotate(5deg);
    width: 85px;
}

/* 6. Giữa Phải - Thấp (Tin nhắn) -> SÁT SẠT LỀ */
.pos-orbit-6 {
    top: 65% !important;
    right: 2% !important;
    transform: rotate(-10deg);
    width: 80px;
}

/* 7. Đáy Trái (Đồng hồ cát) - Nằm thấp và bo vào */
.pos-orbit-7 {
    top: auto !important;   
    bottom: 5% !important;  
    left: 20% !important;   /* Đẩy vào trong để đỡ khối chữ */
    transform: rotate(0deg);
    width: 100px;
}

/* 8. Đáy Phải (Gậy sao) - Nằm thấp và bo vào */
.pos-orbit-8 {
    top: auto !important;
    bottom: 5% !important;
    right: 20% !important;
    transform: rotate(-20deg);
}


/* --- LOGIC CHO COIN (NẾU DÙNG) --- */
.coin-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.coin-stack {
    display: flex;
    gap: 5px;
}
.pixel-coin {
    width: 30px;
    animation: floatCoin 3s infinite ease-in-out;
}
@keyframes floatCoin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1200px) {
    .deco-elements { opacity: 0.2; } /* Làm mờ hẳn để không rối mắt */
    /* Ẩn bớt các sticker ở giữa để chừa chỗ cho chữ */
    .pos-orbit-3, .pos-orbit-4, .pos-orbit-5, .pos-orbit-6 { display: none !important; }
}
/* === 4. FOOTER TỐI ƯU === */
/* === 4. FOOTER TỐI ƯU === */
/* =========================================
   KHÔI PHỤC FOOTER VỀ TRẠNG THÁI GỐC
   (Dán đè vào phần Footer trong style.css)
   ========================================= */

.red-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Chiều cao cố định */
    z-index: 0;    /* Nằm dưới lớp nội dung */
    
    background-color: #A8322D;
    color: #fff;
    
    padding: 100px 40px 60px 40px;
    box-sizing: border-box;
    
    /* Căn giữa toàn bộ khối nội dung theo chiều dọc */
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.footer-content {
    width: 100%;
    max-width: 1200px; /* Giới hạn chiều rộng để thẳng hàng với web */
    margin: 0 auto;    /* Căn giữa khung */
    
    display: flex;
    justify-content: space-between; /* Đẩy chữ sang 2 bên */
    align-items: flex-end; /* Căn đáy dòng chữ */
}

/* Phần chữ Copyright bên dưới */
.footer-bottom {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0 auto; /* Cách phần trên 40px */
    
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .red-footer {
        position: relative; /* Mobile không cần fixed */
        height: auto;
        padding: 60px 20px;
        z-index: 1;
    }
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        margin-top: 40px;
    }
}
.footer-content h2 { font-size: 4rem; line-height: 1; font-weight: 900; }
.footer-links a { color: #fff; margin-left: 30px; font-size: 1.2rem; font-weight: 700; }

/* === 5. CUSTOM CURSOR (ĐỔI MÀU) TỐI ƯU === */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background-image: url('images/my-cursor.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9999;
    poUrbanist-events: none;
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease;
}
.custom-cursor.red-mode {
    filter: invert(24%) sepia(44%) saturate(4449%) hue-rotate(344deg) brightness(93%) contrast(87%);
}

/* === 6. FADE IN TỐI ƯU === */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.6s;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === RESPONSIVE TỐI ƯU (Tổng hợp) === */
@media (max-width: 768px) {
    .hero-content-wrapper { padding: 20px; }
    .logo-img { height: 40px; }
    .hero-big-text { font-size: 4rem; flex-direction: column; gap: 0; }
    .hero-big-text span { margin-top: 0; }
    .hero-character-img { height: 200px; margin: 10px 0; }
    .hero-bottom-row { flex-direction: column; gap: 20px; text-align: center; align-items: center;}
    .video-overlay-text { font-size: 1.5rem; width: 90%; }
    
    .huge-red-title { font-size: 4rem; }
    .works-filter-menu { gap: 20px; }
    .filter-item { font-size: 1rem; }
    
    .project-grid-scattered-final { grid-template-columns: 1fr; gap: 30px; }
    .scatter-final.item-right { margin-top: 0; }

    .years-title { font-size: 2.5rem; margin-bottom: 40px; }
    .skill-item-focus { font-size: 1.5rem; }
    
    .footer-content { flex-direction: column; gap: 30px; text-align: center; align-items: center; }
    .footer-content h2 { font-size: 3rem; }
}

/* --- CODE MỚI CHO FILTER --- */

/* Class dùng để ẩn các project thừa */
.hidden-slot {
    display: none !important;
}

/* Class dùng để biến Project 1 thành ảnh to giữa màn hình */
.single-center-mode {
    grid-column: 1 / -1; /* Chiếm trọn bề ngang lưới (span all) */
    width: 100%;
    max-width: 900px;    /* Giới hạn độ rộng để không bị bè quá */
    margin: 0 auto;      /* Căn giữa */
    text-align: center;
    margin-top: 50px !important; /* Reset margin cũ */
}

/* Khi ở chế độ 1 ảnh, chỉnh lại tỷ lệ khung ảnh cho đẹp (Ngang rộng) */
.single-center-mode .image-wrapper-raw {
    width: 100%;
    aspect-ratio: 16 / 9; /* Tỷ lệ màn hình rộng điện ảnh */
}

/* Hiệu ứng active cho nút Filter */
.filter-item.active {
    color: #A8322D;
    text-decoration-color: #A8322D;
    opacity: 1;
}

/* --- CODE XỬ LÝ LOGIC FILTER --- */

/* 1. Class để ẩn Slot 2 khi chỉ cần hiện 1 ảnh */
.hidden-slot {
    display: none !important;
}

/* 2. Chế độ 1 ảnh to nằm giữa (cho Magazine, Visual...) */
.single-center-mode {
    grid-column: 1 / -1; /* Chiếm toàn bộ chiều ngang lưới */
    width: 100%;
    max-width: 1000px;   /* Giới hạn chiều rộng cho đẹp */
    margin: 50px auto 0 auto !important; /* Căn giữa */
    text-align: center;
}

/* Khi ở chế độ 1 ảnh, chỉnh lại tỷ lệ khung ảnh thành Ngang (Landscape) */
.single-center-mode .image-wrapper-raw {
    width: 100%;
    aspect-ratio: 16 / 9; /* Ảnh ngang điện ảnh */
}

/* Hiệu ứng mờ đi khi chuyển đổi ảnh */
.loading-fade {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Màu cho nút đang chọn */
.filter-item.active {
    color: #A8322D;
    text-decoration-color: #A8322D;
}

/* =========================================
   CASE STUDY (SETH LUKIN STYLE)
   ========================================= */

.case-study-page {
    background-color: #ffffff;
    color: #111111;
    font-family: 'Urbanist', sans-serif;
    overflow-x: hidden;
}

/* 1. NAV */
.cs-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(255,255,255,0.95);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.back-link {
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s;
}
.back-link:hover { opacity: 0.6; }
.close-icon { font-size: 1.5rem; line-height: 1; }

/* 2. HERO */
.cs-wrapper {
    padding-top: 120px;
    max-width: 100%;
}

.cs-hero {
    padding: 60px 40px 100px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.cs-subtitle {
    font-size: 4rem; /* Reimagining... */
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
}

.cs-title-large {
    font-size: 15rem; /* LUUNA to đùng */
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -5px;
    margin-left: -10px;
    text-transform: uppercase;
}

/* 3. GRID LAYOUT (Overview & Info) */
.cs-grid-section {
    display: grid;
    grid-template-columns: 300px 1fr; /* Cột trái cố định, phải auto */
    gap: 40px;
    padding: 60px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.border-top { border-top: 1px solid #eee; }

.cs-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.cs-paragraph {
    font-size: 1.5rem; /* Chữ nội dung to dễ đọc */
    line-height: 1.5;
    font-weight: 400;
    color: #222;
    max-width: 800px;
}

/* 4. IMAGES */
.cs-full-image {
    width: 100%;
    margin: 60px 0;
}
.cs-full-image img {
    width: 100%;
    height: auto;
    display: block;
}

.cs-image-row {
    display: flex;
    gap: 20px;
    margin-top: 60px;
}
.half-img {
    width: 50%;
    object-fit: cover;
}

/* 5. CONTENT BLOCKS */
.cs-content-block {
    padding: 100px 40px;
}
.gray-bg { background-color: #f9f9f9; }

.cs-text-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.cs-heading {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    line-height: 1.2;
}

.cs-list-block { margin-top: 40px; }
.cs-small-title {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
}
.cs-list li {
    font-size: 1.2rem;
    margin-bottom: 20px;
    line-height: 1.6;
    list-style: none;
    position: relative;
    padding-left: 20px;
}
.cs-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
}

/* 6. FOOTER */
.cs-footer {
    background: #111;
    color: #fff;
    padding: 100px 40px 40px 40px;
    margin-top: 100px;
}
.cs-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 80px;
    margin-bottom: 40px;
}
.cs-footer-label { font-size: 2rem; font-weight: 700; }
.cs-footer-link {
    color: #fff;
    font-size: 1rem;
    border: 1px solid #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s;
}
.cs-footer-link:hover { background: #fff; color: #000; }

.cs-bottom-bar {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    opacity: 0.5;
    text-transform: uppercase;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cs-title-large { font-size: 6rem; letter-spacing: -2px; }
    .cs-subtitle { font-size: 2.5rem; }
    .cs-grid-section { grid-template-columns: 1fr; gap: 20px; }
    .cs-paragraph { font-size: 1.1rem; }
    .cs-image-row { flex-direction: column; }
    .half-img { width: 100%; }
}

/* Ép con chuột thành màu Đỏ khi ở trang Case Study (để nổi trên nền trắng) */
.case-study-page .custom-cursor {
    /* Copy filter màu đỏ từ class .red-mode */
    filter: invert(24%) sepia(44%) saturate(4449%) hue-rotate(344deg) brightness(93%) contrast(87%) !important;
}

/* =========================================
   CASE STUDY PARALLAX EFFECT (NEW)
   ========================================= */

/* 1. Thiết lập vùng Hero cố định */
.cs-hero-container {
    position: sticky;
    top: 0;
    height: 100vh; /* Chiều cao bằng màn hình */
    width: 100%;
    z-index: 1; /* Nằm dưới */
    overflow: hidden;
    background-color: #f4f4f4; /* Màu nền nhẹ cho Hero */
    
    /* Căn giữa nội dung Hero */
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.cs-hero-content {
    width: 100%;
    will-change: transform, opacity, filter; /* Tối ưu hiệu năng animation */
}

/* Chỉnh lại padding Hero cũ một chút vì giờ nó đã được căn giữa dọc */
.cs-hero {
    padding: 0 40px; /* Bỏ padding-top/bottom lớn đi */
    margin: 0 auto;
    max-width: 1400px;
}

/* 2. Thiết lập lớp nội dung trượt lên */
.cs-content-layer {
    position: relative;
    z-index: 10; /* Nằm TRÊN Hero */
    background-color: #fff; /* Nền trắng đè lên */
    
    /* Tạo khoảng trống phía trên để lộ Hero ra ban đầu */
    /* 100vh nghĩa là bắt đầu ngay mép dưới màn hình đầu tiên */
    /* Nhưng ta cần nó nối tiếp ngay sau Hero, nên margin-top là 0 */
    /* Quan trọng: Min-height phải lớn để cuộn được */
    min-height: 100vh; 
    
    /* Bo góc và bóng đổ giống trang chủ */
/* Code mới: Bo tròn cả 4 góc luôn */
border-radius: 40px; 

/* Đảm bảo nội dung con không bị chòi ra ngoài góc bo */
overflow: hidden;
    box-shadow: 0 -20px 50px rgba(0,0,0,0.1);
    
    padding-top: 80px; /* Đẩy nội dung xuống một chút khỏi mép bo tròn */
}


/* Đảm bảo Navbar luôn nổi trên cùng */
.cs-navbar {
    z-index: 100;
    background: transparent; /* Trong suốt để nhìn thấy Hero */
    opacity: 0;              /* Ẩn hoàn toàn */
    pointer-events: none;
    transition: all 0.4s ease;
}

/* Khi cuộn xuống phần trắng thì Navbar nên có nền mờ (Tùy chọn) */
.cs-navbar.scrolled {
    background: rgba(255,255,255,0.95); /* Hiện nền trắng mờ */
    opacity: 1;              /* Hiện rõ nội dung */
    pointer-events: auto;    /* Cho phép bấm nút Close */
    
    /* Tùy chọn: Thêm bóng đổ nhẹ để tách biệt với nội dung */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 20px 40px; /* Thu gọn padding một chút cho đẹp */
}

/* =========================================
   STYLE CHUẨN SETH LUKIN (UPDATE)
   ========================================= */

/* Padding chung cho nội dung */
.cs-wrapper {
    padding-top: 60px; /* Cách mép trên một chút */
    padding-bottom: 100px;
}

/* 1. HEADER TYPOGRAPHY */
.cs-hero-section {
    padding: 0 40px;
    max-width: 1400px;
    margin: 0 auto 60px auto;
}

/* Chữ to đùng: REIMAGINING... */
.cs-big-headline {
    font-family: 'Urbanist', sans-serif;
    font-size: 7vw; /* Tự động to theo màn hình (khoảng 80px-120px) */
    font-weight: 900; /* Rất đậm */
    text-transform: uppercase;
    line-height: 0.9; /* Khoảng cách dòng xít lại */
    letter-spacing: -2px; /* Các chữ xít lại nhau */
    color: #000;
    margin-bottom: 10px;
}

/* Tên dự án nhỏ: LUUNA */
.cs-project-name {
    font-family: 'Urbanist', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #999; /* Màu xám */
    margin-top: 10px;
}

/* 2. OVERVIEW GRID (CHIA CỘT 200px - Còn lại) */
.cs-overview-grid {
    display: grid;
    grid-template-columns: 200px 1fr; /* Cột trái cố định 200px */
    gap: 40px;
    padding: 0 40px;
    max-width: 1400px;
    margin: 0 auto 80px auto;
}

/* Label bên trái: OVERVIEW */
.cs-label-bold {
    font-size: 1rem;
    font-weight: 900; /* Rất đậm */
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

/* Đoạn văn bên phải */
.cs-paragraph-text {
    font-size: 1.5rem; /* Chữ to chuẩn Editorial */
    line-height: 1.5;
    color: #111;
    font-weight: 400;
    margin-bottom: 40px; /* Cách phần Responsibilities ra */
    max-width: 900px;
}

/* 3. RESPONSIBILITIES (NẰM TRONG CỘT PHẢI) */
.cs-responsibilities-block {
    margin-top: 20px;
}

.cs-resp-title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
}

.cs-resp-content {
    font-size: 1.1rem;
    color: #666; /* Màu xám cho nội dung liệt kê */
    line-height: 1.4;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .cs-hero-section, .cs-overview-grid {
        padding: 0 20px;
    }
    .cs-big-headline {
        font-size: 3.5rem;
    }
    .cs-overview-grid {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
        gap: 20px;
    }
    .cs-paragraph-text {
        font-size: 1.2rem;
    }
}


/* =========================================
   STYLE ẢNH CHI TIẾT (GIỐNG ẢNH MẪU 2)
   ========================================= */

.cs-detail-image-wrapper {
    width: 100%;
    max-width: 1400px; /* Giới hạn độ rộng tối đa bằng với khung chữ */
    margin: 60px auto; /* Căn giữa màn hình */
    padding: 0 40px;   /* Căn lề 2 bên 40px để thẳng hàng với text (Overview, Responsibilities) */
    box-sizing: border-box;
}

.cs-detail-img {
    width: 100%;
    /* Thiết lập chiều cao và tỷ lệ */
    height: auto;
    max-height: 650px; /* QUAN TRỌNG: Giới hạn chiều cao để không bị "quá to" */
    aspect-ratio: 16 / 9; /* Tỷ lệ khung hình chữ nhật ngang chuẩn (giống ảnh mẫu) */
    
    /* Xử lý ảnh */
    object-fit: cover; /* Cắt ảnh vừa khít khung mà không bị méo hình */
    display: block;
    
    /* Tạo viền đen giống thiết kế mẫu */
    border: 2px solid #000; 
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .cs-detail-image-wrapper {
        padding: 0 20px; /* Giảm lề trên mobile */
    }
    
    .cs-detail-img {
        max-height: 300px; /* Thu nhỏ chiều cao trên mobile */
        aspect-ratio: 4 / 3; /* Đổi tỷ lệ một chút cho dễ nhìn trên điện thoại */
    }
}

/* =========================================
   STYLE CHO 2 ẢNH DESIGN CHALLENGE (SIDE BY SIDE)
   ========================================= */

.cs-dual-image-row {
    display: flex;
    justify-content: space-between; /* Đẩy 2 ảnh ra 2 đầu */
    gap: 20px; /* Khoảng cách giữa 2 ảnh */
    
    max-width: 1400px;
    margin: 0 auto 60px auto; /* Căn giữa và cách dưới 60px */
    padding: 0 40px; /* Căn lề 2 bên bằng với phần chữ bên trên */
    box-sizing: border-box;
}

.cs-dual-img {
    /* Tính toán: Mỗi ảnh chiếm 50% trừ đi 1 nửa khoảng cách gap */
    width: calc(50% - 10px); 
    height: auto;
    object-fit: cover;
    display: block;
    
    /* Tạo viền đen 2px giống style chung */
    border: 2px solid #000;
}

/* Responsive: Trên điện thoại thì xếp chồng lên nhau */
@media (max-width: 768px) {
    .cs-dual-image-row {
        flex-direction: column; /* Xếp dọc */
        gap: 30px;
    }
    
    .cs-dual-img {
        width: 100%; /* Full màn hình */
    }
}


/* =========================================
   FIX LẠI DESIGN CHALLENGE CHO GIỐNG MẪU
   ========================================= */

/* 1. Tiêu đề to, đậm, đen nằm bên trái */
.cs-side-heading {
    font-size: 2.2rem; /* Chữ to khoảng 35-40px */
    font-weight: 900;  /* Siêu đậm */
    text-transform: uppercase;
    color: #000;       /* Màu đen tuyệt đối */
    line-height: 1;    /* Dòng xít lại */
    margin: 0;
}

/* 2. Tạo hiệu ứng khung tranh (Viền đen - Khoảng trắng - Ảnh) */
.cs-dual-img {
    width: calc(50% - 15px); /* Trừ hao khoảng cách */
    height: auto;
    object-fit: cover;
    display: block;
    
    /* MẤU CHỐT TẠO KHUNG TRANH */
    border: 2px solid #000;   /* Viền đen ngoài cùng */
    padding: 8px;             /* Khoảng trắng ở giữa (tăng giảm số này để chỉnh độ dày viền trắng) */
    background-color: #fff;   /* Nền trắng cho khoảng hở */
}

/* Fix lại layout cột cho đẹp hơn với chữ to */
.cs-grid-section {
    align-items: flex-start; /* Căn chữ thẳng hàng bên trên */
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .cs-side-heading {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    .cs-dual-img {
        width: 100%;
    }
}


/* =========================================
   STYLE CONNECTING NEEDS (KHÔNG MÀU NỀN)
   ========================================= */

/* 1. Container chung: KHÔNG CÓ MÀU NỀN XÁM */
.cs-connect-section {
    padding: 80px 40px; /* Căn lề trên dưới vừa phải */
    margin-bottom: 60px;
    background-color: transparent; /* Đảm bảo nền trong suốt/trắng */
}

/* 2. Grid Layout: Chia cột Trái (350px) - Phải (Còn lại) */
.cs-connect-grid {
    display: grid;
    grid-template-columns: 350px 1fr; 
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    
    /* Căn hàng ngang bắt đầu từ trên cùng */
    align-items: flex-start; 
}

/* 3. Cột Trái: Tiêu đề To, Đậm */
.cs-connect-big-title {
    font-size: 2.5rem;    /* Chữ to khoảng 40-50px */
    font-weight: 900;     /* Rất đậm */
    text-transform: uppercase;
    line-height: 1;       /* Dòng xít lại */
    color: #000;          /* Màu đen */
    margin: 0;
    
    /* Sticky: Giúp tiêu đề trôi theo khi cuộn nội dung dài (Option) */
    position: sticky;
    top: 100px; 
}

/* 4. Cột Phải: Nội dung */
.cs-connect-block {
    margin-bottom: 60px;
}
.cs-connect-block:last-child {
    margin-bottom: 0;
}

/* Tiêu đề con */
.cs-connect-sub-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

/* Đoạn văn */
.cs-connect-paragraph {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333; /* Màu đen xám nhẹ dễ đọc trên nền trắng */
    font-weight: 400;
    max-width: 850px;
}

/* --- Responsive Mobile --- */
@media (max-width: 900px) {
    .cs-connect-grid {
        grid-template-columns: 1fr; /* Về 1 cột */
        gap: 40px;
    }
    .cs-connect-big-title {
        font-size: 2rem;
        position: static; /* Tắt sticky trên mobile */
        margin-bottom: 20px;
    }
}

/* =========================================
   STYLE CHO ẢNH LỚN NẰM GIỮA
   ========================================= */

.cs-large-image-container {
    width: 100%;
    max-width: 1400px; /* Giới hạn độ rộng tối đa bằng với khung chữ bên trên */
    margin: 0 auto 100px auto; /* Căn giữa màn hình và cách đoạn dưới 100px */
    padding: 0 40px;   /* Căn lề 2 bên 40px để thẳng hàng với text */
    box-sizing: border-box;
}

.cs-large-img {
    width: 100%;   /* Ảnh luôn chiếm hết chiều ngang container */
    height: auto;  /* Chiều cao tự động theo tỷ lệ ảnh */
    display: block;
    /* object-fit: contain; -> Dùng cái này nếu bạn muốn đảm bảo thấy 100% ảnh không bị cắt */
    border: 2px solid #000;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .cs-large-image-container {
        padding: 0 20px; /* Giảm lề trên mobile */
        margin-bottom: 60px;
    }
}

/* =========================================
   STYLE KEY THEMES & ARCHITECTURE (NỀN TRẮNG)
   ========================================= */

/* 1. Container chung: Nền Trắng */
.cs-themes-arch-section {
    background-color: #fff; /* Đổi thành màu trắng */
    padding: 80px 40px;
    margin-bottom: 60px;
}

/* 2. Grid Row: Chia dòng layout */
.cs-grid-row {
    display: grid;
    grid-template-columns: 350px 1fr; /* Cột trái 350px, phải tự động */
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

/* 3. Style cho Tiêu đề nhỏ (KEY THEMES...) */
.cs-label-title {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    letter-spacing: -0.5px;
}

/* 4. Style cho Tiêu đề lớn (ARCHITECTURE...) */
.cs-big-title-stacked {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    color: #000;
    margin: 0;
    letter-spacing: -1px;
}

/* 5. Style cho List (Gạch đầu dòng) */
.cs-theme-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-theme-list li {
    font-size: 1.25rem;
    line-height: 1.5;
    color: #333; /* Đổi màu chữ đậm hơn chút cho dễ đọc trên nền trắng */
    margin-bottom: 30px;
    position: relative;
    padding-left: 20px;
}

/* Dấu chấm vuông */
.cs-theme-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background-color: #000;
}

.cs-theme-list li strong {
    color: #000;
    font-weight: 700;
}

/* 6. Tiện ích khoảng cách */
.border-bottom {
    padding-bottom: 60px;
    /* border-bottom: 1px solid #eee; -> Bạn có thể bỏ comment dòng này nếu muốn có gạch mờ ngăn cách */
}
.padding-top {
    padding-top: 60px;
}

/* --- Responsive Mobile --- */
@media (max-width: 900px) {
    .cs-grid-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cs-themes-arch-section {
        padding: 60px 20px;
    }
    .border-bottom {
        padding-bottom: 40px;
    }
    .padding-top {
        padding-top: 40px;
    }
}

/* =========================================
   STYLE CHO 2 ẢNH SHOWCASE (FULL WIDTH)
   ========================================= */

.cs-showcase-section {
    max-width: 1400px;
    margin: 0 auto 100px auto; /* Căn giữa và cách đoạn dưới 100px */
    padding: 0 40px;   /* Căn lề 2 bên thẳng hàng với nội dung trên */
    
    display: flex;
    flex-direction: column; /* Xếp 2 ảnh theo chiều dọc */
    gap: 40px; /* Khoảng cách giữa 2 ảnh */
}

.cs-showcase-item {
    width: 100%;
}

.cs-showcase-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    
    /* STYLE QUAN TRỌNG: Viền đen giống mẫu */
    border: 2px solid #000; 
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .cs-showcase-section {
        padding: 0 20px;
        gap: 20px;
        margin-bottom: 60px;
    }
}

/* =========================================
   HIỆU ỨNG FOOTER REVEAL (GIỐNG TRANG CHỦ)
   ========================================= */

/* 1. Footer cố định ở lớp dưới */
.cs-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Chiều cao cố định để khớp với margin */
    z-index: 0;    /* Nằm chìm dưới nội dung */
    
    /* Căn giữa nội dung footer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    background: #111; /* Giữ màu nền đen của trang con */
    margin-top: 0;    /* Xóa margin cũ */
    padding: 0 40px;
    box-sizing: border-box;

    opacity: 0; /* Mặc định ẩn đi */
    transform: scale(0.9); /* Thu nhỏ nhẹ một chút để lát nữa phóng to ra */
    will-change: opacity, transform; /* Tối ưu hiệu năng cho trình duyệt */
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

/* 2. Nội dung trượt bên trên */
.cs-content-layer {
    /* Thêm các thuộc tính này vào class cũ */
    position: relative;
    z-index: 10; /* Nổi lên trên footer */
    background-color: #fff;
    
    /* Tạo khoảng trống để lộ footer khi cuộn hết */
    margin-bottom: 400px; 
    
    /* Bo góc dưới và tạo bóng đổ để tách biệt lớp */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Bóng đổ đậm hơn chút cho rõ */
}

/* Responsive Mobile: Tắt hiệu ứng nếu màn hình quá nhỏ (Tùy chọn) */
@media (max-width: 768px) {
    .cs-footer {
        position: relative; /* Trở về bình thường */
        height: auto;
        padding: 60px 20px;
        z-index: 1;
    }
    .cs-content-layer {
        margin-bottom: 0; /* Xóa khoảng trống */
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- FIX LỖI KHÔNG BẤM ĐƯỢC VÀO DỰ ÁN --- */
.scatter-final {
    position: relative; 
    z-index: 10; /* Đưa dự án nổi cao hơn cây cối (z-index: 1) */
}

/* =========================================
   FIX LỖI CON TRỎ CHUỘT CHẶN CLICK
   (Dán đè vào cuối file style.css)
   ========================================= */

.custom-cursor {
    /* Quan trọng nhất: Cho phép chuột xuyên qua ảnh để bấm nút bên dưới */
    pointer-events: none !important; 
    
    /* Đảm bảo nó nổi lên trên nhưng không chặn tương tác */
    z-index: 9999 !important;
}

/* Đảm bảo menu bộ lọc luôn nổi cao hơn các layer trang trí khác */
.works-filter-menu {
    position: relative;
    z-index: 10000 !important; /* Cao hơn cả sticker */
    cursor: pointer;
}

.filter-item {
    pointer-events: auto !important; /* Ép buộc nút phải nhận click */
    position: relative;
    z-index: 10001 !important;
}

/* =========================================
   HIỆU ỨNG LƯỚI BỌT SETH LUKIN (FIX FINAL)*/
/* =========================================
   HIỆU ỨNG PIXEL REVEAL (HẠT VUÔNG)
   (Thay thế hoàn toàn đoạn code lưới cũ)
   ========================================= */

.image-wrapper-raw {
    position: relative;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    transform: translateZ(0); /* Tối ưu GPU */
    
    /* --- CẤU HÌNH HẠT VUÔNG (PIXEL) --- */
    
    /* 1. Kích thước lưới pixel (Bạn có thể chỉnh 12px thành 8px hoặc 16px tùy thích) */
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
    
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;

    /* 2. Tạo hình vuông bằng cách giao thoa 2 dải sọc (Ngang & Dọc) */
    /* Dải dọc */
    --mask-vertical: linear-gradient(
        to right, 
        transparent calc(50% - var(--dot-size) / 2), 
        black calc(50% - var(--dot-size) / 2), 
        black calc(50% + var(--dot-size) / 2), 
        transparent calc(50% + var(--dot-size) / 2)
    );
    
    /* Dải ngang */
    --mask-horizontal: linear-gradient(
        to bottom, 
        transparent calc(50% - var(--dot-size) / 2), 
        black calc(50% - var(--dot-size) / 2), 
        black calc(50% + var(--dot-size) / 2), 
        transparent calc(50% + var(--dot-size) / 2)
    );

    /* 3. Áp dụng Mask */
    -webkit-mask-image: var(--mask-vertical), var(--mask-horizontal);
    mask-image: var(--mask-vertical), var(--mask-horizontal);
    
    /* 4. Lệnh quan trọng: Chỉ hiện phần giao nhau (Tạo thành hình vuông) */
    -webkit-mask-composite: source-in; 
    mask-composite: intersect;
    
    /* Chuyển động mượt */
    will-change: mask-image, -webkit-mask-image;
    transition: all 0.1s linear; 
}

/* Xóa sạch code cũ */
.image-wrapper-raw::before,
.image-wrapper-raw::after {
    display: none !important;
    content: none !important;
}
/* =========================================
   STYLE CHO LOGO TRÊN NAVBAR
   ========================================= */

.nav-logo {
    height: 40px; /* Chiều cao cố định, chiều rộng tự chỉnh theo */
    width: auto;
    display: block;
    
    /* Nếu logo của bạn màu đỏ và bạn muốn nó hiện màu đỏ gốc thì giữ nguyên */
    /* Nếu bạn muốn logo chuyển sang màu đen cho dễ nhìn trên nền trắng thì thêm dòng dưới: */
    /* filter: brightness(0); */ 
}

/* Chỉnh lại căn lề cho nav-left một chút nếu cần */
.nav-left {
    display: flex;
    align-items: center;
}


/* =========================================
   NAVBAR LAYOUT FIX (LOGO + MENU TRÁI)
   ========================================= */

/* 1. Căn chỉnh cụm bên trái (Logo + Menu nằm ngang) */
.nav-left-container {
    display: flex;
    align-items: center;
    gap: 40px; /* Khoảng cách giữa Logo và Menu */
}

/* 2. Chỉnh Logo */
.nav-logo {
    height: 35px; /* Chiều cao vừa phải */
    width: auto;
    display: block;
    object-fit: contain;
}

/* 3. Chỉnh Menu (Home - About - Works) */
.nav-links {
    display: flex;
    gap: 30px; /* Khoảng cách giữa các chữ */
}

.nav-links a {
    text-decoration: none;
    color: #A8322D; /* Màu ĐỎ chuẩn theo yêu cầu */
    font-weight: 800; /* Chữ đậm */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Urbanist', sans-serif; /* Đảm bảo font đúng */
    transition: opacity 0.2s;
}

.nav-links a:hover {
    opacity: 0.7;
}

/* Mobile: Ẩn menu đi cho đỡ chật */
@media (max-width: 768px) {
    .nav-links { display: none; }
}

/* --- CẤU HÌNH KHUNG CHỨA (CONTAINER) --- */
/* =========================================
   CLOUD HERO SECTION (FIXED: VỊ TRÍ CŨ - STYLE MỚI)
   ========================================= */
/* =========================================
   CLOUD HERO SECTION (FULL WIDTH - GIÃN SÁT LỀ)
   ========================================= */

.cs-hero-section.cloud-mode {
    position: relative;
    width: 100%;
    min-height: 85vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
}

.cloud-container {
    position: relative;
    width: 100%;
    
    /* THAY ĐỔI: Mở rộng tối đa để chữ có thể chạm lề màn hình */
    max-width: 98%; 
    
    height: 650px; 
    margin: 0 auto;
}

/* --- 1. STYLE TỪ KHÓA (CHUNG) --- */
.cloud-tag {
    position: absolute;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700; 
    color: #C0C0C0;   
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%); 
    
    /* Chữ to vừa đủ đẹp */
    font-size: 3.2vw; 
    z-index: 2; 
}

.cloud-tag:hover {
    .cloud-tag:hover {
    color: #B91C1C; /* Đổi màu đỏ */
    z-index: 100;   /* Nổi lên trên cùng */
    
    /* CẤU HÌNH NHẢY LIÊN TỤC:
       - jumpLoop: tên animation
       - 0.5s: Tốc độ nhảy (càng nhỏ nhảy càng nhanh)
       - ease-in-out: Chuyển động mượt mà (nhanh dần rồi chậm dần)
       - infinite: Lặp lại VÔ TẬN (không dừng lại)
    */
    animation: jumpLoop 0.5s ease-in-out infinite;
}
}

/* --- 2. STYLE QUOTE ĐỎ (SÁT LỀ PHẢI) --- */
.cloud-quote {
    position: absolute;
    top: 25%; 
    
    /* Đẩy sát lề phải hơn (chỉ cách 2%) */
    right: 2%; 
    
    text-align: right; 
    z-index: 10;
    pointer-events: none; 
}

.cloud-quote p {
    font-family: 'Urbanist', sans-serif;
    font-style: italic;
    color: #B91C1C; 
    font-weight: 900; 
    font-size: 6.5vw;  /* Dùng vw để chữ luôn to đại bác */
    line-height: 0.85; 
    margin: 0;
    letter-spacing: -2px;
}

.q-line-1 { margin-right: 0.6em; }
.q-line-2 { margin-right: 0em; }
.q-line-3 { margin-right: 0.3em; }
.q-line-4 { margin-right: 0.9em; }


/* --- 3. TỌA ĐỘ MỚI (GIÃN SANG 2 BÊN) --- */

/* --- NHÓM TRÁI (Đẩy sát mép trái: left từ 5% -> 20%) --- */

/* Social Media: Thấp nhất, sát trái nhất */
.pos-social { 
    top: 70%; 
    left: 8%; /* Sát lề */
} 

/* Branding: Ở giữa, sát trái */
.pos-brand { 
    top: 45%; 
    left: 10%; /* Sát lề */
} 

/* 2D Designs: Cao, sát trái */
.pos-2d { 
    top: 20%; 
    left: 18%; 
} 

/* --- NHÓM GIỮA (Dàn đều) --- */

/* Packaging: Lệch trái chút */
.pos-pack { 
    top: 35%; 
    left: 30%; 
} 

/* UX/UI: Giữa màn hình */
.pos-ux { 
    top: 55%; 
    left: 35%; 
} 

/* Typography: Thấp, lệch trái */
.pos-typo { 
    top: 80%; 
    left: 25%; 
} 

/* Motion Graphic: Thấp nhất, chính giữa */
.pos-motion { 
    top: 90%; 
    left: 50%; 
    font-size: 2.5vw; /* To hơn chút */
}

/* --- NHÓM PHẢI (Gần Quote đỏ) --- */

/* Visual: Cao, gần quote */
.pos-visual { 
    top: 25%; 
    left: 55%; 
} 

/* Minimalism: Giữa, dưới quote */
.pos-mini { 
    top: 60%; 
    left: 60%; 
} 

/* Modern: Thấp, lệch phải (dưới đuôi chữ đỏ) */
.pos-modern { 
    top: 75%; 
    left: 75%; 
} 

/* Creative: Nằm lót dưới chữ đỏ */
.pos-creative { 
    top: 42%; 
    left: 65%; 
    color: #C0C0C0; 
    font-size: 2.2vw;
    z-index: 1; 
}



/* --- MOBILE RESPONSIVE --- */
@media screen and (max-width: 900px) {
    .cloud-container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 0;
        gap: 15px;
    }
    .cloud-tag {
        position: static;
        transform: none;
        font-size: 1.5rem;
    }
    .cloud-quote {
        position: static;
        margin-top: 40px;
        text-align: center;
    }
    .cloud-quote p {
        font-size: 3.5rem;
        margin-right: 0 !important;
    }
}


/* --- MOBILE RESPONSIVE --- */
@media screen and (max-width: 900px) {
    .cloud-container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 0;
        gap: 15px;
    }
    .cloud-tag {
        position: static;
        transform: none;
        font-size: 1.5rem;
    }
    .cloud-quote {
        position: static;
        margin-top: 40px;
        text-align: center;
    }
    .cloud-quote p {
        font-size: 3.5rem;
        margin-right: 0 !important;
    }
}

/* --- Style cho phần chứa ảnh đơn duy nhất --- */
.single-image-container {
    width: 100%;
    max-width: 1400px; /* Giới hạn chiều rộng để ảnh không bị vỡ trên màn hình quá to */
    margin: 0 auto;    /* Căn giữa container */
    padding: 0 20px;   /* Khoảng cách an toàn 2 bên mép màn hình */
    margin-bottom: 100px; /* Khoảng cách với phần nội dung bên dưới */
}

.full-intro-img {
    width: 100%;       /* Ảnh co giãn theo khung */
    height: auto;      /* Giữ tỉ lệ gốc của ảnh */
    display: block;    /* Xóa khoảng trắng thừa dưới chân ảnh */
    border-radius: 0px; /* Nếu muốn bo góc ảnh thì chỉnh số này (ví dụ: 20px) */
}

/* --- Style cho ảnh layer duy nhất --- */
.single-layer-image {
    width: 100%;
    padding-bottom: 100px; /* Khoảng cách với footer */
    background-color: #fff; /* Nền trắng nối liền với phần trên */
}

.image-wrapper {
    width: 100%;
    max-width: 1400px; /* Độ rộng tối đa để ảnh không bị quá khổ */
    margin: 0 auto;    /* Căn giữa */
    padding: 0 20px;   /* Khoảng cách lề màn hình mobile */
}

.main-layer-img {
    width: 100%;
    height: auto;
    display: block;
    /* Nếu bạn muốn ảnh bo tròn góc thì thêm border-radius ở đây */
    /* border-radius: 20px; */ 
    
    /* Nếu bạn muốn ảnh đổ bóng để tách biệt khỏi nền trắng */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

/* =========================================
   THÊM MENU VÀO HERO (HOME - ABOUT - WORKS)
   ========================================= */

/* 1. Định dạng cụm bên trái để Logo và Menu nằm ngang hàng */
.hero-left-group {
    display: flex;
    align-items: center;
    gap: 50px; /* Khoảng cách giữa Logo và chữ HOME */
}

/* 2. Định dạng hàng chữ Menu */
/* 1. Trạng thái mặc định của các link (Mờ đi một chút) */
/* =========================================
   FIX LỖI MENU (GIỮ NGUYÊN MÀU + HIỆU ỨNG ACTIVE)
   ========================================= */

/* 1. MENU TRANG CHỦ (Nền đỏ - Chữ trắng) */
/* =========================================
   MENU HEADER (FIX: ĐẬM LUÔN + GIÃN CÁCH RỘNG)
   ========================================= */

/* 1. CẤU HÌNH KHUNG BAO NGOÀI (Tăng khoảng cách ở đây) */
.hero-menu-links, 
.nav-links {
    display: flex;
    /* --- SỬA Ở ĐÂY: Tăng khoảng cách các chữ --- */
    gap: 40px !important; /* Cũ là 30px, giờ tăng gấp đôi cho thoáng */
    /* ------------------------------------------ */
}

/* 2. MENU TRANG CHỦ (Chữ Trắng) */
.hero-menu-links a {
    color: #ffffff !important; 
    text-decoration: none;
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
    
    /* MẶC ĐỊNH: Mờ và Mảnh hơn */
    opacity: 0.5;      
    font-weight: 600;  
}

/* KHI ĐANG Ở TRANG ĐÓ (ACTIVE) HOẶC DI CHUỘT VÀO */
.hero-menu-links a.active,
.hero-menu-links a:hover {
    opacity: 1 !important;        /* Hiện rõ 100% */
    font-weight: 800 !important;  /* Đậm luôn */
}


/* 3. MENU TRANG CON - ABOUT/WORK (Chữ Đỏ) */
.nav-links a {
    color: #A8322D !important; 
    text-decoration: none;
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
    
    /* MẶC ĐỊNH: Mờ và Mảnh hơn */
    opacity: 0.5;
    font-weight: 600;
}

/* KHI ĐANG Ở TRANG ĐÓ (ACTIVE) HOẶC DI CHUỘT VÀO */
.nav-links a.active,
.nav-links a:hover {
    opacity: 1 !important;        /* Hiện rõ 100% */
    font-weight: 800 !important;  /* Đậm luôn */
}
/* Ẩn menu này trên điện thoại để đỡ chật (Tùy chọn) */
@media (max-width: 768px) {
    .hero-menu-links {
        display: none;
    }
}


/* ... (Code cũ giữ nguyên) ... */

/* =========================================
   STYLE DANH SÁCH DỌC (WORK LIST - BILLIE STYLE)
   (Dán vào cuối file style.css)
   ========================================= */

/* 1. Phần giới thiệu đầu trang (Work we're proud of) */
.work-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px auto;
    padding: 0 20px;
}

.work-intro-title {
    font-size: 5rem; /* Chữ to */
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 24px;
    color: #000;
}

.work-intro-desc {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. Container danh sách dọc */
.project-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Khoảng cách giữa các dự án lớn */
    max-width: 1000px; /* Giới hạn chiều rộng cho đẹp */
    margin: 0 auto 150px auto;
    padding: 0 40px;
}

/* 3. Từng khối dự án */
.project-vertical-item {
    width: 100%;
    cursor: pointer;
}

/* Container ảnh: Ép về tỷ lệ chữ nhật ngang */
.vertical-img-container {
    width: 100%;
    aspect-ratio: 16/9; /* Tỷ lệ ảnh chuẩn */
    display: block;
    margin-bottom: 30px;
    /* Kế thừa hiệu ứng pixel/lưới từ class image-wrapper-raw cũ */
}

.vertical-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hiệu ứng zoom nhẹ khi di chuột vào khối */
.project-vertical-item:hover .vertical-img-container img {
    transform: scale(1.05);
}

/* 4. Dòng thông tin bên dưới (Title - Date - Arrow) */
.project-vertical-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1); /* Đường kẻ mờ màu đen */
}

/* Tên dự án */
.v-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    line-height: 1;
    color: #000;
}

/* Ngày tháng/Loại */
.v-cat {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888; /* Màu xám */
}

/* Nút mũi tên tròn */
.arrow-circle {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(0,0,0,0.2); /* Viền xám */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    color: #000;
}

/* Hover vào dự án thì mũi tên xoay và đổi màu */
.project-vertical-item:hover .arrow-circle {
    background: #000;
    color: #fff;
    border-color: #000;
    transform: rotate(-45deg);
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .work-intro-title { font-size: 3rem; }
    .project-vertical-list { padding: 0 20px; gap: 80px; }
    .v-title { font-size: 1.8rem; }
}

/* --- PHẦN TIÊU ĐỀ URBANIST (ĐỎ TOÀN BỘ) --- */
.work-intro {
    text-align: center;
    padding: 100px 0 80px 0;
    max-width: 100%;
}

.work-intro-title {
    font-family: 'Urbanist', sans-serif; /* Font mới */
    font-size: 5rem;      /* Kích thước lớn */
    font-weight: 900;     /* Độ đậm cao nhất của Urbanist (Bold/Black) */
    color: #A8322D;       /* Màu đỏ cho toàn bộ tiêu đề */
    line-height: 0.95;    /* Dòng xích lại gần nhau cho ngầu */
    letter-spacing: -0.02em; 
    text-transform: uppercase; /* In hoa toàn bộ tiêu đề */
    margin-bottom: 24px;
}

.work-intro-desc {
    font-family: 'Urbanist', sans-serif; /* Font mới */
    font-size: 0.85rem;
    font-weight: 600;     /* Đậm vừa phải */
    color: #A8322D;       /* Màu đỏ cho cả đoạn mô tả */
    text-transform: uppercase;
    line-height: 1.6;
    letter-spacing: 0.05em; /* Khoảng cách chữ thoáng hơn */
    max-width: 500px;
    margin: 0 auto;
    opacity: 0.9;         /* Làm mờ nhẹ 1 chút để phân cấp với tiêu đề */
}

/* Responsive cho màn hình điện thoại */
@media (max-width: 768px) {
    .work-intro-title {
        font-size: 3rem; /* Nhỏ lại trên mobile */
    }
    .work-intro-desc {
        font-size: 0.75rem;
        max-width: 90%;
    }
}

/* Style cho tên dự án trong list dọc */
.v-title {
    font-family: 'Urbanist', sans-serif; /* Dùng font mới */
    font-size: 2.5rem;    /* Kích thước lớn */
    font-weight: 700;     /* In đậm */
    color: #ffffff;       /* Mặc định màu trắng */
    text-transform: uppercase;
    margin-bottom: 5px;
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu mượt */
}

/* Khi di chuột vào dự án thì tên chuyển màu ĐỎ */
.project-vertical-item:hover .v-title {
    color: #A8322D; 
}

/* Mũi tên tròn */
.arrow-circle {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

/* Khi di chuột vào thì mũi tên đỏ lên */
.project-vertical-item:hover .arrow-circle {
    background-color: #A8322D;
    border-color: #A8322D;
    color: #fff;
    transform: rotate(-45deg); /* Xoay mũi tên chéo lên */
}
/* =========================================
   STYLE FOOTER MỚI (GIỐNG ẢNH MẪU 100%)
   ========================================= */

/* =========================================
   FOOTER FIX CỨNG (GIỐNG CODE CŨ CỦA BẠN)
   ========================================= */

/* 1. Thiết lập chiều cao cố định để không bị lệch */
.red-footer {
    position: fixed; /* Hoặc sticky tùy code gốc, nhưng fixed chuẩn hơn cho hiệu ứng reveal */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    
    background-color: #9E332E;
    color: #ffffff;
    
    /* QUAN TRỌNG: Cố định chiều cao giống code cũ của bạn */
    height: 480px !important; 
    
    padding: 0 60px; /* Chỉ padding ngang, dọc để flex lo */
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa nội dung theo chiều dọc */
    box-sizing: border-box;
}

/* 2. Ép lớp nội dung trắng bên trên chừa ra đúng khoảng cách đó */
.content-layer, 
.cs-content-layer {
    position: relative;
    z-index: 10;
    background-color: #ffffff;
    width: 100%;
    
    /* QUAN TRỌNG: Số này PHẢI BẰNG height của footer (480px) */
    margin-bottom: 480px !important; 
    
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}


/* --- CSS GIAO DIỆN (ĐẸP NHƯ ẢNH) --- */

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Gióng đáy */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 60px 0; /* Padding nội bộ */
}

/* Cột Trái */
.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; 
}

.footer-cta {
    font-family: 'Urbanist', sans-serif;
    font-size: 7rem; 
    font-weight: 800;
    line-height: 0.9;
    margin: 0;
    white-space: nowrap;
}

.location-text {
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
}

/* Cột Phải */
.footer-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    height: 100%;
}

.footer-icon { margin-bottom: 10px; }
.footer-icon svg { transform: rotate(-15deg); }

.contact-group p {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.1rem;
    margin: 4px 0;
    font-weight: 500;
}
.contact-header { font-weight: 800 !important; font-size: 1.2rem !important; margin-bottom: 5px !important; }

.footer-links-row {
    margin-top: 15px;
    margin-bottom: 30px;
    display: flex;
    gap: 25px;
}
.footer-links-row a {
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-copyright {
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .red-footer {
        position: relative; /* Mobile thì bỏ hiệu ứng dính */
        height: auto !important; /* Mobile cho cao tự do */
        padding: 60px 20px;
    }
    
    .content-layer, .cs-content-layer {
        margin-bottom: 0 !important; /* Mobile không cần chừa margin */
    }

    .footer-container { flex-direction: column; align-items: flex-start; gap: 40px; padding: 0; }
    .footer-cta { font-size: 4rem; white-space: normal; }
    .footer-right { align-items: flex-start; text-align: left; width: 100%; }
    .footer-icon { display: none; }
}

/* =========================================
   ABOUT PAGE: SPLIT LAYOUT (PHIÊN BẢN NỀN TRẮNG)
   ========================================= */

/* 1. Thiết lập nền trắng */
.about-split-section {
    width: 100vw; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background-color: #ffffff; /* NỀN TRẮNG */
    color: #111111;            /* CHỮ ĐEN */
    overflow: hidden;
}

.about-split-container {
    display: flex;
    min-height: 100vh;
}

/* --- CỘT TRÁI (CHỮ) --- */
.about-left-text {
    width: 50%;
    padding: 10px 60px 0 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.about-headline {
    font-family: 'Urbanist', sans-serif;
    font-size: 5rem;
    font-weight: 800; /* Đậm hơn chút để nổi trên nền trắng */
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 40px;
    color: #000000; /* Chữ đen tuyệt đối */
}

.about-bio {
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem; /* Tăng nhẹ cỡ chữ cho dễ đọc */
    line-height: 1.6;
    color: #333333; /* Màu xám đậm */
    text-transform: uppercase;
    max-width: 550px;
    margin-bottom: 80px;
    font-weight: 600;
}

/* Khu vực danh sách */
.about-lists-row {
    display: flex;
    gap: 100px;
}

.list-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.list-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    color: #999; /* Tiêu đề màu xám nhạt */
    margin: 0;
    letter-spacing: 0.5px;
}

.list-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-col ul li {
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem;
    color: #000; /* Mục danh sách màu đen */
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- CỘT PHẢI (ẢNH) --- */
.about-right-image {
    width: 50%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.about-right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    .about-split-container {
        flex-direction: column-reverse; /* Ảnh trên - Chữ dưới */
    }
    
    .about-left-text, 
    .about-right-image {
        width: 100%;
    }

    .about-right-image {
        height: 50vh;
    }

    .about-headline {
        font-size: 3rem;
    }
    
    .about-left-text {
        padding: 60px 20px;
    }

    .about-lists-row {
        gap: 40px;
        flex-wrap: wrap;
    }
}

/* =========================================
   FIX LỖI ANIMATION NHẢY (FINAL)
   ========================================= */

/* 1. Định nghĩa lại cú nhảy (Bắt buộc phải giữ translate -50% -50% để không bị lệch tâm) */
@keyframes jumpFixed {
    0% { 
        /* Vị trí thấp nhất (Gốc) */
        transform: translate(-50%, -50%) scale(1.1); 
    }
    50% { 
        /* Vị trí cao nhất (Nhảy lên) */
        /* Chỉ thay đổi số -50% sau thành -70% để nhảy lên theo trục dọc */
        transform: translate(-50%, -70%) scale(1.1); 
    }
    100% { 
        /* Rơi xuống lại */
        transform: translate(-50%, -50%) scale(1.1); 
    }
}

/* 2. Áp dụng vào Hover */
.cloud-tag:hover {
    color: #B91C1C !important; /* Dùng !important để chắc chắn màu đỏ hiện ra */
    z-index: 100;
    
    /* Chạy animation tên là jumpFixed, 0.6s một nhịp, lặp vô tận */
    animation: jumpFixed 0.6s ease-in-out infinite;
    
    /* Giúp chuyển động mượt hơn trên trình duyệt */
    will-change: transform; 
}