/* =========================================================
   DIAMOND FLOW SYSTEM - MASTER STYLE SHEET (STABLE v2.0)
   Người thiết kế: A. VU Studio
   ========================================================= */

/* ---------------------------------------------------------
   1. CÀI ĐẶT GỐC & BIẾN (VARIABLES)
------------------------------------------------------------ */
:root {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --accent: #00d4ff; /* Xanh Diamond */
    --accent-glow: rgba(0, 212, 255, 0.3);
    --danger: #ff4d4d;
}

body {
    margin: 0; 
    color: #fff;
    font-family: 'Inter', sans-serif;
    background: #000; 
    overflow-x: hidden;
}

/* Always show vertical scrollbar to prevent layout shift when pages change height */
html { overflow-y: scroll; }

/* Hiệu ứng nhiễu hạt nghệ thuật (Phủ trên cùng) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('/static/images/noise.svg');
    opacity: 0.05; 
    pointer-events: none;
    z-index: 9999;
}

.background-overlay {
    position: fixed; 
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(0.25) blur(8px);
    z-index: -1;
}

/* ---------------------------------------------------------
   2. TIỆN ÍCH CHUNG (GENERAL UTILS)
------------------------------------------------------------ */
.hidden { display: none; }
.active { display: block !important; animation: fadeIn 0.35s ease; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.glass-card {
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(15px); 
    padding: 40px; 
    border-radius: 15px;
    text-align: center; 
    cursor: pointer; 
    transition: 0.4s;
}
.glass-card:hover { 
    transform: translateY(-10px); 
    background: rgba(255, 255, 255, 0.1); 
    border-color: var(--accent); 
}

/* ---------------------------------------------------------
   3. THANH ĐIỀU HƯỚNG & AUTH
------------------------------------------------------------ */
.glass-nav {
    display: flex; justify-content: space-between;
    padding: 20px 10%; background: var(--glass-bg);
    backdrop-filter: blur(15px); border-bottom: 1px solid var(--glass-border);
    position: sticky; top: 0; z-index: 100;
}

.nav-links span { margin-left: 20px; cursor: pointer; opacity: 0.7; transition: 0.3s; }
.nav-links span:hover { color: var(--accent); opacity: 1; }

.breadcrumb-glass {
    width: 80%; margin: 20px auto 0; padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(5px);
    border-radius: 8px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.login-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9); z-index: 9999; 
    display: flex; justify-content: center; align-items: center;
}

/* ---------------------------------------------------------
   4. TRANG CHỦ (HOME)
------------------------------------------------------------ */
.hero { text-align: center; padding: 100px 20px; }
.hero-actions { display: flex; justify-content: center; margin-top: 20px; }
#leaf-toggle-btn { max-width: 240px; width: auto; padding: 12px 24px; }
#leaf-toggle-btn.inactive { opacity: 0.75; border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); }
.slogan { font-family: 'Playfair Display', serif; font-size: 3rem; font-style: italic; margin-bottom: 10px; }
.brand-name { letter-spacing: 5px; font-size: 0.8rem; opacity: 0.6; }
.home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 10% 100px; }

/* ---------------------------------------------------------
   5. DASHBOARD & LOG MODULE (QUAN TRỌNG)
------------------------------------------------------------ */
.log-module-content { margin-top: 30px; animation: fadeIn 0.4s ease; }
.sub-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.sub-tab { padding: 10px 20px; border-radius: 30px; background: rgba(255, 255, 255, 0.03); cursor: pointer; opacity: 0.6; transition: 0.3s; box-sizing: border-box; border: 1px solid transparent; }
.sub-tab.active { opacity: 1; color: var(--accent); background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); }

