/* Reset CSS cơ bản */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    color-scheme: light;
}

/* custom html */
hr {
    border: none;
    /* Xóa bỏ viền 3D xấu xí mặc định */
    border-top: 1px solid #e0e0e0;
    /* Tạo một vạch mỏng màu xám nhạt */
    margin: 40px 0;
    /* Đẩy khoảng cách trên/dưới ra cho thoáng khí */
}

body {
    font-family: "IBM Plex Mono", monospace;
    /* Đổi toàn bộ chữ sang dạng Monospace */
    background-color: #fdfdfd;
    color: #111;
    line-height: 1.5;
    padding: 0.5rem;
    font-size: 24px;
}

/* ================= CẬP NHẬT HEADER ================= */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    border-bottom: 1px solid #111;

    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fdfdfd;

    padding: 1rem 0;
    /* Khoảng cách trên dưới của Header */
    transition: all 0.3s ease;
}

/* Trạng thái thu nhỏ Header khi cuộn */
.site-header.scrolled {
    padding: 0.5rem 0;
}

.header-brand {
    font-size: 2rem;
    font-weight: bold;
    margin: 0; 
}

/* Cụm chức năng (Icon + Gmail) bên góc phải */
.header-right {
    display: flex;
    align-items: center;
    gap: 4vw;
    /* Khoảng cách giữa icon và chữ Gmail */
}

/* ================= Định dạng link chữ Gmail ================= */
.gmail-link {
    color: #111;
    text-decoration: none;
    /* Bỏ gạch chân mặc định */
    font-size: 14px;
    /* Giữ nguyên size chữ cũ của bạn */
    position: relative;
    /* Làm điểm neo cho gạch chân ảo */
    transition: opacity 0.3s ease;
}

/* Tạo đường gạch chân ảo cho Gmail */
.gmail-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;

    /* MẸO UX: Vì chữ Gmail nằm bên phải, ta cho nét gạch neo ở bên phải (right: 0) để nó trượt ngược vào trong */
    right: 0;

    background-color: #111;
    transition: width 0.3s ease-out;
}

/* Khi hover: Kéo dài gạch chân và làm mờ chữ */
.gmail-link:hover::after {
    width: 100%;
}

.gmail-link:hover {
    opacity: 0.7;
}

/* Định dạng nút Icon */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #111;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
    padding: 0;
}

.icon-btn:hover {
    opacity: 0.6;
}

/* ================= GIAO DIỆN BOARD (WATERFALL) ================= */
.project-board {
    column-count: 3;
    /* Chia làm 3 cột (Bạn có thể đổi thành 2 hoặc 4) */
    column-gap: 1.5rem;
    margin-top: 3rem;
    width: 100%;
}

.board-card {
    break-inside: avoid;
    /* Lệnh quan trọng: Ngăn ảnh bị cắt làm đôi giữa 2 cột */
    margin-bottom: 1.5rem;
    border-radius: 4px;
    /* Bo góc mềm nhẹ */
    overflow: hidden;
    /* Cực kỳ quan trọng: Giúp giấu phần viền ảnh bị tràn ra khi làm hiệu ứng chuyển động */
    cursor: pointer;
    position: relative;
    background-color: #eee;
    /* Màu nền chờ trong lúc load ảnh */
}

.board-card img {
    width: 100%;
    display: block;
    /* MẸO PARALLAX: Phóng to ảnh lên 10% (scale 1.1) để khi ảnh trượt qua lại, viền đen phía sau không bị lộ ra */
    transform: scale(1.1);
    will-change: transform;
}

/* ================= BOARD VIEW HOVER (DESKTOP) ================= */
.board-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);
    /* Lớp phủ màu đen trong suốt 40% */
    backdrop-filter: blur(6px);
    /* Làm mờ hình ảnh phía sau */
    -webkit-backdrop-filter: blur(6px);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    /* Ẩn đi mặc định */
    z-index: 5;
    /* Nằm đè lên tấm ảnh */
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Cho phép click xuyên qua lớp này để mở dự án */
}

.board-title {
    color: #fff;
    /* Chữ màu trắng */
    font-size: 1.2rem;
    text-align: center;
    padding: 1.5rem;

    /* Hiệu ứng chữ trượt từ dưới lên */
    transform: translateY(15px);
    transition: transform 0.3s ease-out;
}

