/* Dark mode base */
.dark-mode {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Các khối chính */
.dark-mode .box,
.dark-mode .rate-box,
.dark-mode input,
.dark-mode button,
.dark-mode .calc-btn {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Link */
.dark-mode a {
    color: #93c5fd !important;
}

/* Toast (nếu có) */
.dark-mode #toast {
    background: rgba(255, 159, 10, 0.9) !important;
    color: #fff !important;
}

/* Hiệu ứng chuyển màu cho toàn trang */
body, 
html,
#app,
* {
    transition: 
        background-color 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease,
        fill 0.5s ease;
}
/* ---------------------------------- */
/* TOGGLE DARK / LIGHT MODE */
/* ---------------------------------- */

:root {
    --bg: #ffffff;
    --text: #000000;
    --box-bg: #ffffff;
    --box-border: #e0e0e0;
    --box-shadow: rgba(0, 0, 0, 0.05);
    --primary: #1e3a8a;
    --secondary-bg: #f7f9fc;
    --secondary-border: #d0d7e0;
    --success: #15803d;
}

body.dark {
    --bg: #0f172a;
    --text: #e2e8f0;
    --box-bg: #1e293b;
    --box-border: #334155;
    --box-shadow: rgba(255, 255, 255, 0.05);
    --primary: #60a5fa;
    --secondary-bg: #1e293b;
    --secondary-border: #475569;
    --success: #4ade80;
}

/* Áp dụng biến màu */
body, html {
    background: var(--bg) !important;
    color: var(--text) !important;
    transition: background 0.3s ease, color 0.3s ease;
}

/* FORM CONTAINER */
.convert-container {
    background: var(--box-bg) !important;
    border-color: var(--box-border) !important;
    box-shadow: 0 4px 10px var(--box-shadow) !important;
}

/* INPUT + SELECT */
.modern-input,
.modern-select {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--box-border) !important;
    transition: 0.3s;
}

.modern-input::placeholder {
    color: #94a3b8;
}

.modern-select option {
    background: var(--box-bg);
    color: var(--text);
}

/* BUTTON */
.modern-submit-btn {
    background-color: var(--primary) !important;
}

/* RESULT BOX */
#result {
    background: var(--secondary-bg) !important;
    border-color: var(--secondary-border) !important;
    color: var(--text) !important;
}

/* LINK */
.convert-container a {
    color: var(--primary) !important;
}

/* SUCCESS BUTTON */
.btn-success-custom {
    background-color: var(--success) !important;
    color: white !important;
}
.chart-box {
    position: relative;
    height: 350px;
}
/* Hiệu ứng chuyển màu mượt */
body, .convert-container, .modern-input, .modern-select, .modern-submit-btn, #result {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --------------------------- */
/* LIGHT MODE (mặc định)       */
/* --------------------------- */
body {
    background: #f4f6fa;
    color: #000;
}

/* --------------------------- */
/* DARK MODE                   */
/* --------------------------- */
body.dark {
    background: #0f172a;  /* Nền tối chuẩn */
    color: #e2e8f0;
}

/* Container đổi theme */
body.dark .convert-container {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Input + Select */
body.dark .modern-input,
body.dark .modern-select {
    background-color: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

body.dark .modern-input:focus,
body.dark .modern-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.3);
}

/* Nút tính toán */
body.dark .modern-submit-btn {
    background-color: #3b82f6;
}

body.dark .modern-submit-btn:hover {
    background-color: #2563eb;
}

/* Kết quả */
body.dark #result {
    background-color: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

/* Link */
body.dark a {
    color: #60a5fa;
}