/* Make the tab bar sticky so it doesn't shift when page content height changes */
.sub-tabs {
    position: sticky;
    top: 120px; /* below navbar + breadcrumb */
    z-index: 60;
    background: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.log-main-module { padding-top: 20px; }

/* Layout Dashboard 3 tầng */
.metrics-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; margin-bottom: 20px; }
.dashboard-tier-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; }
.dashboard-tier-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.metric-card { text-align: center; padding: 15px !important; }
.m-title { font-size: 0.7rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.metric-card b { font-size: 1.4rem; color: #fff; margin-top: 8px; display: inline-block;}

/* PnL Colors */
.pnl-positive { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
.pnl-negative { color: var(--danger); }

/* Chart Box (Ép cứng chiều cao chống lag) */
.chart-box { 
    padding: 20px; 
    position: relative; 
    height: 350px !important; 
    max-height: 350px; 
    overflow: hidden; 
}

/* Lịch Lợi Nhuận (Calendar) */
.calendar-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-top: 15px; }
.cal-day { height: 30px; border-radius: 4px; display: flex; justify-content: center; align-items: center; font-size: 0.7rem; font-weight: bold; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.cal-win { background: rgba(0, 212, 255, 0.2); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.cal-loss { background: rgba(255, 77, 77, 0.2); border-color: var(--danger); color: var(--danger); }

/* Heatmap cũ (Nếu dùng) */
.heatmap-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
.heat-cell { width: 15px; height: 15px; background: rgba(255,255,255,0.05); border-radius: 2px; }
.heat-teal { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent); }

/* ---------------------------------------------------------
   6. HỆ THỐNG FORM NHẬP LIỆU (GRID SYSTEM)
------------------------------------------------------------ */
.log-split-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    width: 95%;
    margin: 0 auto;
    align-items: start;
}

.dynamic-form-container { padding: 25px !important; margin: 0 !important; }

/* Grid chia cột linh hoạt cho Form */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; }
.form-grid-3 { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr; gap: 25px; margin-bottom: 25px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 25px; }

/* Zen Style Inputs */
.zen-field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.zen-field label { font-size: 0.75rem; font-weight: 700; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase; }
.zen-field input, .zen-field select, .zen-field textarea { 
    background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 8px !important; padding: 12px 15px !important; color: #fff !important; width: 100%; box-sizing: border-box; 
}
.zen-field input:focus, .zen-field select:focus, .zen-field textarea:focus { 
    border-color: var(--accent) !important; background: rgba(0, 212, 255, 0.05) !important; outline: none; 
}

/* Nút bấm Zen */
.zen-btn { 
    width: 100%; padding: 15px; background: transparent; border: 1px solid var(--accent); 
    color: var(--accent); text-transform: uppercase; letter-spacing: 3px; cursor: pointer; 
    transition: 0.4s; font-weight: bold; margin-top: 20px;
}
.zen-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 30px var(--accent-glow); }

/* Slider & Tags */
.minimal-range { width: 100% !important; cursor: pointer; margin: 20px 0; accent-color: var(--accent); }
.range-numbers { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--accent); opacity: 0.6; margin-top: -10px; }
.tag-item { background: rgba(0, 212, 255, 0.1); border: 1px solid var(--accent); color: var(--accent); padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; }

/* ---------------------------------------------------------
   7. LỊCH SỬ LỆNH (TIMELINE)
------------------------------------------------------------ */
.log-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 20px !important; border-radius: 8px !important; margin-bottom: 10px !important;
    display: flex !important; justify-content: space-between !important;
    align-items: center !important; transition: 0.3s;
}
.log-item:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--accent) !important; }
.log-item h4 { margin: 0; font-size: 1rem; color: #fff; width: 15%; }
.log-body { flex: 1; display: flex; gap: 20px; font-size: 0.85rem; margin: 0 15px; align-items: center; }

/* ---------------------------------------------------------
   8. THE ATELIER (BENTO GRID)
------------------------------------------------------------ */

/* 💎 1. TÚT LẠI FONT CHỮ TIÊU ĐỀ CHO SANG TRỌNG */
.atelier-header {
    text-align: center;
    margin-bottom: 40px;
}
.zen-title {
    font-family: 'Playfair Display', serif; /* Font chữ có chân nghệ thuật */
    font-size: 2.8rem;
    letter-spacing: 5px;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 5px 20px rgba(0, 212, 255, 0.4); /* Đổ bóng phát sáng nhẹ */
}
.zen-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 3px;
    opacity: 0.6;
    text-transform: uppercase;
    margin: 0;
}

