/* =========================================
   1. SETUP & VARIABLES
   ========================================= */
@font-face {
    font-family: 'Valorant'; /* Đặt tên gì cũng được, ngắn gọn thôi */
    src: url('Valorant Font.ttf'); /* Tên file chính xác bạn vừa up lên */
}

:root {
    /* Colors */
    --bar-color: rgba(255, 255, 255, 0.5);
    --bar-hover: #000;
    --bar-active: #fff;
    --content-bg: rgba(255, 255, 255, 1);
    --tab-bg: #f4f4f4;
    --drawer-bg: #fff;
    
    /* Layout Dimensions */
    --sidebar-width: 350px;
}

/* =========================================
   2. RESET & BASE STYLES
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Share Tech Mono', monospace;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    
    background-color: #000;
    background-image: url('background.jpg'); 
    background-size: cover;
    background-position: right;
    filter: grayscale(100%);
    display: flex;
    justify-content: flex-end; /* Căn giữa toàn bộ website */
    padding-right: 125px;
}



/* GLOBAL SCROLLBAR STYLE (Dùng chung cho cả web) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #000; border: 1px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #555; }


/* =========================================
   3. LAYOUT STRUCTURE (Cấu trúc chính)
   ========================================= */

/* --- KHUNG BAO CONTENT (MAIN WRAPPER) --- */
.main-wrapper {
    width: 50%;
    height: 100%;
    position: relative; 
    overflow: visible; 
    z-index: 10;
}

.scroll-container {
    width: 100%;
    height: 100%;       
    overflow-y: auto;   /* Scroll dọc */
    overflow-x: hidden; 
    position: relative;
    padding-right: 35px;
}

.content-panel {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 20;
    margin-top: -75px; /* Kéo lên đè vào khoảng trống nếu cần */
}


/* =========================================
   4. SIDEBAR & NAVIGATION (Bên phải)
   ========================================= */
.sidebar-panel {
    width: var(--sidebar-width);
    height: 100%;
    padding: 40px 20px 0 0; 
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    z-index: 50;
    position: relative;
    pointer-events: none; /* Click xuyên qua vùng trống */
}
.sidebar-panel * { pointer-events: auto; } /* Bật lại click cho nội dung con */

.brand {
    font-size: 50px; color: #fff; text-transform: uppercase; letter-spacing: 5px;
    margin-bottom: 20px; text-align: right; width: 100%; font-family: 'Courier New', monospace;
}

.tech-interface-container {
    display: flex; gap: 15px; width: 100%; justify-content: flex-end;
}

.vertical-label {
    writing-mode: vertical-rl; transform: rotate(180deg); 
    color: #ccc; font-size: 12px; letter-spacing: 2px; 
    border-left: 1px solid rgba(255,255,255,0.5); 
    padding-right: 0px; order: 2; min-height: 150px; 
}

.bars-container {
    /* Đổi từ column sang row để xếp các thanh nằm cạnh nhau */
    display: flex; 
    flex-direction: row; 
    
    /* Thiết lập chiều cao cố định cho các thanh dọc (Tùy chỉnh độ cao ở đây) */
    height: 150px; 
    width: auto; /* Chiều rộng tự động co giãn */
    
    gap: 10px; /* Khoảng cách giữa các thanh */
    align-items: flex-end; /* Căn đáy (để các thanh mọc từ dưới lên) */
    padding-top: 0;
    margin-right: 20px; /* Cách cái chữ NAV_SYSTEM ra một chút */
}
.nav-link {
    text-decoration: none; 
    display: block;        
    
    /* Đảo ngược: Chiều rộng nhỏ, chiều cao full */
    width: 20px; 
    height: 100%; 
    
    pointer-events: auto;  
}

.nav-bar {
    /* Đảo ngược kích thước: Rộng 100% (của thẻ a 20px), Cao 100% */
    width: 100%; 
    height: 100%; /* Mặc định cao hết cỡ */
    
    /* Mẹo: Để tạo cảm giác "thanh đo năng lượng", ta dùng chiều cao khác nhau cho từng thanh (chỉnh ở HTML sau) */
    
    /* NỀN & VIỀN (Giữ nguyên style Hologram xanh) */
    background-color: rgba(0, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2), inset 0 0 10px rgba(0, 255, 255, 0.1);
    
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Hiệu ứng nảy */
    position: relative; 
    backdrop-filter: blur(2px);
    
    /* Biến hình khi Hover: Cao lên một chút */
    transform-origin: bottom; /* Mọc từ dưới lên */
}

