/* ==========================================================================
   1. KHAI BÁO FONT CHỮ COOLVETICA (CHÍNH XÁC THEO THƯ MỤC TRÊN MÁY BẠN)
   ========================================================================== */
@font-face {
    font-family: 'Coolvetica-Rg';
    src: url('font/Coolvetica Rg.otf') format('opentype');
}

@font-face {
    font-family: 'Coolvetica-Cram';
    src: url('font/Coolvetica Rg Cram.otf') format('opentype');
}

@font-face {
    font-family: 'Coolvetica-It';
    src: url('font/Coolvetica Rg It.otf') format('opentype');
}

@font-face {
    font-family: 'Coolvetica-Cond';
    src: url('font/Coolvetica Rg Cond.otf') format('opentype');
}

@font-face {
    font-family: 'Coolvetica-Hv';
    src: url('font/Coolvetica Hv Comp.otf') format('opentype');
}

/* ==========================================================================
   2. QUẢN LÝ BẢNG MÀU THƯƠNG HIỆU (BIẾN CSS)
   ========================================================================== */
:root {
    --bg-gray-scarf: #A2B8FF;   /* Màu xám tro chủ đạo toàn nền */
    --text-dark: #1A2026;      /* Màu đen cấu trúc chính */
    --accent-red: #D35252;     /* Màu đỏ sừng Skyeto */
    --star-gold: #F4D068;      /* Màu vàng ngôi sao */
}

/* ==========================================================================
   3. THIẾT LẬP TOÀN TRANG (RESET & BODY)
   ========================================================================== */
body {
    background-color: var(--bg-gray-scarf);
    color: var(--text-dark);
    font-family: 'Coolvetica-Rg', sans-serif; /* Mặc định sử dụng bản Regular */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    justify-content: space-between;
    -webkit-font-smoothing: antialiased;
    user-select: none; /* Chống bôi đen chọn chữ lung tung trên web */
    box-sizing: border-box;
}

/* Khung chứa trung tâm giới hạn chiều rộng để layout không bị vỡ */
.main-container {
    max-width: 1050px; /* Đã nới rộng để hiển thị đẹp hơn trên PC */
    width: 100%;
    padding: 40px 24px;
    margin: auto;
    box-sizing: border-box;
    transition: max-width 0.3s ease;
}

/* ==========================================================================
   4. HIỆU ỨNG TIÊU ĐỀ GIẬT LỚP & KHỐI ĐẢO MÀU LỆCH (INVERT)
   ========================================================================== */
.header-wrap {
    position: relative;
    padding: 20px 0;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Chữ nền to in hoa sát nhau */
.title-bg {
    font-family: 'Coolvetica-Hv', sans-serif; 
    font-size: clamp(2.5rem, 8vw, 3.5rem); /* Tự động co giãn cỡ chữ theo màn hình không lo vỡ hàng */
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1;
    text-align: center;
}

/* Khối chữ nhật trắng đè lên trên và cố tình làm lệch khối */
.title-fg {
    position: absolute;
    top: 50%;
    left: 55%; /* Tăng nhẹ sang phải để lệch một cách cố ý */
    transform: translate(-50%, -20%); 
    background-color: #FFFFFF;
    color: #FFFFFF; /* Để màu chữ trắng kết hợp blend-mode đảo màu */
    font-family: 'Coolvetica-Cram', sans-serif; 
    font-size: clamp(1.2rem, 4vw, 1.8rem); /* Co giãn linh hoạt */
    padding: 4px 16px;
    text-transform: lowercase;
    white-space: nowrap;
    
    /* Kỹ thuật tương tác layer đảo màu giống hệt Ibis Paint X */
    mix-blend-mode: difference; 
    pointer-events: none;
    box-shadow: 3px 3px 0px var(--text-dark);
}

/* Dòng chữ thông báo nhỏ phía dưới tiêu đề */
.status-message {
    font-family: 'Coolvetica-Cond', sans-serif; 
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 45px;
    text-align: center;
}

/* ==========================================================================
   5. BỐ CỤC NỘI DUNG CHÍNH (XỬ LÝ ĐA GIAO DIỆN PC & MOBILE)
   ========================================================================== */
.content-layout {
    display: flex;
    flex-direction: row; /* Mặc định xếp hàng ngang trên PC */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 40px; 
}

/* THANH SỌC DỌC MÀU ĐEN ÔM LẤY DANH SÁCH LINKS BÊN TRÁI */
.links-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 8px solid var(--text-dark); /* Dải sọc đứng đen dày dặn như bản vẽ */
    padding-left: 15px; 
    text-align: left;
    flex: 1; /* Tự động co dãn chiếm không gian hợp lý */
}

/* THIẾT KẾ NÚT LINKS TEXT-FOCUS NHỎ GỌN */
.nav-button {
    text-decoration: none;
    color: var(--text-dark);
    font-family: 'Coolvetica-Rg', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, padding 0.2s ease-in-out;
    display: block;
    width: fit-content;
}

/* HIỆU ỨNG HOVER: LÀM NGHIÊNG CHỮ BẰNG TOÁN HỌC CSS ĐỂ TRÁNH GIẬT KHUNG */
.nav-button:hover {
    color: var(--accent-red);
    padding-left: 8px; /* Chữ dịch nhẹ sang phải mượt mà */
    transform: skewX(-12deg); /* Làm nghiêng chữ giả lập bản Italic cực kỳ an toàn */
}

/* Trạng thái BÌNH THƯỜNG của Mascot trên PC (luôn to 190px để cân đối giao diện mới) */
#skyeto-mascot {
    width: 190px; 
    height: auto;
    cursor: pointer;
    display: block;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.15));
    transition: transform 0.2s ease, width 0.3s ease; /* Hiệu ứng co giãn mượt mà cả khi rê vào lẫn bỏ ra */
}

/* Hiệu ứng nẩy nhẹ của Skyeto Mascot khi Hover */
#skyeto-mascot:hover {
    transform: scale(1.08) rotate(-3deg); /* Nghiêng nhẹ tinh nghịch khi chỉ chuột vào */
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (VÁ LỖI CHO ĐIỆN THOẠI)
   ========================================================================== */
@media (max-width: 580px) {
    .content-layout {
        flex-direction: column-reverse; /* Đẩy Skyeto lên trên, cụm thông tin xuống dưới trên Mobile */
        gap: 40px;
    }
    
    .links-section {
        width: 100%;
        box-sizing: border-box;
    }

    /* Thêm dòng này để fix size nhỏ lại trên điện thoại */
    #skyeto-mascot {
        width: 145px; 
    }
}

/* ==========================================================================
   7. FOOTER SẠCH SẼ TỐI GIẢN
   ========================================================================== */
footer {
    font-family: 'Coolvetica-Cond', sans-serif;
    padding: 35px 0;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    opacity: 0.5;
    text-align: center;
    width: 100%;
}