/* 💎 2. CẤU TRÚC LƯỚI */
.atelier-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 250px; 
    grid-auto-flow: dense; 
    gap: 25px; 
}

.atelier-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px; 
    padding: 30px; 
    overflow: hidden;
    transition: 0.4s ease;
    display: flex; 
    flex-direction: column; 
    z-index: 10;
    backdrop-filter: blur(10px); 
}

.atelier-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 212, 255, 0.1);
}

/* Khối Ngang (Framework) */
.digital-assets { 
    grid-column: span 2; 
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,212,255,0.05)); 
}

/* 💎 3. KHỐI DỌC (WORKSPACE ART) - THÊM ẢNH NỀN TRỪU TƯỢNG VỀ TRADING */
.physical-art { 
    grid-row: span 2; 
    /* Dùng ảnh đường line trừu tượng kết hợp gradient đen mờ để chữ vẫn nổi bật */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.9)), 
                url('/static/images/anhnghethuat.png') center/cover no-repeat; 
    border-color: rgba(0, 212, 255, 0.3);
}

/* Định dạng nội dung bên trong thẻ */
.category-tag {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; font-weight: bold;
    color: var(--accent); border: 1px solid var(--accent); background: rgba(0, 212, 255, 0.05);
    padding: 6px 15px; border-radius: 50px; width: fit-content; margin-bottom: auto;
}