/* HIỆU ỨNG KÍCH HOẠT (Chỉ chạy trên thiết bị có chuột - Desktop) */
@media (hover: hover) {
    .board-card:hover .board-overlay {
        opacity: 1;
        /* Hiện lớp kính mờ */
    }

    .board-card:hover .board-title {
        transform: translateY(0);
        /* Trượt chữ lên đúng vị trí trung tâm */
    }
}

/* Bù lại khoảng trống (margin-bottom 4rem cũ của header) cho danh sách */
.project-list {
    border-top: 1px solid #111;
    list-style-type: none;
    margin-top: 3rem;
    /* Đẩy danh sách cách xa header ra một chút */
}

/* ... Giữ nguyên các CSS cột (header-brand, header-item) bên dưới ... */

/* ================= DANH SÁCH LIST ================= */
.project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    /* Giúp các chữ ngang hàng */
    padding: 0.4rem 0;
    /* ÉP CHIỀU CAO: Chỉ để padding nhỏ cho dòng ôm sát chữ */
    border-bottom: 1px solid #111;
    cursor: pointer;
    position: relative;
    /* MỚI: Để làm điểm gốc cho tính toán Z-index */
}

.project-year {
    width: 60px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: lighter;
}

.project-name {
    flex-grow: 1;
    /* Cho phép cột này phình to ra để ăn hết phần không gian trống ở giữa */
    font-weight: lighter;

    /* Xử lý cắt chữ nếu màn hình hẹp */
    white-space: normal;
    word-wrap: break-word;
    text-wrap: balance;
    line-height: 1.4;
    max-width: 1200px;
}

/* 4. Cố định vừa phải cho cột thể loại */
.project-category {
    width: 15%;
    /* Thu lại một chút để chừa đất diễn cho Title */
    flex-shrink: 0;
    /* Không cho bóp méo */
    text-align: right;
    font-size: 18px;
    font-weight: lighter;

    white-space: normal;
    word-wrap: break-word;
    text-wrap: balance;

    line-height: 1.4;    
    max-width: 320px;
}

/* Cột khoảng trống giữa - Dùng làm điểm neo (Relative) */
.project-thumbnail {
    width: 40%;
    position: relative;
    /* BẮT BUỘC: Làm lồng kính để giữ ảnh không bay ra ngoài lề web */
    display: flex;
    justify-content: center;
}

/* Ảnh nhổ ra khỏi khung (Absolute) để nổi đè lên các dòng khác */
.project-thumbnail img {
    position: absolute;
    /* Thoát khỏi khung, không chiếm diện tích của dòng nữa */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Canh đúng tâm ảnh vào giữa khoảng trống 40% */

    height: 180px;
    /* BẠN CÓ THỂ CHỈNH THOẢI MÁI: Ảo to đến mấy cũng không làm giãn dòng */
    width: auto;
    object-fit: cover;

    z-index: 10;
    /* Đè lên nội dung của các dòng khác */
    pointer-events: none;
    /* CỰC KỲ QUAN TRỌNG: Xuyên chuột qua ảnh để không bị mất hover */

    opacity: 0;
    visibility: hidden;
/* === THÊM MỚI TỪ ĐÂY === */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    /* Đổ bóng nhẹ nhàng xuống nền */
    border-radius: 2px;
    /* Bo góc cực nhẹ để viền ảnh mềm mại hơn */

    /* Thêm transform vào transition để ảnh trượt mượt như lò xo */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.15s ease-out;
}

/* Khi di chuột vào dòng: Tăng thứ tự lớp (z-index) để ảnh không bị dòng dưới che mất */
.project-row[data-super-hover-active] {
    z-index: 50;
}

/* Hiện ảnh */
.project-row[data-super-hover-active] .project-thumbnail img {
    opacity: 1;
    visibility: visible;
}

/* Khi có class .active (đang hover) */
.hover-preview.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Lớp phủ (Overlay) */
/* 1. LỚP NỀN (Vùng 2) - Sẽ mờ ảo hiện ra */
.overlay {
    /* Đổi display: none thành cụm 3 lệnh này: */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Cực kỳ quan trọng: Ngăn không cho click nhầm khi đang ẩn */

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(177, 177, 177, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    overflow-y: auto;
    padding: 0;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') 12 12, pointer;

    /* Thiết lập tốc độ mờ dần của lớp kính */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Khi mở overlay: Lớp kính hiện lên */
.overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Mở khóa click */
}

/* 2. NỘI DUNG (Vùng 1 + 1.5) - Sẽ trượt nhẹ từ dưới lên */
.overlay-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 150px;
    cursor: auto;
    text-wrap: pretty;
    background-color: rgba(255, 255, 255);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-radius: 2px;

    /* TRẠNG THÁI CHỜ KHI ẨN: Nằm tuột xuống dưới 30px và hơi mờ */
    transform: translateY(30px);
    opacity: 0;

    /* Hiệu ứng trượt có độ nảy cực êm (Cubic-bezier) */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    transition-delay: 0.05s;
    /* Chờ lớp kính mờ hiện ra 1 nhịp rồi nội dung mới trượt lên */
}

