/* Global styles for better box-model handling */
* {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Bold.woff2') format('woff2'),
         url('fonts/GoogleSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Medium.woff2') format('woff2'),
         url('fonts/GoogleSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Regular.woff2') format('woff2'),
         url('fonts/GoogleSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html, body {
    height: 100%;
    margin: 0;
    /* Sử dụng font Inter */
    font-family: 'Google Sans', sans-serif;
    background: linear-gradient(to right, #f0f4f8, #e9eff5);
    color: #333;
    overflow-x: hidden; /* Only hide horizontal overflow */
    line-height: 1.6; /* Improve readability */
    font-size:  14px;
}
input, textarea, select, button {
font-family: 'Google Sans', sans-serif;
}

/* Header styles */
.header {
    background-color: #fff;
    /*backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);*/
    padding: 5px 83px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
/*    position: sticky;*/
    top: 0;
    z-index: 1000;
}

.logo{
    line-height: 1;
}

.logo img{
    width:  60px;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li {
    margin-left: 30px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #4a5568;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s ease;
    font-family: 'Google Sans', sans-serif;
}

.main-nav ul li a:hover {
    color: #3182ce;
}

.hamburger {
    display: none; /* Hidden by default on larger screens */
    font-size: 24px;
    cursor: pointer;
    color: #4a5568;
}


.container {
    min-height: calc(100vh - 60px - 60px); /* Adjust for header and footer height */
    display: flex;
    flex-direction: column;
    padding: 15px; /* Increased padding */
    box-sizing: border-box;
    max-width: 1400px; /* Max width for content */
    margin: 0 auto; /* Center the container */
}

h1 {
    text-align: center;
    font-size: 32px; /* Larger title */
    margin: 0px 0px 5px;
    color: #1a202c; /* Darker color for prominence */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow */
    font-family: "Saira", sans-serif;
    font-weight: 600;
}

/* Input and results sections are now directly visible */
.input-area {
    display: flex;
    flex-direction: row;
    gap: 40px; /* Increased gap */
    align-items: flex-start; /* Align items to the top */
    background: white; /* Apply card-like background */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    margin-bottom: 30px; /* Space before the grid */
}

.left-col {
    flex: 1;
    min-width: 320px; /* Slightly larger min-width */
    max-width: 450px; /* Slightly larger max-width */
    display: flex;
    flex-direction: column;
}

.right-col {
    flex: 2;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: 600;
    display: flex; /* Changed to flex */
    align-items: center; /* Center items vertically */
    margin-top: 15px; /* More space above labels */
    margin-bottom: 5px; /* Space between label and input */
    font-size: 15px; /* Slightly larger font size */
    color: #4a5568; /* Slightly softer color */
}

input, textarea {
    width: 100%;
    padding: 12px; /* Increased padding */
    border-radius: 10px;
    border: 1px solid #e2e8f0; /* Softer border color */
    font-size: 13px; /* Consistent font size */
    background: #f7fafc; /* Lighter background */
    font-weight: 400;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: #4299e1; /* A more vibrant blue focus color */
    box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.3); /* Enhanced shadow on focus */
}
input:hover,
textarea:hover {
    border-color: #a0aec0; /* Subtle hover border */
}

.counter {
    font-size: 13px; /* Slightly larger counter font */
    margin-left: auto; /* Push counter to the right */
    font-weight: normal; /* Normal weight for counter */
}
.counter.valid {
    color: #38a169; /* Deeper green */
}
.counter.invalid {
    color: #e53e3e; /* Stronger red */
}

.grid {
    display: grid;
    /* Điều chỉnh lại bố cục grid */
    grid-template-columns: 0.8fr 1.5fr 0.8fr; /* score (nhỏ hơn), tips (rộng hơn), preview (nhỏ hơn) */
    grid-template-areas:
        "score tips tips" /* Hàng 1: score nhỏ, tips chiếm 2 cột */
        "score tips tips" /* Hàng 2: tips vẫn chiếm 2 cột */
        "preview tips tips" /* Hàng 3: preview nhỏ, tips vẫn chiếm 2 cột */
        "keywordDensity keywordDensity keywordDensity"; /* Hàng 4: keywordDensity chiếm toàn bộ */
    gap: 30px;
    padding-bottom: 30px;
}


.card {
    background: white;
    border-radius: 16px;
    padding: 25px; /* Increased padding */
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); /* Slightly stronger shadow */
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa theo chiều ngang mặc định */
    justify-content: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Add transition for hover */
}
/* Thêm style để căn lề trái cho card preview */
.card[style*="grid-area: preview"] { /* Chỉ áp dụng cho card preview */
    align-items: flex-start; /* Căn nội dung bên trong về phía bên trái */
    justify-content: flex-start; /* Căn nội dung lên trên */
    text-align: left; /* Đảm bảo text cũng căn lề trái */
}


.card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.12); /* More pronounced shadow on hover */
}