.card-content-inner { margin-top: 20px; }
.atelier-card h3 { margin: 0 0 10px; font-size: 1.4rem; font-weight: 600; color: #fff; }
.atelier-card p { font-size: 0.85rem; opacity: 0.6; line-height: 1.6; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.atelier-btn { 
    background: transparent; border: 1px solid rgba(255,255,255,0.3); 
    color: #fff; padding: 10px 20px; font-size: 0.8rem; border-radius: 8px;
    cursor: pointer; transition: 0.3s; width: fit-content; text-transform: uppercase; letter-spacing: 1px;
    backdrop-filter: blur(5px);
}
.atelier-btn:hover { background: #fff; color: #000; border-color: #fff; font-weight: bold; }

/* ==========================================
   9. HỆ THỐNG MODAL (BẢN CHUẨN TRỊ TRÀN ẢNH)
   ========================================== */
.modal-overlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    z-index: 20000; 
    display: none;  
    justify-content: center;
    
    /* 💎 3 Lệnh MỚI để tạo khoảng thở an toàn */
    align-items: flex-start; /* Đẩy khối lên từ từ thay vì ép vào giữa */
    padding: 5vh 0;          /* Luôn cách mép trên và mép dưới 5% màn hình */
    overflow-y: auto;        /* Cho phép cuộn mượt mà nếu bảng quá bự */
}

.modal-container {
    width: 90%;
    max-width: 1100px;
    background: #0f0f0f;
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    
    /* 💎 Lệnh ma thuật: Tự động cân bằng không gian xung quanh để căn giữa */
    margin: auto; 
}

/* Nút đóng X sang trọng */
.close-modal {
    position: absolute;
    top: 20px; right: 25px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    color: #fff; border: none;
    border-radius: 50%; cursor: pointer;
    z-index: 20001; font-size: 1.2rem;
    display: flex; justify-content: center; align-items: center;
    transition: 0.3s;
}
.close-modal:hover { background: var(--accent); color: #000; transform: rotate(90deg); }

.modal-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    height: 100%;
    align-items: center;
}

.main-image {
    height: 450px; 
    background: rgba(255,255,255,0.02);
    border-radius: 20px;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

.main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info { 
    text-align: left; 
    max-height: 80vh;
    overflow-y: auto;
    padding-right: 15px;    
}
/* 💎 Tút lại thanh cuộn (Scrollbar) chuẩn Premium */
.product-info::-webkit-scrollbar {
    width: 4px;
}
.product-info::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 10px;
}
.product-info::-webkit-scrollbar-thumb {
    background: var(--accent); 
    border-radius: 10px;
}
.product-description { opacity: 0.8; line-height: 1.6; margin-bottom: 25px; }

/* Nút Đặt hàng rực rỡ */
.buy-btn {
    display: block; width: 100%; text-align: center;
    background: var(--accent); color: #000;
    padding: 18px; border-radius: 50px;
    text-decoration: none; font-weight: bold;
    margin-top: 20px; transition: 0.3s;
}
.buy-btn:hover { transform: scale(1.02); box-shadow: 0 0 20px var(--accent-glow); }

/* ---------------------------------------------------------
   10. BỘ SƯU TẬP (COLLECTION CARDS) - TRANG TRÍ ĐẸP MẮT
------------------------------------------------------------ */
.collection-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.collection-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
}

.collection-img-box {
    position: relative;
    width: 100%;
    height: 200px; /* Ép cứng chiều cao khung ảnh */
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.collection-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giữ tỷ lệ ảnh đẹp, không bị méo */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.collection-card:hover .collection-img {
    transform: scale(1.1); /* Rê chuột phóng to ảnh mượt mà */
}

.collection-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s;
}

.collection-card:hover .collection-overlay { opacity: 1; }

.view-btn {
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(5px);
}

.collection-info { padding: 20px; }
.collection-info h4 { margin: 0 0 10px 0; font-size: 1.1rem; color: #fff; }
.collection-info p { font-size: 0.8rem; opacity: 0.6; margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------
   11. WIDGET NHẠC & ANIMATIONS
------------------------------------------------------------ */
.music-bubble {
    position: fixed; bottom: 30px; right: 30px; z-index: 9999;
    display: flex; align-items: center; border-radius: 50px; padding: 10px !important;
    width: 45px; height: 45px; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(15px);
}
.music-bubble:hover { width: 280px; padding: 10px 20px !important; }

.music-bubble button {
    all: unset; display: inline-flex; justify-content: center; align-items: center;
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: background 0.3s, transform 0.3s;
}
.music-bubble button:hover { background: rgba(255,255,255,0.08); transform: scale(1.05); }

.audio-toggle-btn {
    margin-left: 8px; font-size: 1rem; color: #fff; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05);
}
.audio-toggle-btn.inactive { opacity: 0.6; border-color: rgba(255,255,255,0.08); }

.music-details {
    display: flex; align-items: center; gap: 15px; opacity: 0; 
    white-space: nowrap; margin-left: 15px; transition: opacity 0.3s;
}
.music-bubble:hover .music-details { opacity: 1; }

@keyframes bounce {
    0% { height: 4px; }
    100% { height: 16px; box-shadow: 0 0 8px var(--accent); }
}

/* ---------------------------------------------------------
   12. RESPONSIVE (MOBILE)
------------------------------------------------------------ */
@media (max-width: 768px) {
    .metrics-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .dashboard-tier-2, .dashboard-tier-3, .log-split-layout, .home-grid, .atelier-grid, .modal-content-grid { 
        grid-template-columns: 1fr; 
    }
    .atelier-grid { grid-template-rows: auto; }
    .music-bubble { bottom: 15px; right: 15px; }
    .music-bubble:hover { width: 140px; }
    #vol-control { display: none; }
}

/* ---------------------------------------------------------
   13. DIAMOND FLOW ZEN HOME PREMIUM
------------------------------------------------------------ */

/* --- 1. MANG HÌNH NỀN THIỀN ĐỊNH PHỦ KHẮP HỆ THỐNG --- */
.background-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gắn ảnh nền vào đây để trang nào cũng đẹp */
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.8), rgba(5, 5, 5, 0.95)), 
                url('/static/images/anhnghethuat.png') center/cover no-repeat;
    z-index: -1; /* Ép nó nằm dưới cùng */
}

/* ---1.2 TỰ ĐỘNG GIẤU BREADCRUMB KHI Ở TRANG HOME --- */
body:has(#home.active) #breadcrumb-container {
    display: none !important;
}

/* --- 1.3. CẤU TRÚC TRANG HOME CHUẨN CĂN GIỮA --- */
#home {
    /* Trừ đi đúng chiều cao của thanh Menu để không sinh ra thanh cuộn (scrollbar) gây lệch ngang */
    min-height: calc(100vh - 80px); 
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

