/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 08 2025 | 08:00:33 */
/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 

/* Đảm bảo Hero Section đủ cao và là context định vị */
.vt-hero-section { 
    min-height: 100vh; 
    position: relative; 
    overflow: hidden; 
}
.vt-hero-container {
    position: relative;
    height: 100vh; /* Quan trọng để Hero container mở rộng */
}

/* === 1. LOGO DESKTOP === */
.vt-logo-area {
    position: absolute;
    top: 50px;           
    left: 50px;
    z-index: 200;        
}
.vt-logo-img {
    max-width: 400px;
    height: auto;
}

/* === 2. MENU DESKTOP (Nằm ngang góc phải) === */
.vt-nav-menu {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 200;
}
.vt-nav-ul {
    list-style: none;
    display: flex;         /* Menu ngang */
    gap: 30px;
    padding: 0;
    margin: 0;
    align-items: center;
}
.vt-nav-item {
    position: relative;
}
.vt-nav-item a {
    color: var(--fg);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
}
.vt-nav-item a#active {
    color: var(--accent); /* Màu vàng cho mục active */
}
/* Circle chỉ hiện ở mục active trên Desktop */
.vt-active-circle {
    display: block;
    position: absolute;
    top: -50px; 
    right: -10px; 
    width: 60px;
    height: auto;
    z-index: 10;
}

/* === 3. NHÂN VẬT DESKTOP === */
.vt-character-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    z-index: 50; 
}
.vt-character-img {
    width: 100%;
    height: auto;
    display: block;
}