/* Thêm height cố định cho card chứa biểu đồ để tránh lỗi kéo dài */
.card[style*="grid-area: keywordDensity"] {
    height: 420px;
    overflow: hidden;
    padding: 60px 30px;
}

/* Đảm bảo canvas chiếm toàn bộ không gian của cha cố định chiều cao */
#keywordDensityChart {
    width: 100% !important;
    height: 100% !important;
}

h2 {
    font-family: "Saira", sans-serif;
    font-size: 25px; /* Consistent heading size for cards */
    margin-top: 0;
    font-weight: 600;
    margin-bottom: 20px; /* More space below card titles */
    color: #2d3748; /* Darker heading color */
    text-align: center; /* Đảm bảo tiêu đề cũng căn lề trái trong card preview */
    width: 100%; /* Để h2 chiếm toàn bộ chiều rộng và căn lề trái */
}

/* Styles for the new circular score display */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.score-display svg {
    margin-bottom: 15px; /* More space below SVG */
}
.score-display #scoreCircle {
    transition: stroke-dashoffset 0.8s ease-in-out, stroke 0.8s ease-in-out;
}
.score-display #scoreTextValue {
    transition: fill 0.8s ease-in-out;
}

/* Color definitions for different scores */
.score-color-red { stroke: #e53e3e; } /* Invalid */
.score-color-orange { stroke: #f6ad55; } /* Needs improvement */
.score-color-green { stroke: #38a169; } /* Good */

/* Text color for score value */
.text-color-red { fill: #e53e3e; }
.text-color-orange { fill: #f6ad55; }
.text-color-green { fill: #38a169; }

.tips ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 cột cho danh sách gợi ý */
    gap: 12px; /* Slightly larger gap for list items */
    padding-left: 20px; /* Keep indentation for list style */
    margin: 0;
    list-style: none; /* Remove default list style */
    width: 100%; /* Ensure ul takes full width */
    text-align: left; /* Align text to left within list */
}
.tips li {
    font-size: 14px; /* Slightly larger list item font */
    padding: 5px 0; /* Add vertical padding */
    border-bottom: 1px dashed #edf2f7; /* Add subtle dashed line */
}
.tips li:last-child {
    border-bottom: none; /* No border for the last item */
}
.tips li.done {
    color: #2f855a; /* Deeper green for done items */
    font-weight: 500;
    background-color: #f0fff4; /* Lighter background for done items */
    border-radius: 6px;
    padding: 6px 10px; /* More padding */
    border: 1px solid #c6f6d5; /* Subtle border for done items */
}
.tips li.done::before {
    content: "✅ ";
    margin-right: 5px; /* Space between emoji and text */
}
.tips li::before {
    content: "⚠️ ";
    margin-right: 5px; /* Space between emoji and text */
}

.preview-title {
    font-size: 16px; /* Slightly larger preview title */
    color: #1a0dab;
    font-weight: 600; /* Bolder title */
    margin-bottom: 5px;
    text-align: left; /* Căn lề trái */
    width: 100%; /* Đảm bảo chiếm đủ chiều rộng */
}
.preview-url {
    font-size: 14px; /* Slightly larger preview URL */
    color: #006621;
    margin-bottom: 5px;
    text-align: left; /* Căn lề trái */
    width: 100%; /* Đảm bảo chiếm đủ chiều rộng */
}
.preview-desc {
    font-size: 14px; /* Slightly larger preview description */
    color: #545454;
    margin-top: 8px; /* More space above description */
    text-align: left; /* Căn lề trái */
    width: 100%; /* Đảm bảo chiếm đủ chiều rộng */
}
.cke_notification_warning {
    display: none !important;
}
.suggestion-box {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 180px;
    overflow-y: auto;
    display: none;
}
.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}
.suggestion-item:hover, .suggestion-item.selected {
    background: #e2e8f0; /* Softer hover background */
}

.right-col textarea#fullContent {
  flex: 1;
  resize: vertical;
  min-height: 250px; /* Ensure a minimum height for CKEditor */
}

/* --- CSS cho Tooltips --- */
.tooltip-container {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    /* Removed vertical-align: middle; due to flexbox on label */
}
.tooltip-icon {
    font-size: 12px;
    font-weight: bold;
    background-color: #a0aec0; /* Softer grey */
    color: white;
    border-radius: 50%;
    width: 18px; /* Slightly larger icon */
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    user-select: none;
    transition: background-color 0.3s ease;
}
.tooltip-icon:hover {
    background-color: #6c757d; /* Darker on hover */
}
.tooltip-text {
    visibility: hidden;
    width: 280px; /* Wider tooltip */
    background-color: #2d3748; /* Darker background */
    color: #fff;
    text-align: left;
    border-radius: 8px; /* More rounded */
    padding: 10px 15px; /* More padding */
    position: absolute;
    z-index: 100;
    /* Điều chỉnh vị trí để hiển thị bên phải */
    left: 110%; /* Di chuyển sang phải của icon */
    top: 50%;    /* Căn giữa theo chiều dọc */
    transform: translateY(-50%); /* Căn chính xác theo chiều dọc */
    
    opacity: 0;
    transition: opacity 0.3s, left 0.3s; /* Thay đổi transition */
    font-size: 13px; /* Slightly larger font */
    line-height: 1.5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Stronger shadow */
}
.tooltip-text::after {
    content: "";
    position: absolute;
    /* Điều chỉnh vị trí mũi tên để chỉ về bên trái */
    left: -16px; /* Cách tooltip 1 khoảng */
    top: 50%;    /* Căn giữa theo chiều dọc */
    margin-top: -8px; /* Điều chỉnh vị trí mũi tên */
    border-width: 8px; /* Larger arrow */
    border-style: solid;
    border-color: transparent #2d3748 transparent transparent; /* Mũi tên chỉ sang trái */
}
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    left: 105%; /* Slight movement to the right on hover */ /* Điều chỉnh khi hover */
}

/* --- CSS cho Export Buttons (Được điều chỉnh để cố định ở cuối màn hình) --- */
.export-buttons-container {
    position: fixed; /* Cố định vị trí trên màn hình */
    bottom: 0; /* Luôn nằm ở dưới cùng */
    left: 0; /* Căn chỉnh từ lề trái */
    width: 100%; /* Chiếm toàn bộ chiều rộng màn hình */
    background-color: #ffffff1f;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    padding: 10px 20px; /* Padding trên dưới và hai bên */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Tạo bóng đổ nhẹ phía trên */
    z-index: 1000; /* Đảm bảo nút nằm trên các nội dung khác */
    
    display: flex;
    flex-wrap: nowrap; /* NGĂN CÁC NÚT XUỐNG DÒNG */
    justify-content: center; /* Căn giữa các nút theo chiều ngang */
    gap: 15px; /* Khoảng cách giữa các nút */
}
.export-buttons-container button {
    padding: 12px 25px; /* Larger buttons */
    font-size: 14px;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 600; /* Bolder text */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}
.export-buttons-container button:hover {
    transform: translateY(-2px); /* Slight lift on hover */
}
.export-buttons-container button#exportContentBtn {
    background-color: #3182ce; /* A standard blue */
}
.export-buttons-container button#exportContentBtn:hover {
    background-color: #2c5282; /* Darker blue on hover */
}
.export-buttons-container button#exportReportBtn {
    background-color: #38a169; /* A standard green */
}
.export-buttons-container button#exportReportBtn:hover {
    background-color: #2f855a; /* Darker green on hover */
}
.export-buttons-container button#checkNewContentBtn {
    background-color: #e53e3e; /* Red for clear/reset */
}
.export-buttons-container button#checkNewContentBtn:hover {
    background-color: #c53030; /* Darker red on hover */
}