#home.active {
    display: flex;
}

.falling-leaves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.leaf {
    position: absolute;
    top: -50px;
    width: 18px;
    height: 24px;
    background: linear-gradient(145deg, #c93c18, #e5a45d);
    clip-path: polygon(50% 0%, 60% 18%, 98% 25%, 70% 45%, 82% 70%, 50% 55%, 18% 70%, 30% 45%, 2% 25%, 40% 18%);
    border-radius: 20% 20% 25% 25%;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
    transform-origin: center;
    animation: fallLeaf var(--leaf-duration, 7s) ease-in forwards;
    will-change: transform, opacity;
}

@keyframes fallLeaf {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 0.95;
    }
    20% {
        transform: translate3d(18px, 70px, 0) rotate(14deg);
    }
    40% {
        transform: translate3d(-28px, 170px, 0) rotate(58deg);
        opacity: 0.9;
    }
    60% {
        transform: translate3d(24px, 300px, 0) rotate(122deg);
    }
    80% {
        transform: translate3d(-16px, 420px, 0) rotate(170deg);
    }
    100% {
        transform: translate3d(12px, 110vh, 0) rotate(230deg);
        opacity: 0;
    }
}

.leaf::before {
    content: '';
    position: absolute;
    top: 70%;
    left: 50%;
    width: 2px;
    height: 18px;
    background: rgba(80, 40, 20, 0.8);
    transform: translate(-50%, -50%) rotate(12deg);
    border-radius: 2px;
}

/* --- 1.4 ĐẢM BẢO KHUNG 4 Ô LUÔN CĂN GIỮA MÀN HÌNH --- */
.home-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0 auto; /* Lệnh "auto" 2 bên giúp ôm trọn vị trí chính giữa */
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1;
}

.hidden {
    display: none !important; /* Thêm !important để không ai dám cãi */
}

/* 2. Hiệu ứng Hào quang Dòng tiền (Aurora Fluid) */
.zen-aurora-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.aurora-blob {
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
    animation: moveAurora 20s infinite alternate;
}
.aurora-blob.second { background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); animation-duration: 30s; right: 0; top: 20%; }
.aurora-blob.third { bottom: -10%; left: 20%; animation-duration: 25s; }

@keyframes moveAurora {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.2); }
}

/* 3. Tiêu đề nghệ thuật */
.slogan-premium {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-style: italic;
    background: linear-gradient(180deg, #fff 0%, #888 100%);
    
    -webkit-background-clip: text;
    background-clip: text; /* 💎 Thêm dòng này là VS Code hết báo lỗi */
    
    -webkit-text-fill-color: transparent;
    color: transparent; /* 💎 Thêm dòng này cho đồng bộ chuẩn */
    
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 10px;
    z-index: 1;
}
.brand-name-premium {
    letter-spacing: 8px;
    font-size: 0.8rem;
    color: var(--accent);
    opacity: 0.8;
    z-index: 1;
}

/* 4. Thủy tinh Hào nhoáng (Glassmorphism Grid) */
.home-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin-top: 60px;
    z-index: 1;
}
.glass-card-art {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 20px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}
.glass-card-art:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    transform: translateY(-10px);
}
.glass-card-art h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: normal;
}
.glass-card-art p {
    font-size: 0.75rem;
    opacity: 0.5;
    letter-spacing: 1px;
}

/* Ánh sáng quét khi hover */
.card-glow {
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
    transition: 0.5s;
}
.glass-card-art:hover .card-glow { left: 100%; }
/* --- ĐỒNG BỘ TỶ LỆ LOGO MỚI --- */
.glass-nav .logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important; /* 💎 Phá bỏ giới hạn chiều rộng cũ gây lỗi */
    white-space: nowrap !important; /* 💎 Cấm chữ A. VU bị rớt dòng */
    cursor: pointer;
}