/* HOVER */
.nav-bar:hover {
    background-color: rgba(0, 255, 255, 0.5); 
    border-color: #fff; 
    box-shadow: 0 0 15px #00ffff, inset 0 0 20px rgba(0, 255, 255, 0.4);

}

/* ACTIVE */
.nav-bar.active {
    background-color: #ffffff; 
    border-color: #fff;
    box-shadow: 0 0 20px #ffffff, 0 0 40px rgba(0, 255, 255, 0.8);
    height: 100% !important; /* Luôn cao nhất khi được chọn */
}
.nav-bar::after {
    content: attr(data-label); 
    position: absolute; 
    
    /* Đặt chữ nằm dưới đáy thanh */
    top: 105%; 
    left: 50%;
    transform: translateX(-50%); /* Căn giữa chữ theo thanh */
    
    /* Xoay chữ dọc 90 độ cho ngầu (Optional) */
    writing-mode: vertical-rl; 
    text-orientation: mixed;
    
    font-size: 14px; 
    font-weight: bold; 
    color: #ffffff; 
    text-shadow: 0 0 5px #00ffff;
    
    opacity: 0; 
    transition: opacity 0.2s; 
    pointer-events: none;
    white-space: nowrap;
}
.nav-bar:hover::after { opacity: 1; }
/* Hiệu ứng hiện chữ khi hover nút */


/* =========================================
   5. CONTENT COMPONENTS (Header, Body, Grid)
   ========================================= */

/* --- Header Wrapper (Chứa ảnh Banner) --- */
.main-header-wrapper {
    width: 100%; 
    position: relative;
    z-index: 20; 
    border-bottom: none; 
    background: #000; 
    margin-bottom: 0; 
}
.main-header-wrapper img {
    width: 100%; height: auto; display: block; 
}

/* --- Content Header (Tiêu đề trang) --- */
.content-header {
    position: relative;
    height: 120px; width: 100%;
    background-image: url('header.png');
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center;
    padding-left: 30px; z-index: 25;
}
.content-title {
    font-size: 28px; text-transform: uppercase; font-weight: bold;
    color: #000; letter-spacing: 2px;
}

/* --- Content Body (Phần nội dung chính) --- */
.content-body-wrapper {
    flex: 1;
    background-color: var(--content-bg);
    border: 1px solid rgba(0,0,0,0.2); /* Viền mờ */
    padding: 30px;
    position: relative;
    z-index: 20;
    /* overflow-y: auto; -> Đã có scroll-container lo việc này rồi */
}

/* --- Grid System --- */
.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột */
    gap: 3px; margin-bottom: 3px;
}
.content-grid.single-column { grid-template-columns: 1fr; } /* 1 cột */

/* --- Box Item --- */
.content-box {
    border: 1px solid #ddd; padding: 2px;
    background: #fafafa; transition: all 0.3s; position: relative;
}
.box-title {
    font-size: 14px; font-weight: bold; margin-bottom: 15px; padding: 1px;
    border: 1px solid #000; text-transform: uppercase; letter-spacing: 1px;
}
.box-content {

    font-size: 12px; line-height: 1.6; color: #333;
}
.box-image {

    width: 100%; height: 100%; object-fit: cover;
    margin-top: 10px; border: 1px solid #ddd;
}


/* =========================================
   6. SIDE DOCK (Thanh trượt bên trái)
   ========================================= */
.side-dock-container {
    position: absolute;
    right: 100%; /* Neo vào cạnh trái Wrapper */
    top: 80%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 50px; z-index: 9999; 
    pointer-events: none;
}

.dock-item {
    position: relative; height: 80px; 
    display: flex; align-items: center; flex-direction: row-reverse; 
}