/* Footer styles */
footer {
    text-align: center;
    padding: 5px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e2e8f0;
    font-size: 14px;
    color: #666;
    margin-top: auto; /* Push footer to the bottom */
    margin-bottom: 60px;
}

footer a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 600;
}

footer a:hover {
    text-decoration: underline;
}

/* --- Responsive CSS cho Grid và Layout --- */
@media (max-width: 1200px) {
    .grid {
        display: inline-flex;
        flex-direction:column;
    }
    .input-area {
        gap: 30px;
        padding: 25px;
    }
}

@media (max-width: 992px) {
    .input-area {
        flex-direction: column; /* Stack input columns vertically */
        padding: 20px;
        gap: 20px;
    }
    .left-col, .right-col {
        max-width: none;
        min-width: unset;
        width: 100%;
        margin-bottom: 0; /* Remove margin-bottom as gap handles spacing */
    }
    .container {
        padding: 15px; /* Reduced padding for mobile */
    }
    .tips ul {
        grid-template-columns: 1fr; /* Single column for suggestions on mobile */
        padding-left: 15px;
    }
    .export-buttons-container {
        flex-direction: row; /* Chỉnh lại thành hàng ngang */
        overflow-x: auto; /* Cho phép cuộn ngang */
        white-space: nowrap; /* Ngăn các nút xuống dòng */
        justify-content: flex-start; /* Bắt đầu từ trái khi cuộn */
        padding: 15px 20px; /* Đảm bảo có đủ padding cho cuộn */
        -webkit-overflow-scrolling: touch; /* Cải thiện trải nghiệm cuộn trên iOS */
        /* Loại bỏ box-shadow ở đây nếu bạn muốn làm phẳng thanh nút trên mobile */
    }
    .export-buttons-container button {
        flex-shrink: 0; /* Đảm bảo nút không bị co lại khi cuộn */
        margin: 0 7.5px; /* Thêm khoảng cách hai bên cho mỗi nút (tương đương gap 15px) */
    }
    /* Điều chỉnh tooltip trên màn hình nhỏ để tránh tràn */
    .tooltip-text {
        left: 50%; /* Trở về giữa */
        top: 130%; /* Lại xuống dưới */
        transform: translateX(-50%); /* Căn giữa ngang */
        width: 90vw; /* Chiếm 90% chiều rộng viewport */
        max-width: 300px; /* Giới hạn độ rộng tối đa */
    }
    .tooltip-text::after {
        bottom: 100%;
        left: 50%;
        margin-left: -8px;
        top: unset; /* Bỏ top */
        border-color: transparent transparent #2d3748 transparent;
    }
    .tooltip-container:hover .tooltip-text {
        top: 120%; /* Điều chỉnh khi hover trên mobile */
        left: 50%;
    }

    /* Responsive navigation for smaller screens */
    .hamburger {
        display: block; /* Show hamburger on small screens */
    }
    .main-nav ul {
        display: none; /* Hide menu by default */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Below the header */
        left: 0;
        background-color: #ffffff;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 10px 0;
        z-index: 999;
    }
    .main-nav ul.active {
        display: flex; /* Show menu when active */
    }
    .main-nav ul li {
        margin: 0;
        text-align: center;
    }
    .main-nav ul li a {
        padding: 10px 20px;
        display: block;
        border-bottom: 1px solid #eee;
    }
    .main-nav ul li:last-child a {
        border-bottom: none;
    }
    .header {
        padding:5px 15px;
    }
    .logo img{
        max-width: 50px;
    }
}

@media (max-width: 576px) {
    .tooltip-container{
        display: none;
    }
    h1 {
        font-size: 24px;
    }
    .container {
        padding: 10px;
    }
    .input-area {
        padding: 15px;
    }
    .card {
        padding: 20px;
    }
}