.glass-nav .logo img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important; /* 💎 Chống méo, bóp ảnh */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.glass-nav .logo span {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    color: #fff;
}
/* --- TRANG ABOUT: NGHỆ THUẬT & THẨM MỸ --- */

.about-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    color: rgba(255,255,255,0.9);
}

/* Hero Section */
.about-hero {
    text-align: center;
    margin-bottom: 100px;
}
.about-tag {
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 5px 15px;
    border-radius: 50px;
}
.about-name {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin: 30px 0 10px 0;
    font-weight: normal;
}
.about-name span {
    font-size: 1.5rem;
    opacity: 0.5;
    font-style: italic;
}
.about-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    opacity: 0.7;
}

/* Story Grid */
.about-story-grid {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.story-item {
    display: flex;
    align-items: center;
    gap: 50px;
}
.story-item.reverse { flex-direction: row-reverse; }

.story-content { flex: 1; text-align: justify; }
.story-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 25px;
}
.story-content p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 300;
}

.highlight-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    border-left: 2px solid var(--accent);
    padding-left: 20px;
    color: #fff;
}

/* Philosophy Box */
.story-final {
    margin-top: 50px;
    padding: 60px !important;
    border-color: var(--accent) !important;
}
.philosophy-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 40px 0;
    gap: 40px;
}
.p-item strong {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    letter-spacing: 5px;
    display: block;
    margin-bottom: 10px;
}
.p-item p { font-size: 0.85rem; opacity: 0.6; margin: 0; }
.p-divider { width: 1px; height: 100px; background: rgba(255,255,255,0.1); }

.vault-legacy {
    font-style: italic;
    text-align: center;
    max-width: 80% ;
    margin: 0 auto !important;
}

.about-signature {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-style: italic;
    text-align: right;
    margin-top: 40px;
    opacity: 0.3;
}

/* Mobile */
@media (max-width: 768px) {
    .about-name { font-size: 2.5rem; }
    .story-item, .story-item.reverse { flex-direction: column; text-align: left; }
    .philosophy-box { flex-direction: column; gap: 30px; }
    .p-divider { width: 50%; height: 1px; }
    .story-final { padding: 30px !important; }
}
/* --- THE FRAMEWORK: TECHNICAL WIKI STYLE --- */

.framework-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

.framework-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    margin-top: 40px;
}

/* Sidebar tinh tế */
.framework-sidebar { padding: 20px !important; text-align: left !important; }
.sidebar-label { font-size: 0.65rem; letter-spacing: 2px; color: var(--accent); opacity: 0.7; margin-bottom: 20px; text-transform: uppercase; }

.framework-sidebar ul { list-style: none; padding: 0; margin: 0; }
.framework-sidebar li {
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.9rem;
    margin-bottom: 5px;
    border-left: 2px solid transparent;
}
.framework-sidebar li:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.framework-sidebar li.active {
    background: rgba(0, 212, 255, 0.1);
    border-left-color: var(--accent);
    color: var(--accent);
}

/* Content Area */
.framework-content .glass-card-art { padding: 40px !important; text-align: left !important; min-height: 500px; }
.framework-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; }

.fw-main-title { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 20px; }

/* Code Terminal Effect */
.code-terminal {
    background: #000;
    border: 1px solid #222;
    border-radius: 12px;
    margin-top: 30px;
    overflow: hidden;
}
.terminal-header {
    background: #111;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #222;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }
.terminal-title { font-size: 0.7rem; opacity: 0.4; margin-left: 10px; font-family: 'Inter'; }

.code-terminal pre { padding: 20px; margin: 0; color: #00d4ff; font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; overflow-x: auto; }

/* Mobile */
@media (max-width: 768px) {
    .framework-layout { grid-template-columns: 1fr; }
    .framework-sidebar { display: none; } /* Hoặc chuyển thành thanh trượt ngang */
}

/* ==========================================
   THE VAULT - PREMIUM BLOG LAYOUT
   ========================================== */
.vault-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.vault-hero-premium {
    text-align: center;
    margin-bottom: 50px;
}

.vault-hero-line {
    width: 60px;
    height: 2px;
    background: var(--accent);
    margin: 20px auto 0;
    box-shadow: 0 0 10px var(--accent-glow);
}

.vault-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.blog-card {
    padding: 0 !important; /* Xóa khoảng trắng mặc định của thẻ Glass */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

/* Xử lý khung chứa ảnh */
.blog-img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.blog-img, .blog-img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Hiệu ứng mượt */
}

/* Ảnh mặc định nếu bài viết không có hình */
.blog-img-placeholder {
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0, 212, 255, 0.05));
}

.blog-card:hover .blog-img, .blog-card:hover .blog-img-placeholder {
    transform: scale(1.08); /* Zoom nhẹ ảnh khi trỏ chuột */
}

/* Nhãn chuyên mục (Tag) */
.blog-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(5px);
}

/* Phần nội dung bài viết */
.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-content h3 {
    font-family: 'Playfair Display', serif; /* Chữ nghệ thuật */
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 15px 0;
    line-height: 1.4;
    transition: color 0.3s;
}

.blog-card:hover .blog-content h3 {
    color: var(--accent);
}

.blog-excerpt {
    font-size: 0.9rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1; /* Đẩy phần ngày tháng xuống sát đáy */
}

.blog-meta {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #777;
    border-top: 1px dashed rgba(255,255,255,0.1);
    padding-top: 15px;
}

.meta-dot {
    margin: 0 10px;
    color: #444;
}

.read-more-btn {
    padding: 10px 15px;
    font-size: 0.75rem;
    margin-top: 15px;
    width: fit-content;
}

/* 💎 XỬ LÝ ĐẶC BIỆT CHO BÀI VIẾT NỔI BẬT (FEATURED POST) */
@media (min-width: 992px) {
    .blog-card.featured {
        grid-column: span 2; /* Chiếm 2/3 không gian ngang */
        flex-direction: row; /* Xếp ảnh bên trái, chữ bên phải */
    }
    .blog-card.featured .blog-img-wrapper {
        width: 50%;
        height: 100%;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.05);
    }
    .blog-card.featured .blog-content {
        width: 50%;
        padding: 40px;
        justify-content: center;
    }
    .blog-card.featured h3 { font-size: 2rem; }
    .blog-card.featured .blog-excerpt { font-size: 1rem; }
}

/* Banner Kêu gọi Đóng góp */
.vault-contribution {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0, 212, 255, 0.08));
    border-color: rgba(0, 212, 255, 0.2);
    text-align: left !important;
}

.contribution-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--accent);
    margin: 0 0 10px 0;
}

.contribution-content p {
    margin: 0;
    color: #aaa;
    font-size: 0.95rem;
    max-width: 600px;
    line-height: 1.5;
}

.contribute-btn {
    width: auto;
    margin: 0;
    padding: 15px 30px;
    white-space: nowrap;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .vault-blog-grid { grid-template-columns: 1fr; }
    .blog-card.featured { flex-direction: column; }
    .blog-card.featured .blog-img-wrapper, .blog-card.featured .blog-content { width: 100%; }
    .vault-contribution { flex-direction: column; text-align: center !important; gap: 20px; }
}
/* ========================================== */
/* 📱 TỐI ƯU DI ĐỘNG TOÀN DIỆN (FIX VIDEO BUGS) */
/* ========================================== */
@media (max-width: 768px) {
    
    /* 1. Sửa Header: Chống đè chữ và tràn Menu */
    .glass-nav {
        height: auto !important;
        padding: 15px 10px !important;
        flex-direction: column !important;
        gap: 12px;
    }
    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important; /* Cho phép rớt dòng nếu Menu quá dài */
        justify-content: center !important;
        gap: 12px !important;
        width: 100%;
    }
    .nav-links span {
        font-size: 0.75rem !important; /* Thu nhỏ chữ menu một chút cho gọn */
        white-space: nowrap;
    }

    /* 2. Sửa Tab "The Log": Cho phép vuốt ngang (Scroll) */
    .sub-tabs {
        display: flex !important;
        overflow-x: auto !important; /* 💎 Vuốt ngang nếu 4 tab bị tràn */
        white-space: nowrap;
        padding: 10px 5px !important;
        gap: 10px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Giấu thanh cuộn cho đẹp */
    }
    .sub-tabs::-webkit-scrollbar { display: none; }
    
    .sub-tab {
        padding: 10px 20px !important;
        min-width: 110px; /* Ép kích thước để ngón tay dễ bấm */
        font-size: 0.8rem !important;
    }

    /* 3. Sửa Layout Chia Cột (Fix lỗi tràn viền Nhật ký) */
    .log-split-layout {
        flex-direction: column !important; /* Chuyển từ ngang sang dọc 100% */
        gap: 20px !important;
    }
    .split-left, .split-right {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 4. Tối ưu Dashboard: 2 cột cho thông số nhỏ */
    /* Giả sử anh có class bao quanh các ô Net PnL, Winrate... */
    .dashboard-grid, .stats-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Chia 2 cột cho đỡ dài */
        gap: 10px !important;
    }

    /* 5. Sửa Form nhập liệu: Chống méo ô Input */
    .trade-form-grid {
        grid-template-columns: 1fr 1fr !important; /* Chia đôi các ô SL/TP */
        gap: 10px !important;
    }
    .trade-form-grid .full-width {
        grid-column: span 2 !important;
    }
    
    /* 6. Fix Logo bị to/méo trên Mobile */
    .glass-nav .logo img {
        width: 30px !important;
        height: 30px !important;
    }
    .glass-nav .logo span {
        font-size: 1.1rem !important;
    }

    /* 7. Khoảng cách an toàn cho các Section */
    section {
        padding: 100px 15px 40px 15px !important; /* Tránh bị Header đè lên nội dung */
    }
}
.fw-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột 2 hàng */
    gap: 20px;
    margin-top: 20px;
}

.fw-box {
    text-align: left !important;
    padding: 25px !important;
    min-height: 200px;
    border-left: 3px solid rgba(255,255,255,0.1);
}

.fw-box:hover {
    border-left-color: var(--accent);
}

.fw-box label {
    display: block;
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: bold;
}

.fw-text {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
    color: #ccc;
    white-space: pre-wrap;
}

.sidebar-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #888;
    margin-bottom: 10px;
    padding-left: 10px;
}
/* =========================================================
   DIAMOND FLOW 2.0 - PREMIUM UI ENHANCEMENTS
   ========================================================= */

/* 1. Nâng cấp các thẻ Thông số (Metric Cards) */
.metric-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.5) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}
.metric-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 255, 0.4) !important;
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.15) !important;
}

/* Hiệu ứng tia sáng quét ngang thẻ khi hover */
.metric-card::before { 
    content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
    transform: skewX(-20deg); transition: 0.6s; pointer-events: none;
}
.metric-card:hover::before { left: 150%; }

/* 2. Tút lại các biểu đồ (Chart Box) cho có chiều sâu */
.chart-box {
    background: linear-gradient(180deg, rgba(25,25,25,0.6) 0%, rgba(5,5,5,0.8) 100%) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: inset 0 2px 10px rgba(255,255,255,0.02), 0 15px 35px rgba(0,0,0,0.6) !important;
}

/* 3. Phù phép các nút bấm (Zen Buttons) */
.zen-btn {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.05), rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05)) !important;
    background-size: 200% auto !important;
    border: 1px solid rgba(0, 212, 255, 0.5) !important;
    backdrop-filter: blur(5px);
    transition: 0.4s !important;
}
.zen-btn:hover {
    background-position: right center !important;
    background-color: var(--accent) !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important;
    transform: translateY(-2px);
}

/* 4. Hiệu ứng Fade-in mượt mà khi đổi Tab Dashboard */
.dashboard-master-grid {
    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 5. Dòng thời gian lịch sử lệnh ảo diệu hơn */
.log-item {
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 100%) !important;
    border-left: 3px solid rgba(255,255,255,0.1) !important;
}
.log-item:hover {
    border-left: 4px solid var(--accent) !important;
    box-shadow: -5px 0 15px rgba(0, 212, 255, 0.1) !important;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%) !important;
}