/* --- General Setup & Core Sections --- */
:root {
    --primary-green: #28a745; --dark-bg: #010409; --light-glow: #00f2ff;
    --text-color: #e0e0e0; --border-color: rgba(0, 242, 255, 0.3);
    --block-bg: rgba(14, 43, 81, 0.5);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background-color: var(--dark-bg); color: var(--text-color); overflow-x: hidden; }
#blockchain-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#main-header { background-color: var(--primary-green); height: 60px; position: fixed; top: 0; width: 100%; z-index: 1000; transition: height 0.3s ease; display: flex; justify-content: center; align-items: center; }
#main-header.scrolled { height: 50px; background-color: rgba(40, 167, 69, 0.9); backdrop-filter: blur(10px); }
.header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1600px; padding: 0 20px; }
.logo { height: 40px; transition: height 0.3s ease; }
#main-header.scrolled .logo { height: 35px; }
h1 { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: white; margin: 0 20px; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.clock { font-family: 'Orbitron', sans-serif; color: white; font-size: 1.1rem; }
main { padding-top: 80px; }
footer { background: #030e1f; padding: 40px 20px; text-align: center; }
#contact-form { display: flex; gap: 10px; margin-top: 20px; max-width: 600px; margin-left: auto; margin-right: auto; }
#contact-form input { width: 100%; padding: 10px 15px; background: #0f274a; border: none; border-bottom: 2px solid var(--border-color); border-radius: 0; color: var(--text-color); transition: border-color 0.3s; }
#contact-form input:focus { outline: none; border-bottom-color: var(--primary-green); }
#contact-form button { padding: 10px 20px; background: var(--primary-green); border: none; color: white; cursor: pointer; border-radius: 4px; }
#form-status { margin-top: 15px; height: 1em; color: var(--primary-green); }
.copyright-section { border-top: 1px solid var(--border-color); padding-top: 20px; font-size: 0.9rem; color: #888; }

/* --- REBUILT & REFINED: System Map & Blocks --- */
#system-map-container { position: relative; width: 100%; max-width: 1800px; margin: 40px auto; padding: 20px; }
.connecting-lines-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; pointer-events: none; }
.connecting-lines-svg path {
    fill: none; stroke: #ffffff; stroke-width: 1.5px; opacity: 0.7;
    stroke-dasharray: 10, 5; /* Creates a dashed effect for movement */
    stroke-dashoffset: 1000;
    animation: run-light 30s linear infinite;
}
@keyframes run-light { to { stroke-dashoffset: 0; } }

#system-map { display: grid; grid-template-columns: repeat(12, 1fr); gap: 35px 15px; min-height: 700px; }
.dept-block {
    background: var(--block-bg); border: 1px solid var(--border-color); border-radius: 6px;
    backdrop-filter: blur(8px); text-align: center; cursor: pointer;
    transition: all 0.2s ease-in-out; padding: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; animation: pulse-border 6s infinite ease-in-out;
}
.dept-block:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 20px var(--light-glow); z-index: 10; }

/* Hierarchical Sizing */
[data-level="1"] { font-size: 0.9rem; }
[data-level="2"] { font-size: 0.85rem; }
[data-level="3"] { font-size: 0.8rem; }
[data-level="4"] { font-size: 0.75rem; background: rgba(5, 25, 50, 0.6); }

.block-header { font-weight: bold; margin-bottom: 5px; }
.block-icon { font-size: 1.2em; color: var(--light-glow); display: block; margin-bottom: 4px; }
.block-data { font-size: 0.9em; color: #a9c7d8; width: 100%; }
.data-row { display: flex; justify-content: space-between; padding: 0 5px; }
.data-row span:last-child { color: #ffffff; font-weight: bold; }
.loading-dots { font-size: 20px; line-height: 0.5; animation: blink 1.5s infinite; color: var(--light-glow); margin: 2px 0; }
.ai-link-btn { font-size: 0.9em; background-color: var(--primary-green); color: white; padding: 3px 8px; border-radius: 4px; text-decoration: none; margin-top: 4px; transition: all 0.2s ease; }
.ai-link-btn:hover { background-color: #218838; box-shadow: 0 0 10px var(--primary-green); }
.tooltip-text {
    visibility: hidden; min-width: 200px; background-color: #051d3a; color: #fff; text-align: center;
    border-radius: 6px; padding: 10px; position: absolute; z-index: 20; bottom: 105%;
    left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s;
    pointer-events: none; font-size: 0.9rem;
}
.dept-block:hover .tooltip-text { visibility: visible; opacity: 1; }

/* REBUILT: Grid Layout */
#director { grid-area: 1 / 6 / 2 / 8; }
#client-service { grid-area: 2 / 1 / 3 / 4; }
#strategy-creative { grid-area: 2 / 4 / 3 / 7; }
#execution { grid-area: 2 / 7 / 3 / 10; }
#operations { grid-area: 2 / 10 / 3 / 13; }
#biz-dev { grid-area: 3 / 1 / 4 / 3; }
#account { grid-area: 3 / 3 / 4 / 5; }
#strategy { grid-area: 3 / 4 / 4 / 6; }
#creative { grid-area: 3 / 6 / 4 / 8; }
#digital { grid-area: 3 / 7 / 4 / 9; }
#hr { grid-area: 3 / 10 / 4 / 13; }
#copywriter { grid-area: 4 / 5 / 5 / 7; }
#design { grid-area: 4 / 7 / 5 / 9; }
#video { grid-area: 5 / 6 / 6 / 8; }
#performance { grid-area: 4 / 8 / 5 / 10; }
#seo { grid-area: 4 / 10 / 5 / 12; }
#social { grid-area: 5 / 9 / 6 / 11; }

/* --- OPEN SECTION REFINED & ENHANCED: Chatbot UI --- */
#chatbot-section {
    padding: 50px 15px;
    background: transparent;
}

.chatbot-container {
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--border-color);
    min-height: 500px;
    max-height: 75vh; /* Giới hạn chiều cao tổng thể */
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.2);
    display: grid;
    /* Bố cục 2x2 được áp dụng cho mọi kích thước màn hình */
    grid-template-columns: 2fr 1.2fr; /* Cột trái lớn, cột phải nhỏ */
    grid-template-rows: 1fr auto; /* Hàng trên co giãn, hàng dưới cố định */
    grid-template-areas:
        "display suggestions"
        "input   input";
}

/* --- CÁC THÀNH PHẦN CHUNG --- */
.chat-display, .suggestions-panel, .chat-input-area {
    background: linear-gradient(160deg, #0a192f 0%, #06152a 100%);
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Cột hiển thị chat */
.chat-display {
    grid-area: display;
    gap: 15px;
    overflow-y: auto; /* Luôn có thanh cuộn khi nội dung dài */
}
.chat-message {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 90%;
    line-height: 1.6;
    animation: fadeIn 0.5s ease;
    word-wrap: break-word;
}
.chat-message.bot {
    background: rgba(15, 39, 74, 0.8);
    align-self: flex-start;
    border-left: 3px solid var(--primary-green);
}
.chat-message.user {
    background: var(--primary-green);
    color: white;
    align-self: flex-end;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Cột gợi ý */
.suggestions-panel {
    grid-area: suggestions;
    background: #06152a;
}
.suggestions-panel h4 {
    margin-bottom: 15px;
    color: var(--light-glow);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    flex-shrink: 0;
}
.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.suggestion-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.suggestion-btn:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
    transform: translateX(5px);
}

/* Khung nhập liệu */
.chat-input-area {
    grid-area: input;
    flex-direction: row; /* Input và button nằm ngang */
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color); /* Thêm đường kẻ phân cách */
}
#user-input {
    flex-grow: 1; /* Input chiếm hết không gian */
    background: #0f274a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    padding: 12px;
    font-family: 'Roboto', sans-serif;
    resize: none;
    font-size: 0.9rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
#user-input:focus {
    outline: none;
    border-color: var(--light-glow);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}
#send-btn {
    flex-shrink: 0; /* Button không bị co lại */
    background: var(--primary-green);
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1rem;
    padding: 12px;
}
#send-btn:hover {
    background: #218838;
}


