@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&subset=vietnamese&display=swap');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

    /* =========================================
       HỆ THỐNG BIẾN MÀU SẮC CHUẨN DARK MODE APPLE
    ========================================= */
    :root {
        --afl-bg-main: #ffffff;
        --afl-bg-sec: #f8fafc;
        --afl-bg-third: #f1f5f9;
        --afl-border: #e2e8f0;
        --afl-text-main: #0f172a;
        --afl-text-muted: #475569;
        --afl-text-light: #64748b;
        --afl-glass: rgba(255, 255, 255, 0.6);
    }

    [data-theme="dark"] {
        --afl-bg-main: #0f172a;       
        --afl-bg-sec: #1e293b;        
        --afl-bg-third: #334155;      
        --afl-border: #334155;        
        --afl-text-main: #f8fafc;     
        --afl-text-muted: #cbd5e1;    
        --afl-text-light: #94a3b8;
        --afl-glass: rgba(15, 23, 42, 0.7);
    }

    .post-body, .post-content, .entry-content, .post { overflow: visible !important; }
    body { overflow-x: hidden; background: var(--afl-bg-main); font-family: 'Inter', sans-serif;}
      
    #afl-builder-wrapper, #afl-builder-wrapper button, #afl-builder-wrapper input, #afl-builder-wrapper summary, #afl-builder-wrapper .cb-label { font-family: 'Inter', sans-serif !important; }

    /* TIÊU ĐỀ TRANG */
    .main-page-title {
        text-align: center; font-size: 28px; font-weight: 900; text-transform: uppercase; 
        margin-bottom: 10px; margin-top: 40px;
        letter-spacing: 1px;
        background: linear-gradient(to right, #10b981, #a855f7); 
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
    }
    .main-page-title i { -webkit-text-fill-color: #3b82f6; color: #3b82f6; margin-right: 10px; }

    .main-page-subtitle {
        text-align: center; color: var(--afl-text-muted); font-size: 16px; margin-bottom: 30px; font-weight: 500;
        line-height: 1.5; max-width: 800px; margin-left: auto; margin-right: auto;
    }
    .main-page-subtitle span { color: #d97706; font-weight: 700; }
    [data-theme="dark"] .main-page-subtitle span { color: #f59e0b; }

    /* KHUNG TỔNG THỂ */
    #afl-builder-wrapper {
        width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important;
        position: relative; left: 50%; margin-left: calc(-50vw + 20px) !important; 
        border-radius: 20px !important; border: 1px solid var(--afl-border) !important; 
        background: var(--afl-bg-main);
        box-shadow: 0 20px 50px rgba(0,0,0,0.06); color: var(--afl-text-main);
        box-sizing: border-box; margin-bottom: 120px !important; display: flex;
        flex-direction: column; overflow: hidden !important; clear: both !important;
        transition: background 0.3s, border-color 0.3s;
    }
    [data-theme="dark"] #afl-builder-wrapper { box-shadow: 0 20px 50px rgba(0,0,0,0.4); }

    .afl-header { 
        background: var(--afl-bg-sec); padding: 20px 30px; border-bottom: 1px solid var(--afl-border); 
        display: flex; justify-content: space-between; align-items: center;
        transition: background 0.3s, border-color 0.3s;
    }
    .afl-title { margin: 0; font-size: 22px; font-weight: 900; text-transform: uppercase; color: var(--afl-text-main);}
    .afl-title span { color: #d97706; }
    [data-theme="dark"] .afl-title span { color: #f59e0b; }

    .afl-badge { 
        background: linear-gradient(135deg, #10b981, #059669); padding: 5px 15px; 
        border-radius: 20px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: #fff;
    }

    /* LƯỚI BỐ CỤC CHÍNH */
    .afl-layout { display: grid; grid-template-columns: 420px 1fr; gap: 0; }
    @media (max-width: 900px) { .afl-layout { grid-template-columns: 1fr; } }

    /* =========================================
       CỘT TRÁI (CHIA TẦNG FIXED & SCROLL)
    ========================================= */
    .afl-sidebar { 
        background: var(--afl-bg-main); border-right: 1px solid var(--afl-border); 
        display: flex; flex-direction: column; max-height: 800px; 
    }

    .sidebar-fixed-header {
        padding: 20px 20px 15px 20px; background: var(--afl-bg-main); border-bottom: 1px solid var(--afl-border);
        z-index: 20; box-shadow: 0 10px 15px rgba(0,0,0,0.02);
    }

    .afl-tabs { 
        display: flex; background: var(--afl-bg-third); border-radius: 12px; 
        border: 1px solid var(--afl-border); overflow: hidden; padding: 4px; gap: 4px;
    }
    .tab-btn { 
        flex: 1; padding: 12px 0; font-size: 13px; font-weight: 800; color: var(--afl-text-light);
        background: transparent; border: none; cursor: pointer; transition: 0.3s; 
        text-transform: uppercase; display: flex; justify-content: center; align-items: center; gap: 8px;
        border-radius: 8px;
    }
    .tab-btn i { font-size: 16px; }
    .tab-btn.active.buy-tab { background: var(--afl-bg-main); color: #10b981; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .tab-btn.active.sell-tab { background: var(--afl-bg-main); color: #ef4444; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

    .sidebar-scroll-area { padding: 15px 20px 40px 20px; overflow-y: auto; flex-grow: 1; }

    details.afl-group { 
        margin-bottom: 8px; background: var(--afl-bg-main); border-radius: 12px; 
        border: 1px solid var(--afl-border); transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    }
    details.afl-group[open] { border-color: #3b82f6; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1); }
    details.afl-group summary { 
        padding: 14px 15px; font-size: 14px; font-weight: 800; color: var(--afl-text-main); 
        cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
    }
    details.afl-group[open] summary { color: #3b82f6; }
    details.afl-group summary::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--afl-text-light); }
    details.afl-group[open] summary::after { content: '\f106'; color: #3b82f6; }

    .afl-group-content { 
        padding: 0 15px 15px 15px; display: flex; flex-direction: column; gap: 6px;
        max-height: 350px; overflow-y: auto; 
    }
    .afl-group-content::-webkit-scrollbar { width: 5px; }
    .afl-group-content::-webkit-scrollbar-track { background: var(--afl-bg-third); border-radius: 4px; }
    .afl-group-content::-webkit-scrollbar-thumb { background: var(--afl-text-light); border-radius: 4px; }
    .afl-group-content::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

    .afl-item { 
        display: flex; align-items: center; padding: 8px 10px; border-radius: 8px;
        background: transparent; cursor: pointer; transition: 0.2s; border: 1px solid transparent;
    }
    .afl-item:hover { background: var(--afl-bg-sec); border-color: var(--afl-border); }
    .afl-item input { margin-right: 10px; cursor: pointer; accent-color: #10b981; width: 16px; height: 16px; flex-shrink: 0;}
    .afl-item span { font-size: 13.5px; color: var(--afl-text-muted); user-select: none; line-height: 1.4; font-weight: 500;}
    body.mode-sell .afl-item input { accent-color: #ef4444; } 

    /* =========================================
       CỘT PHẢI (NÚT BẤM & KHUNG IDE APPLE STYLE)
    ========================================= */
    .afl-output { padding: 25px; background: var(--afl-bg-sec); display: flex; flex-direction: column; transition: background 0.3s;}

    .action-buttons { display: flex; gap: 15px; margin-bottom: 20px; }
    .btn-gen, .btn-download { 
        flex: 1; padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 900; 
        cursor: pointer; transition: 0.3s; border: none; color: #fff; display: flex; 
        justify-content: center; align-items: center; gap: 10px; text-transform: uppercase;
    }
    .btn-gen { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 8px 15px rgba(59, 130, 246, 0.25); }
    .btn-gen:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(59, 130, 246, 0.35); }
    .btn-download { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 15px rgba(245, 158, 11, 0.25); }
    .btn-download:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(245, 158, 11, 0.35); }

    /* KHUNG IDE - MAC OS STYLE CHUẨN XỊN */
    .ide-wrapper { 
        display: flex; flex-direction: column; flex-grow: 1; 
        background: #1e1e1e; border-radius: 16px; border: 1px solid #333; 
        overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.25); 
    }

    .ide-header { 
        background: #2d2d2d; padding: 12px 20px; display: flex; 
        justify-content: space-between; align-items: center; border-bottom: 1px solid #1a1a1a; position: relative;
    }

    /* 3 Nút Mac OS */
    .ide-dots { display: flex; gap: 8px; align-items: center; width: 100px; }
    .ide-dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }
    .ide-dot.red { background: #ff5f56; } 
    .ide-dot.yellow { background: #ffbd2e; } 
    .ide-dot.green { background: #27c93f; }

    /* Tiêu đề căn giữa */
    .ide-title { 
        position: absolute; left: 50%; transform: translateX(-50%);
        font-size: 14px; color: #94a3b8; font-weight: 600; font-family: 'Inter', sans-serif;
    }

    /* Nút Copy đồng bộ nền tối */
    .btn-copy-code { 
        background: transparent; color: #94a3b8; border: none; padding: 6px 12px; 
        border-radius: 6px; font-size: 13px; cursor: pointer; transition: 0.2s; 
        display: flex; align-items: center; gap: 6px; font-weight: 600; position: relative; z-index: 105; 
    }
    .btn-copy-code:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .btn-copy-code i { font-size: 15px; }

    /* Khung Code Text */
    #afl-result-pre { 
        margin: 0; padding: 25px; flex-grow: 1; overflow-y: auto; overflow-x: auto; max-height: 650px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important; font-size: 15px; 
        line-height: 1.7; color: #e2e8f0; white-space: pre-wrap; background: transparent;
    }

    /* SYNTAX HIGHLIGHT CỐ ĐỊNH CHO NỀN TỐI */
    .hl-keyword { color: #f472b6 !important; font-weight: bold; } 
    .hl-function { color: #38bdf8 !important; } 
    .hl-constant { color: #4fc1ff !important; } 
    .hl-number { color: #fcd34d !important; } 
    .hl-string, .hl-string * { color: #a3e635 !important; } 
    .hl-comment, .hl-comment * { color: #64748b !important; font-style: italic !important; font-weight: normal !important;} 

    /* Scrollbar IDE cố định màu tối */
    #afl-result-pre::-webkit-scrollbar { width: 8px; height: 8px;} 
    #afl-result-pre::-webkit-scrollbar-track { background: #1e1e1e; } 
    #afl-result-pre::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; } 
    #afl-result-pre::-webkit-scrollbar-thumb:hover { background: #64748b; }