/* Khi mở overlay: Nội dung trượt về vị trí cũ và nét căng */
.overlay.active .overlay-content {
    transform: translateY(0);
    opacity: 1;
}

.overlay-header {
    text-align: right;
    margin-bottom: 2rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
}
.close-btn:hover {
    text-decoration: underline;
}

.overlay-content img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    margin-bottom: 2.5rem;  /* Khoảng thở sau mỗi tấm ảnh */
    border-radius: 4px; /* Bo góc nhẹ cho đồng bộ giao diện */
    display: block;
}

.overlay-content .image-row {
    display: flex;    /* Bật chế độ dàn ngang */
    gap: 1rem;    /* Tạo khoảng trống 1rem ở giữa 3 tấm ảnh */
    margin-bottom: 2.5rem;    /* Đẩy khối nội dung bên dưới ra xa */
}

.overlay-content .image-row img {
    flex: 1;    /* Chia đều không gian, 3 ảnh sẽ tự chia 3, 2 ảnh tự chia 2 */
    margin: 0;    /* Tắt cái margin-bottom mặc định của ảnh đơn đi */
    object-fit: cover;    /* Cực kỳ quan trọng: Lỡ 3 ảnh có chiều cao khác nhau thì nó tự động cắt cúp cho bằng nhau chứ không bị méo */
}

.overlay-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Ép tỷ lệ 16:9 chống méo */
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    border: none;
    /* Xóa viền mặc định xấu xí */
    border-radius: 4px;
    /* Bo góc đồng bộ với ảnh */
    display: block;
}

.overlay-content p {
    margin-bottom: 1.5rem; /* Đẩy nội dung bên dưới xa ra 1 đoạn */
    line-height: 1.6;
}

.overlay-content .caption {
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.overlay-content .underline {
    text-decoration: underline;    
    text-underline-offset: 4px;
    /* Chỉnh độ nét/dày của đường gạch chân (ví dụ 1px cho nét thanh mảnh) */
    text-decoration-thickness: 1px;
}

.overlay-content h2 {
    margin-top: 3rem;   /* Cách xa phần phía trên */
    margin-bottom: 1.5rem;  /* Cách xa đoạn văn phía dưới */
    font-size: 2.2rem;
}

.overlay-content h3 {
    margin-top: 2.5rem; /* Đẩy đoạn văn cũ ra xa */
    margin-bottom: 1rem;    /* Tạo khoảng trống nhẹ với nội dung của chính nó */
    font-size: 1.5rem;
}

/* Gộp chung H3, H4, H5, H6 vào một quy tắc khoảng trống chuẩn mực */
.overlay-content h3,
.overlay-content h4,
.overlay-content h5,
.overlay-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* ================= OVERLAY PROJECT DETAIL ================= */
.detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

.detail-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    text-wrap: balance;
}

.detail-meta {
    font-size: 0.9rem;
    opacity: 0.6;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #111;
}

.detail-hero {
    width: 100%;
    height: auto;
    margin-bottom: 3rem;
}

.detail-section {
    margin-bottom: 3rem;
}

.detail-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.detail-section p {
    font-size: 1rem;
    opacity: 0.8;
}

/* Style cho link Tên Của Bạn */
.header-brand a {
    color: #111;
    text-decoration: none;
    /* Bỏ gạch chân thô cứng mặc định */
    position: relative;
    /* Làm điểm neo cho đường gạch chân ảo */
    transition: opacity 0.3s ease;
    /* Tăng thời gian mờ chữ lên một chút cho êm */
}

/* Tạo đường gạch chân ảo (mượt mà) */
.header-brand a::after {
    content: '';
    position: absolute;
    width: 0;
    /* Ban đầu nét gạch có độ dài bằng 0 (ẩn đi) */
    height: 1px;
    /* Độ dày của đường gạch */
    bottom: -4px;
    /* Cách chữ 4px xuống dưới */
    left: 0;
    /* Chạy từ trái sang */
    background-color: #111;
    /* Màu đường gạch */
    transition: width 0.3s ease-out;
    /* Phép màu nằm ở đây: Hiệu ứng trượt dài ra */
}