/* --- TỐI ƯU CHO THIẾT BỊ DI ĐỘNG --- */
@media (max-width: 768px) {
    .chatbot-container {
        /* Bố cục 2x2 trên di động */
        grid-template-columns: 2fr 1.2fr; /* Cột trái lớn, cột phải nhỏ */
        grid-template-rows: 1fr auto; /* Hàng trên co giãn, hàng dưới cố định */
        grid-template-areas:
            "display suggestions"
            "input   input";
        min-height: 450px;
        max-height: 70vh; /* Giới hạn chiều cao trên mobile */
    }

    .chat-display {
        grid-area: display; /* Đặt vào ô 'display' */
    }

    .suggestions-panel {
        grid-area: suggestions; /* Đặt vào ô 'suggestions' */
    }
    .suggestions-panel h4 {
        font-size: 0.9rem;
    }

    .chat-input-area {
        grid-area: input; /* Đặt vào ô 'input', chiếm trọn hàng dưới */
        flex-direction: row; /* Sắp xếp input và button nằm ngang */
        align-items: center;
        gap: 10px;
        padding-top: 10px;
    }

    #user-input {
        flex-grow: 1; /* Input chiếm hết không gian còn lại */
    }
    #send-btn {
        flex-shrink: 0; /* Button không bị co lại */
    }
}
/* --- End section: Chatbot UI --- */

@media (max-width: 1400px) {
    #system-map { display: flex; flex-wrap: wrap; justify-content: center; min-height: auto; gap: 15px; }
    .connecting-lines-svg { display: none; }
    .dept-block { width: 180px; }
    [data-level="1"] { width: 220px; }
}
@media (max-width: 768px) {
    h1 { display: none; } .dept-block { width: 150px; }
}
@keyframes pulse-border { 0%, 100% { border-color: var(--border-color); box-shadow: 0 0 3px var(--border-color); } 50% { border-color: var(--light-glow); box-shadow: 0 0 10px var(--light-glow); } }
@keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }