/* === MISC (BUTTONS & UTILITIES) === */

.cta-button, .button, .apple-button {
    display: inline-block; padding: 0.75rem 1.5rem;
    border-radius: 999px; text-decoration: none;
    font-weight: 600; font-size: 0.95rem;
    transition: var(--transition-smooth);
    cursor: pointer; border: 1px solid transparent;
    text-align: center;
}
.cta-button:hover, .button:hover, .apple-button:hover {
    transform: translateY(-2px); text-decoration: none;
}

/* Primary Button Style */
.cta-button.eduma-primary, .button-primary, .apple-button.primary {
    background-color: var(--color-primary); color: white;
}
.cta-button.eduma-primary:hover, .button-primary:hover, .apple-button.primary:hover {
    background-color: var(--color-primary-dark); color: white;
}

/* Secondary Button Style */
.cta-button.eduma-secondary, .button-secondary, .apple-button.secondary {
    background-color: var(--color-surface-soft);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.cta-button.eduma-secondary:hover, .button-secondary:hover, .apple-button.secondary:hover {
    background-color: hsl(220, 33%, 94%);
    border-color: hsl(220, 33%, 90%);
}

#scrollToTopBtn {
    display: none; position: fixed;
    bottom: 1.5rem; right: 1.5rem; z-index: 999;
    background-color: var(--color-text-primary);
    color: var(--color-surface); cursor: pointer;
    border: none; width: 48px; height: 48px;
    border-radius: 50%; font-size: 1.25rem;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-smooth);
}
#scrollToTopBtn:hover {
    transform: scale(1.1);
}

.protected-download.is-disabled {
    opacity: 0.5; 
    cursor: not-allowed;
    pointer-events: none;
}

/* --- MODAL HIỂN THỊ LINK BÀI THI --- */
.share-link-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
#shareable-link-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-surface-soft);
    font-size: 1rem;
}
#copy-link-btn {
    padding: 10px 15px;
    font-size: 1.2rem;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* === Scroll Buttons === */
.scroll-buttons, #scrollToTopBtn, #scroll-up-btn, #scroll-down-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.scroll-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scroll-buttons button, #scrollToTopBtn, #scroll-up-btn, #scroll-down-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-primary);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s, visibility 0.3s;
    opacity: 0; /* Ẩn theo mặc định */
    visibility: hidden;
}

.scroll-buttons button:hover, #scrollToTopBtn:hover, #scroll-up-btn:hover, #scroll-down-btn:hover {
    background-color: hsl(30, 100%, 45%); /* Một màu cam đậm hơn */
    transform: translateY(-2px);
}

.scroll-buttons button.visible, #scrollToTopBtn.visible, #scroll-up-btn.visible, #scroll-down-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* Sửa lại style cho nút cuộn lên đầu trang cũ để đồng bộ */
#scrollToTopBtn, #scroll-up-btn, #scroll-down-btn {
    display: block; /* Bỏ display:none để JS điều khiển qua class .visible */
    opacity: 0;
    visibility: hidden;
}