.dock-tab {
    width: 25px; height: 140%;
    background-color: var(--tab-bg); cursor: pointer; border-right: none; 
    transition: all 0.2s;
    writing-mode: vertical-rl; transform: rotate(180deg);
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 9px; letter-spacing: 2px; color: #666;
    pointer-events: auto; position: relative; z-index: 2;
}
.dock-tab:hover { background-color: #fff; color: #000; }
.dock-tab.active { background-color: #000; color: #fff; border-color: #000; }

.dock-drawer {
    height: 140%; width: 0; overflow: hidden;
    background-color: var(--drawer-bg); border: 1px solid #ccc; border-right: none;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; align-items: center;
    position: relative; margin-right: -1px; z-index: 1;
    pointer-events: auto !important;
    cursor: pointer;
}
.dock-drawer.open { width: 280px; padding: 0 15px; border-left: 3px solid #000; }

.drawer-content {
    opacity: 0; width: 100%; display: flex; align-items: center; gap: 10px;
    transition: opacity 0.3s 0.2s; white-space: nowrap;
}
.dock-drawer.open .drawer-content { opacity: 1; }

/* Form nhỏ trong Dock */
.mini-form { display: flex; gap: 5px; width: 100%; }
.mini-input { border: 1px solid #ccc; padding: 5px; font-size: 11px; width: 100%; background: #f9f9f9; }
.mini-btn { background: #000; color: #fff; border: none; cursor: pointer; padding: 0 10px; font-size: 11px; }



/* =========================================
   8. Hệ thống Mascot
   ========================================= */
/* 1. Class gốc: Chứa thuộc tính chung */
.mascot {
    position: fixed;
    z-index: 100;    /* Nổi lên trên nền */
    pointer-events: none; /* Chuột bấm xuyên qua */
    width: 250px;    /* Kích thước mặc định */
    transition: all 0.3s ease; /* Hiệu ứng mượt nếu muốn hover */
}

.mascot img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. Các Class vị trí (Modifier) */
/* Góc dưới - Trái */
.pos-bl {
    left: 0;
    bottom: 0;
}

/* Góc dưới - Phải (Cách lề phải 250px nếu không muốn đè lên nội dung chính) */
.pos-br {
    right: 0; /* Hoặc right: 250px tùy layout của bạn */
    bottom: 0;
}

/* Góc trên - Trái (Treo ngược) */
.pos-tl {
    left: 0;
    top: 0;
}

/* 3. Ẩn tất cả trên mobile */
@media (max-width: 768px) {
    .mascot { display: none; }
}

/* --- YOUTUBE RESPONSIVE --- */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Tỷ lệ 16:9 (9 chia 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border: 2px solid #000; /* Viền đen cho hợp style */
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- 1. CÁI KHUNG ĐỊNH VỊ (Nằm dọc bên phải) --- */
.vertical-marquee-container {
    position: absolute;
    top: 0;
    right: 0; /* Dính sát lề phải */
    
    width: 46px;  /* Độ rộng của dải băng */
    height: 100%; /* Chiều cao full màn hình */
    right: 0;
    background: #000; /* Nền đen */ /* Viền trắng ngăn cách */
    z-index: 90; /* Nổi lên trên */
    
    overflow: hidden; /* Cắt bỏ phần thừa */
    pointer-events: auto; /* Để chuột tương tác được (nếu muốn pause) */
}

/* --- 2. CẤU HÌNH THƯ VIỆN (Xoay 90 độ) --- */
.marquee3k {
    /* MẸO: Xoay 90 độ để biến chạy ngang thành chạy dọc */
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
    
    /* Lúc này: Chiều rộng (width) sẽ biến thành Chiều cao (height) hiển thị */
    width: 100vh; /* Chiều dài bằng chiều cao màn hình */
    height: 40px; /* Chiều cao bằng độ rộng dải băng */
    
    background-color: #000;
}

/* --- 3. CHỈNH FONT CHỮ --- */
.marquee3k h1 {
    margin: 0;
    padding: 0;
    
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #fff; /* Chữ trắng */
    font-weight: normal;
    
    /* Căn giữa chữ vào dải băng */
    line-height: 40px; 
    text-transform: uppercase;
}

/* Khắc phục lỗi chữ bị xuống dòng (quan trọng với thư viện này) */
.marquee3k__wrapper {
    display: flex !important; /* Bắt buộc nội dung nằm ngang (trước khi xoay) */
}

/* =========================================
   8. RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .main-wrapper { width: 100%; }
    .sidebar-panel { display: none; z-index: 200/* Hoặc ẩn sidebar trên mobile */ }
}