/* Khi rê chuột vào: Kéo dài nét gạch ảo ra 100% và làm mờ chữ nhẹ */
.header-brand a:hover::after {
    width: 100%;
}

.header-brand a:hover {
    opacity: 0.7;
    /* Chữ chỉ mờ đi một chút xíu thôi cho thanh lịch */
}
/* Custom UI "Khung" Video Playback */
.detail-section iframe,
.detail-section video {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Ép video luôn ở tỷ lệ chuẩn điện ảnh, không bị méo */
    border-radius: 4px;
    /* Bo góc cực nhẹ cho hợp với thiết kế tổng thể */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Đổ bóng nhẹ tách biệt khỏi nền */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Viền mờ bao quanh */
    background-color: #f0f0f0;
    /* Nền xám nhạt lúc chờ load */
    display: block;
}

.mobile-close-btn {
    background: none;
    border: none;
    color: #e63946;
    /* Màu đỏ nhã nhặn, không bị chói */
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: none;
}

.mobile-close-btn:hover {
    opacity: 0.6;
}

/* Nút trên cùng: Ghim dính vào góc phải màn hình */
.fixed-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    font-size: 1rem;
    font-weight: bold;
    z-index: 1010;
    /* Đảm bảo luôn nằm trên cùng mọi nội dung */
}

/* Khu vực nút dưới cùng: Nằm sau khi hết nội dung */
.bottom-close-container {
    text-align: center;
    margin-top: 2rem;
    padding-bottom: 1rem;
}

.bottom-close {
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Thêm viền đỏ cho nút dưới để dễ bấm trên điện thoại */
    padding: 0.4rem 1rem;
    border-radius: 2px;
}

/* ================= MOBILE & tablet RESPONSIVE (Cho màn hình dưới 1024px) ================= */
/* Phải nằm dưới cùng file CSS */
@media (max-width: 1024px) {

    /* --- ÉP NÚT ĐÓNG HIỆN LÊN TRÊN ĐIỆN THOẠI --- */
    .mobile-close-btn {
        display: inline-block !important;
        /* Dùng !important để ghi đè lệnh ẩn ở trên */
    }

    .fixed-close {
        top: 1rem;
        right: 1rem;
    }

    /* --- 1. SỬA LỖI HEADER --- */
    .header-brand {
        font-size: 1.2rem;
        white-space: nowrap;
    }

    .header-right {
        gap: 1.5rem;
    }

    .gmail-link {
        font-size: 13px;
    }

/* --- 2. SỬA LỖI LIST VIEW --- */
.project-row {
    flex-wrap: wrap;
    padding: 1.2rem 0;
    gap: 0.5rem 0;
}

.project-thumbnail {
    display: none;
}

/* Ép Tên dự án lên DÒNG 1 */
.project-name {
    order: 1;
    /* Thay đổi thứ tự: Lên số 1 */
    width: 100%;
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}

/* Ép Năm xuống DÒNG 2 (Nửa bên trái) */
.project-year {
    order: 2;
    /* Nằm sau Tên dự án */
    width: 50%;
    font-size: 0.9rem;
    opacity: 0.6;
    text-align: left;
    /* Canh sát lề trái */
}

/* Ép Danh mục xuống DÒNG 2 (Nửa bên phải) */
.project-category {
    order: 3;
    /* Nằm cuối cùng */
    width: 50%;
    font-size: 0.9rem;
    opacity: 0.6;
    text-align: right;
    /* Canh sát lề phải */
}

    /* --- 3. SỬA LỖI BOARD VIEW --- */
    .project-board {
        column-count: 1;
        margin-top: 1.5rem;
    }

    .board-card {
        margin-bottom: 1.2rem;
    }

    /* --- 4. TỐI ƯU OVERLAY DETAIL --- */
    .overlay {
        padding: 1rem;
    }
    
        .overlay-content {
            /* - Top: 4rem (Đẩy nội dung xích xuống dưới để chừa chỗ cho nút [x] góc phải trên không bị đè vào chữ)
               - Trái/Phải: 1rem (Giữ khoảng cách mỏng nhẹ với 2 cạnh viền điện thoại)
               - Bottom: 1rem (Khoảng thở nhẹ trước khi gặp nút [x] dưới cùng)
            */
            padding: 4rem 1rem 1rem 1rem;
        }

        .overlay-content .image-row {
            flex-direction: column;
        }

    .detail-title {
        font-size: 1.5rem;
    }

    .detail-section h3 {
        font-size: 1.1rem;
    }
}