@import '_content/IotAndBits.Core/IotAndBits.Core.nwwjfcrsyb.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* --- TỔNG THỂ --- */
/* 1. Đảm bảo Layout chính vẫn giữ nguyên khung 100vh */
.dashboard-root[b-t8h6r5yaw2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* --- NỘI DUNG CHÍNH --- */
.dashboard-body[b-t8h6r5yaw2] {
    flex: 1; /* Tự động chiếm toàn bộ chiều cao còn lại bên dưới Header */
    overflow-y: auto; /* QUAN TRỌNG: Bật cuộn dọc cho nội dung */
    overflow-x: hidden; /* Khóa cuộn ngang để chống vỡ layout */
    /* Đưa padding về 0 để các trang con (như Xem Tuổi) tự quyết định khoảng cách */
    padding: 0;
    /* Xóa display: flex và min-height để trả lại không gian hiển thị tự nhiên cho @Body */
    display: block;
}

/* --- HEADER --- */
.main-header[b-t8h6r5yaw2] {
    height: 60px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 9999999 !important; /* 7 số 9 - Đè lên cả Modal Backdrop của đồ thị */
}

.header-left[b-t8h6r5yaw2] {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo-brand[b-t8h6r5yaw2] {
    font-weight: 800;
    font-size: 1.2rem;
    color: #0d6efd;
    text-decoration: none;
}

/* --- ĐIỀU HƯỚNG (NAV) --- */
.main-nav[b-t8h6r5yaw2] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-group[b-t8h6r5yaw2] {
    position: relative;
}

.nav-btn[b-t8h6r5yaw2], .nav-link[b-t8h6r5yaw2] {
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
}

    .nav-btn:hover[b-t8h6r5yaw2], .nav-link:hover[b-t8h6r5yaw2] {
        color: #0d6efd;
    }

/* Sub-menu Dropdown */
.sub-menu[b-t8h6r5yaw2] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 10px 0;
    z-index: 10000000 !important; /* Mười triệu - Mức ưu tiên tối cao nhất hệ thống */
}

.nav-group.is-open .sub-menu[b-t8h6r5yaw2] {
    display: block;
}

.sub-menu a[b-t8h6r5yaw2] {
    display: block;
    padding: 8px 20px;
    color: #333;
    text-decoration: none;
    font-size: 0.85rem;
}

    .sub-menu a:hover[b-t8h6r5yaw2] {
        background: #f8f9fa;
        color: #0d6efd;
    }



/* --- TRẠNG THÁI --- */
.header-right[b-t8h6r5yaw2] {
    display: flex;
    align-items: center;
}

.status-badge[b-t8h6r5yaw2] {
    font-size: 0.75rem;
    background: #e9ecef;
    padding: 5px 10px;
    border-radius: 20px;
    color: #6c757d;
}

.dot[b-t8h6r5yaw2] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #28a745;
    border-radius: 50%;
    margin-right: 5px;
}
.header-right[b-t8h6r5yaw2] {
    display: flex;
    align-items: center;
    gap: 15px; /* Tạo khoảng cách giữa nút đăng nhập và badge trạng thái */
}

.btn-login[b-t8h6r5yaw2] {
    color: #fff;
    background-color: #007bff; /* Thay màu tùy ý */
    padding: 6px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s;
}

    .btn-login:hover[b-t8h6r5yaw2] {
        background-color: #0056b3;
        color: #fff;
    }
/* /Components/Pages/About.razor.rz.scp.css */
/* --- 1. CONTAINER CHÍNH: QUẢN LÝ CUỘN --- */
.about-main-container[b-4lrwdw7jol] {
    background: #050505;
    height: 100vh;
    width: 100%; /* Dùng 100% để tránh thanh cuộn ngang */
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    /* Font chuẩn đa nền tảng */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Quản lý cuộn */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #1e1e2e #050505;
}

/* --- 2. NỘI DUNG CHÍNH: DẠNG 1 CỘT ĐẸP MẮT --- */
.about-content-inner[b-4lrwdw7jol] {
    position: relative;
    z-index: 1;
    width: 95%;
 
    margin: 0 auto; /* Căn giữa trang */

    display: grid;
    grid-template-columns: 1fr; /* Ép buộc hiển thị 1 cột duy nhất */
    gap: 20px;
}

/* --- 3. CÁC Ô BENTO --- */
.bento-item[b-4lrwdw7jol] {
    background: rgba(15, 15, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(15px);
    transition: 0.3s;
    width: 100%;
    box-sizing: border-box;
}

    .bento-item:hover[b-4lrwdw7jol] {
        border-color: #2962ff;
        box-shadow: 0 0 30px rgba(41, 98, 255, 0.2);
    }

/* --- 4. CẤU HÌNH THANH CUỘN (CHROME/EDGE/SAFARI) --- */
.about-main-container[b-4lrwdw7jol]::-webkit-scrollbar {
    width: 8px;
}

.about-main-container[b-4lrwdw7jol]::-webkit-scrollbar-track {
    background: #050505;
}

.about-main-container[b-4lrwdw7jol]::-webkit-scrollbar-thumb {
    background: #1e1e2e;
    border-radius: 4px;
}

    .about-main-container[b-4lrwdw7jol]::-webkit-scrollbar-thumb:hover {
        background: #2962ff;
    }

/* Các class phụ trợ bác giữ nguyên như cũ để không làm hỏng logic cũ của trang */
.glitch-text[b-4lrwdw7jol] {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(90deg, #fff, #2962ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mega-slogan[b-4lrwdw7jol] {
    color: #2962ff;
    font-size: 1.4rem;
    margin: 15px 0;
}

.tech-pills[b-4lrwdw7jol] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.p-node[b-4lrwdw7jol] {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border-left: 5px solid #444;
}

.contact-grid[b-4lrwdw7jol] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.contact-list[b-4lrwdw7jol] {
    display: flex;
    flex-direction: column; /* Ép hiển thị theo cột dọc */
    gap: 12px; /* Khoảng cách giữa các dòng */
    margin-top: 20px;
}

.c-item[b-4lrwdw7jol] {
    display: flex;
    align-items: center; /* Căn giữa icon và chữ theo chiều dọc */
    font-size: 1rem;
}

    /* Định dạng icon để cách chữ ra một chút */
    .c-item i[b-4lrwdw7jol] {
        width: 25px; /* Cố định chiều rộng icon để chữ thẳng hàng nhau */
        color: #2962ff; /* Màu icon cho đồng bộ */
    }
/* /Components/Pages/BuySignalDashboard.razor.rz.scp.css */
/* Custom CSS cho giao diện PRO (Dark Theme) */
.pro-dashboard[b-h66tsu6k9i] {
    background-color: #121418;
    color: #d1d4dc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    padding: 20px;
}

.pro-card[b-h66tsu6k9i] {
    background-color: #1e222d;
    border: 1px solid #2b313f;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    height: 100%;
}

.pro-header[b-h66tsu6k9i] {
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid #2b313f;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* Các tín hiệu màu sắc */
.text-bullish[b-h66tsu6k9i] {
    color: #00ff88 !important;
}
/* Xanh lá sáng */
.text-bearish[b-h66tsu6k9i] {
    color: #ff4976 !important;
}
/* Đỏ hồng */
.text-neutral[b-h66tsu6k9i] {
    color: #f5a623 !important;
}
/* Vàng cam */

.bg-bullish[b-h66tsu6k9i] {
    background-color: rgba(0, 255, 136, 0.1);
    border: 1px solid #00ff88;
    color: #00ff88;
}

.bg-bearish[b-h66tsu6k9i] {
    background-color: rgba(255, 73, 118, 0.1);
    border: 1px solid #ff4976;
    color: #ff4976;
}

.signal-value[b-h66tsu6k9i] {
    font-size: 1.5rem;
    font-weight: bold;
}

.action-btn[b-h66tsu6k9i] {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 6px;
    transition: all 0.3s;
}

    .action-btn.buy[b-h66tsu6k9i] {
        background: linear-gradient(45deg, #00b050, #00ff88);
        border: none;
        color: #000;
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    }

    .action-btn.wait[b-h66tsu6k9i] {
        background: #2b313f;
        border: 1px solid #4a536b;
        color: #a1a9b8;
    }

/* Bảng dữ liệu */
.pro-table[b-h66tsu6k9i] {
    width: 100%;
    color: #d1d4dc;
}

    .pro-table th[b-h66tsu6k9i] {
        border-bottom: 1px solid #4a536b;
        padding: 12px 8px;
        text-transform: uppercase;
        font-size: 0.85rem;
        color: #787b86;
    }

    .pro-table td[b-h66tsu6k9i] {
        border-bottom: 1px solid #2b313f;
        padding: 12px 8px;
        font-weight: 500;
    }

    .pro-table tbody tr:hover[b-h66tsu6k9i] {
        background-color: #2a2e39;
        cursor: pointer;
    }
/* /Components/Pages/ChangePasswordModal.razor.rz.scp.css */
/* Tổng thể Backdrop với hiệu ứng kính mờ cao cấp */
.iot-modal-backdrop[b-7hwgj5n17y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(6, 12, 24, 0.7); /* Dark background */
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: iotFadeIn 0.4s ease-out;
}

/* Hộp đăng nhập Glassmorphism */
.iot-login-card[b-7hwgj5n17y] {
    background: rgba(17, 25, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    padding: 40px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden; /* Cho hiệu ứng icon nền */
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    animation: iotSlideDown 0.5s ease-out;
}

    /* Border phát sáng tinh tế khi focus hộp */
    .iot-login-card[b-7hwgj5n17y]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00f2fe, #4facfe, transparent);
    }

/* Nút đóng */
.iot-close-btn[b-7hwgj5n17y] {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    z-index: 10;
}

    .iot-close-btn:hover[b-7hwgj5n17y] {
        color: #ff4b5c;
        transform: rotate(90deg);
    }

/* Branding phần Header */
.iot-card-header[b-7hwgj5n17y] {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.iot-tech-icon-wrapper[b-7hwgj5n17y] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iot-bg-icon[b-7hwgj5n17y] {
    font-size: 80px;
    color: rgba(79, 172, 254, 0.1); /* Neon blue very faint */
    position: absolute;
}

.iot-main-icon[b-7hwgj5n17y] {
    font-size: 40px;
    color: #4facfe; /* Neon blue */
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.7);
    z-index: 1;
}

.iot-title[b-7hwgj5n17y] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.text-highlight[b-7hwgj5n17y] {
    color: #00f2fe; /* Cyan/neon blue */
    background: linear-gradient(120deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.iot-subtitle[b-7hwgj5n17y] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 0;
}

/* Form Styles */
.iot-form-group[b-7hwgj5n17y] {
    margin-bottom: 22px;
}

    .iot-form-group label[b-7hwgj5n17y] {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.iot-input-wrapper[b-7hwgj5n17y] {
    position: relative;
    display: flex;
    align-items: center;
}

.iot-input-icon[b-7hwgj5n17y] {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    transition: color 0.3s ease;
}

.iot-input-wrapper input[b-7hwgj5n17y] {
    width: 100%;
    padding: 14px 16px 14px 50px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.3s ease;
}

    .iot-input-wrapper input:focus[b-7hwgj5n17y] {
        outline: none;
        border-color: #4facfe;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
    }

        .iot-input-wrapper input:focus + .iot-input-icon[b-7hwgj5n17y] {
            color: #4facfe;
        }

/* Action row (Check/Link) */
.iot-action-row[b-7hwgj5n17y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Custom Checkbox */
.iot-checkbox-container[b-7hwgj5n17y] {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: rgba(255, 255, 255, 0.7);
}

    .iot-checkbox-container input[b-7hwgj5n17y] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.iot-checkmark[b-7hwgj5n17y] {
    height: 18px;
    width: 18px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.iot-checkbox-container:hover input ~ .iot-checkmark[b-7hwgj5n17y] {
    border-color: #4facfe;
}

.iot-checkbox-container input:checked ~ .iot-checkmark[b-7hwgj5n17y] {
    background-color: #4facfe;
    border-color: #4facfe;
}

.iot-checkmark[b-7hwgj5n17y]::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.iot-checkbox-container input:checked ~ .iot-checkmark[b-7hwgj5n17y]::after {
    display: block;
}

/* Tech Links */
.iot-link-tech[b-7hwgj5n17y] {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

    .iot-link-tech:hover[b-7hwgj5n17y] {
        color: #00f2fe;
        text-shadow: 0 0 5px rgba(0, 242, 254, 0.5);
    }

.iot-link-tech-bold[b-7hwgj5n17y] {
    color: #4facfe;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .iot-link-tech-bold:hover[b-7hwgj5n17y] {
        color: #00f2fe;
        text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
    }

/* Main Submit Button */
.iot-btn-primary[b-7hwgj5n17y] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    border-radius: 12px;
    color: #060c18;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
}

    .iot-btn-primary:hover[b-7hwgj5n17y] {
        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.6);
        transform: translateY(-2px);
    }

    .iot-btn-primary:active[b-7hwgj5n17y] {
        transform: translateY(1px);
    }

/* Footer / Alt Logins */
.iot-card-footer[b-7hwgj5n17y] {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
}

.iot-divider[b-7hwgj5n17y] {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 0.1em;
    margin: 20px 0 30px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
}

    .iot-divider span[b-7hwgj5n17y] {
        background: rgb(17, 25, 40); /* Matches card bg roughly to clear divider */
        padding: 0 15px;
    }

.iot-alternative-logins[b-7hwgj5n17y] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.iot-btn-alt[b-7hwgj5n17y] {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .iot-btn-alt:hover[b-7hwgj5n17y] {
        background: rgba(79, 172, 254, 0.1);
        border-color: #4facfe;
        color: #4facfe;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
    }

.iot-signup-text[b-7hwgj5n17y] {
    color: rgba(255, 255, 255, 0.5);
}

/* Animations */
@@keyframes iotFadeIn {
    from[b-7hwgj5n17y] {
        opacity: 0;
    }

    to[b-7hwgj5n17y] {
        opacity: 1;
    }
}

@@keyframes iotSlideDown {
    from[b-7hwgj5n17y] {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to[b-7hwgj5n17y] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.iot-brand-logo[b-7hwgj5n17y] {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15); /* Đường viền đứt quãng chia tách logo và form */
}

/* Nếu bạn dùng ảnh thật */
.iot-logo-img[b-7hwgj5n17y] {
    max-width: 150px;
    height: auto;
    display: inline-block;
}

/* Nếu dùng Text Logo */
.iot-logo-text[b-7hwgj5n17y] {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

    .iot-logo-text .logo-icon[b-7hwgj5n17y] {
        color: #00f2fe;
        font-size: 28px;
        filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6)); /* Hiệu ứng tỏa sáng cho chip */
    }

    .iot-logo-text .logo-highlight[b-7hwgj5n17y] {
        color: #4facfe;
        font-weight: 400;
    }
/* Đảm bảo khung card là relative */
.iot-login-card[b-7hwgj5n17y] {
    position: relative; /* CHÌA KHÓA: Giúp nút close nằm trong khung này */
    /* ... các thuộc tính khác giữ nguyên ... */
}

/* Nút đóng được canh chuẩn ở góc phải phía trên */
.iot-close-btn[b-7hwgj5n17y] {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

    .iot-close-btn:hover[b-7hwgj5n17y] {
        background: #ff4b5c;
        color: #ffffff;
        transform: rotate(90deg);
    }
/* /Components/Pages/DataGridComponent.razor.rz.scp.css */
.datagrid-wrapper[b-j2carehjpn] {
    margin-top: 1.5rem;
    max-height: none !important;
    height: calc(100vh - 150px) !important;
    /* 🔴 THÊM 2 DÒNG NÀY ĐỂ ÉP THANH CUỘN NGANG HOẠT ĐỘNG */
    max-width: 100vw; /* Đảm bảo wrapper không phình to quá màn hình */
    overflow-x: auto !important;
    overflow-y: auto !important;
    border: 1px solid #1e293b;
    background: #f0ffff;
}

.wpf-grid[b-j2carehjpn] {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0;
    /* 🔴 THỦ THUẬT ÉP BẢNG GIÃN THEO CỘT */
    min-width: 100%;
    width: 0 !important; /* Ép trình duyệt tính chiều rộng bảng bằng tổng các cột th */

    background-color: #f0ffff !important;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* --- TIÊU ĐỀ CỘT (HEADER) --- */
.wpf-header[b-j2carehjpn] {
    background: linear-gradient(180deg, #fafafa 0%, #ededed 50%, #e0e0e0 100%) !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #c8c8c8 !important;
    border-bottom: 1px solid #999999 !important;
    border-top: 1px solid #e5e5e5 !important;
    position: sticky !important;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    user-select: none;
}

    .wpf-header:hover[b-j2carehjpn] {
        background: linear-gradient(180deg, #f0f8ff 0%, #e0f0ff 100%) !important;
        color: #005a9e !important;
    }

.header-content[b-j2carehjpn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.sort-icon[b-j2carehjpn] {
    color: #0078d7;
    font-size: 10px;
}

/* --- DÒNG VÀ Ô DỮ LIỆU --- */
.wpf-row[b-j2carehjpn] {
    background-color: #f0ffff !important; /* Nền dòng màu azure */
    color: #000000 !important;
}

.wpf-cell[b-j2carehjpn] {
    padding: 8px 10px !important;
    font-size: 13px;
    color: #000000 !important; /* Ép chữ màu đen tuyền */
    border-right: 1px solid #b0c4de !important;
    border-bottom: 1px solid #b0c4de !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hiệu ứng hover dòng */
.wpf-row:hover[b-j2carehjpn] {
    background-color: #e0ffff !important; /* Xanh ngọc đậm hơn khi di chuột */
}

/* Làm đẹp thanh Resizer */
.resizer[b-j2carehjpn] {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    z-index: 99999 !important;
    cursor: col-resize !important;
}

    .resizer:hover[b-j2carehjpn] {
        border-right: 2px solid #38bdf8 !important;
    }

.expert-commentary[b-j2carehjpn] {
    background: rgba(15, 15, 20, 0.85);
    border: 1px solid #2962ff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.row-selected[b-j2carehjpn] {
    background-color: rgba(41, 98, 255, 0.15) !important;
    border-left: 4px solid #2962ff;
}

.comment-text[b-j2carehjpn] {
    line-height: 1.6;
    font-size: 1.1rem;
    color: #e0e0e0;
}

    .comment-text strong[b-j2carehjpn] {
        color: #ffc107; /* Màu vàng cho các điểm nhấn quan trọng */
    }

/* --- TÍNH NĂNG KÉO CHIỀU CAO HÀNG (ROW RESIZING) --- */
.row-handle[b-j2carehjpn] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Độ dày vùng kéo */
    cursor: row-resize !important;
    z-index: 100;
    background: transparent;
    transition: background 0.2s;
}

    /* Hiệu ứng khi rê chuột vào mép dưới hàng */
    .row-handle:hover[b-j2carehjpn] {
        background: #0284c7 !important; /* Màu xanh tone sur tone với thanh cuộn */
        opacity: 0.5;
    }

/* Class giúp cell dãn ra khi cần thiết */
.row-wrapped .wpf-cell[b-j2carehjpn] {
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}

/* Đảm bảo ô STT chứa handle luôn có vị trí tương đối */
.wpf-cell:first-child[b-j2carehjpn] {
    position: relative !important;
}

.que-link[b-j2carehjpn] {
    text-decoration: underline;
    color: #0078d7; /* Màu xanh dương đặc trưng */
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s;
}

    .que-link:hover[b-j2carehjpn] {
        color: #005a9e; /* Màu đậm hơn khi hover */
    }

.que-header-compact[b-j2carehjpn] {
    display: flex;
    align-items: center; /* Căn giữa icon và chữ theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa icon và chữ */
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.que-icon-small[b-j2carehjpn] {
    transform: scale(0.6); /* Thu nhỏ icon lại nếu cần */
    transform-origin: left center;
}
/* /Components/Pages/FengShuiHouse.razor.rz.scp.css */

.fengshui-container[b-0k480ns20k] {
    height: auto !important;
    overflow-y: visible !important;
}


/* Tắt thanh cuộn mặc định của trình duyệt để tránh bị cuộn 2 lần */
html[b-0k480ns20k], body[b-0k480ns20k] {
    height: 100%;
    overflow: hidden; /* Khóa thanh cuộn trình duyệt */
    background-color: #f5f5f5 !important; /* Trắng sáng Alice Blue */
    color: #4b3621 !important; /* Nâu đậm chủ đạo */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Đây là 'Canvas' cuộn của chúng ta */
.page-scroll-canvas[b-0k480ns20k] {
    height: 100vh; /* Chiều cao bằng đúng màn hình */
    overflow-y: auto; /* Chỉ thanh cuộn này hoạt động */
    width: 100%;
    padding-bottom: 50px; /* Tạo khoảng trống ở dưới cùng */
    scrollbar-width: thin; /* Làm thanh cuộn gọn gàng */
    /* CẬP NHẬT NỀN AZURE TẠI ĐÂY */
    background-color: #f5f5f5 !important;
}

    /* Tùy chỉnh thanh cuộn cho Canvas */
    .page-scroll-canvas[b-0k480ns20k]::-webkit-scrollbar {
        width: 10px;
    }

    .page-scroll-canvas[b-0k480ns20k]::-webkit-scrollbar-track {
        background: #e6ffff; /* Track nhạt hơn một chút */
    }

    .page-scroll-canvas[b-0k480ns20k]::-webkit-scrollbar-thumb {
        background: #a0aec0; /* Màu xám chì cho thanh cuộn */
        border-radius: 5px;
        border: 2px solid #e6ffff; /* Tạo viền cho thanh cuộn */
    }


.header-subtitle[b-0k480ns20k] {
    color: #6c757d;
}

/* --- LƯỚI MA TRẬN LẠC THƯ (LUOSHU GRID) --- */
.luoshu-grid[b-0k480ns20k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 420px;
    margin: 20px auto;
}

/* --- TỪNG Ô CUNG VỊ --- */
.luoshu-cell[b-0k480ns20k] {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

    /* Hiệu ứng di chuột vào ô */
    .luoshu-cell:hover[b-0k480ns20k] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }

/* --- PHÂN BỔ SAO TRONG Ô --- */
/* Góc trên trái: Sơn Tinh (Tọa) */
.mountain-star[b-0k480ns20k] {
    position: absolute;
    top: 8px;
    left: 10px;
    font-weight: 800;
    color: #4a5568;
    font-size: 1.1rem;
}

/* Góc trên phải: Hướng Tinh (Cửa) */
.water-star[b-0k480ns20k] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-weight: 800;
    color: #e53e3e; /* Đỏ cho Hướng */
    font-size: 1.1rem;
}

/* Chính giữa: Vận Tinh (To nhất) */
.time-star[b-0k480ns20k] {
    font-size: 2.2rem;
    font-weight: 900;
    color: #cbd5e0;
    line-height: 1;
    margin-top: 5px;
}

/* Tên cung phía dưới */
.palace-name[b-0k480ns20k] {
    position: absolute;
    bottom: 8px;
    font-size: 0.7rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- HIỆU ỨNG TRẠNG THÁI --- */
/* Ô Hướng (Được tô đỏ) */
.active-palace[b-0k480ns20k] {
    background-color: #fff5f5 !important;
    border-color: #fc8181 !important;
}

/* Ô Tọa (Được tô xanh) */
.border-primary[b-0k480ns20k] {
    border-color: #4299e1 !important;
    background-color: #ebf8ff !important;
}

/* --- CÁC THÀNH PHẦN BỔ TRỢ --- */
.bg-soft-success[b-0k480ns20k] {
    background-color: #f0fff4 !important;
}

.bg-soft-danger[b-0k480ns20k] {
    background-color: #fff5f5 !important;
}

.bg-soft-warning[b-0k480ns20k] {
    background-color: #fffff0 !important;
}

.bg-soft-secondary[b-0k480ns20k] {
    background-color: #f7fafc !important;
}

/* Tạo cảm giác sang trọng cho card kết quả */
.card[b-0k480ns20k] {
    border-radius: 15px;
}

.nav-tabs .nav-link[b-0k480ns20k] {
    color: #4a5568;
    border: none !important;
    border-bottom: 3px solid transparent !important;
}

    .nav-tabs .nav-link.active[b-0k480ns20k] {
        color: #3182ce !important;
        border-bottom: 3px solid #3182ce !important;
    }

/* --- BÌNH GIẢI: ĐỒNG BỘ MÀU VỚI CỬU CUNG TINH BÀN --- */

/* 1. Tiêu đề mục Bình giải: Dùng màu text-primary (Blue) để đồng bộ */
.binh-giai-container h5[b-0k480ns20k] {
    color: var(--bs-primary) !important; /* Sử dụng biến màu chủ đạo của hệ thống */
    font-weight: 800 !important;
    text-transform: uppercase; /* Làm tiêu đề trông sang trọng hơn */
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
}

/* 2. Nội dung văn bản Bình giải: Xanh đậm sắc nét (Đảm bảo độ nổi) */
.binh-giai-container li[b-0k480ns20k] {
    color: #1e3a8a !important; /* Xanh đậm chuyên gia, rất nổi trên nền Alice Blue */
    font-weight: 600 !important;
    font-size: 1rem;
    line-height: 1.6;
}

/* 3. Hiệu ứng hover cho section để tăng trải nghiệm */
.section-block[b-0k480ns20k] {
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .section-block:hover[b-0k480ns20k] {
        background-color: #f0f7ff; /* Nền xanh siêu nhạt khi di chuột vào */
        border-left: 4px solid var(--bs-primary); /* Tạo điểm nhấn bên trái */
    }

/* --- ÉP MÀU XANH ĐEN CHO LI CÓ CLASS MB-1 TRONG BÌNH GIẢI --- */
.binh-giai-container li.mb-1[b-0k480ns20k] {
    color: #000000 !important; /* Sử dụng biến màu chủ đạo của hệ thống */
    font-weight: 500 !important;
}





/* --- FOOTER MÀU NÂU ẤM --- */
footer p[b-0k480ns20k] {
    color: #8b4513 !important; /* Màu nâu SaddleBrown - Nổi bật trên nền Azure */
    font-weight: 700 !important;
}

    footer p.text-muted[b-0k480ns20k] {
        color: #a0522d !important; /* Nâu Sienna - Dịu hơn cho dòng thứ 2 */
    }
/* /Components/Pages/ForgotPasswordModal.razor.rz.scp.css */
/* Tổng thể Backdrop với hiệu ứng kính mờ cao cấp */
.iot-modal-backdrop[b-3ahebl7bl4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(6, 12, 24, 0.7); /* Dark background */
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: iotFadeIn 0.4s ease-out;
}

/* Hộp đăng nhập Glassmorphism */
.iot-login-card[b-3ahebl7bl4] {
    background: rgba(17, 25, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    padding: 40px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden; /* Cho hiệu ứng icon nền */
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    animation: iotSlideDown 0.5s ease-out;
}

    /* Border phát sáng tinh tế khi focus hộp */
    .iot-login-card[b-3ahebl7bl4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00f2fe, #4facfe, transparent);
    }

/* Nút đóng */
.iot-close-btn[b-3ahebl7bl4] {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    z-index: 10;
}

    .iot-close-btn:hover[b-3ahebl7bl4] {
        color: #ff4b5c;
        transform: rotate(90deg);
    }

/* Branding phần Header */
.iot-card-header[b-3ahebl7bl4] {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.iot-tech-icon-wrapper[b-3ahebl7bl4] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iot-bg-icon[b-3ahebl7bl4] {
    font-size: 80px;
    color: rgba(79, 172, 254, 0.1); /* Neon blue very faint */
    position: absolute;
}

.iot-main-icon[b-3ahebl7bl4] {
    font-size: 40px;
    color: #4facfe; /* Neon blue */
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.7);
    z-index: 1;
}

.iot-title[b-3ahebl7bl4] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.text-highlight[b-3ahebl7bl4] {
    color: #00f2fe; /* Cyan/neon blue */
    background: linear-gradient(120deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.iot-subtitle[b-3ahebl7bl4] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 0;
}

/* Form Styles */
.iot-form-group[b-3ahebl7bl4] {
    margin-bottom: 22px;
}

    .iot-form-group label[b-3ahebl7bl4] {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.iot-input-wrapper[b-3ahebl7bl4] {
    position: relative;
    display: flex;
    align-items: center;
}

.iot-input-icon[b-3ahebl7bl4] {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    transition: color 0.3s ease;
}

.iot-input-wrapper input[b-3ahebl7bl4] {
    width: 100%;
    padding: 14px 16px 14px 50px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.3s ease;
}

    .iot-input-wrapper input:focus[b-3ahebl7bl4] {
        outline: none;
        border-color: #4facfe;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
    }

        .iot-input-wrapper input:focus + .iot-input-icon[b-3ahebl7bl4] {
            color: #4facfe;
        }

/* Action row (Check/Link) */
.iot-action-row[b-3ahebl7bl4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Custom Checkbox */
.iot-checkbox-container[b-3ahebl7bl4] {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: rgba(255, 255, 255, 0.7);
}

    .iot-checkbox-container input[b-3ahebl7bl4] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.iot-checkmark[b-3ahebl7bl4] {
    height: 18px;
    width: 18px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.iot-checkbox-container:hover input ~ .iot-checkmark[b-3ahebl7bl4] {
    border-color: #4facfe;
}

.iot-checkbox-container input:checked ~ .iot-checkmark[b-3ahebl7bl4] {
    background-color: #4facfe;
    border-color: #4facfe;
}

.iot-checkmark[b-3ahebl7bl4]::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.iot-checkbox-container input:checked ~ .iot-checkmark[b-3ahebl7bl4]::after {
    display: block;
}

/* Tech Links */
.iot-link-tech[b-3ahebl7bl4] {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

    .iot-link-tech:hover[b-3ahebl7bl4] {
        color: #00f2fe;
        text-shadow: 0 0 5px rgba(0, 242, 254, 0.5);
    }

.iot-link-tech-bold[b-3ahebl7bl4] {
    color: #4facfe;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .iot-link-tech-bold:hover[b-3ahebl7bl4] {
        color: #00f2fe;
        text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
    }

/* Main Submit Button */
.iot-btn-primary[b-3ahebl7bl4] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    border-radius: 12px;
    color: #060c18;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
}

    .iot-btn-primary:hover[b-3ahebl7bl4] {
        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.6);
        transform: translateY(-2px);
    }

    .iot-btn-primary:active[b-3ahebl7bl4] {
        transform: translateY(1px);
    }

/* Footer / Alt Logins */
.iot-card-footer[b-3ahebl7bl4] {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
}

.iot-divider[b-3ahebl7bl4] {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 0.1em;
    margin: 20px 0 30px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
}

    .iot-divider span[b-3ahebl7bl4] {
        background: rgb(17, 25, 40); /* Matches card bg roughly to clear divider */
        padding: 0 15px;
    }

.iot-alternative-logins[b-3ahebl7bl4] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.iot-btn-alt[b-3ahebl7bl4] {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .iot-btn-alt:hover[b-3ahebl7bl4] {
        background: rgba(79, 172, 254, 0.1);
        border-color: #4facfe;
        color: #4facfe;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
    }

.iot-signup-text[b-3ahebl7bl4] {
    color: rgba(255, 255, 255, 0.5);
}

/* Animations */
@@keyframes iotFadeIn {
    from[b-3ahebl7bl4] {
        opacity: 0;
    }

    to[b-3ahebl7bl4] {
        opacity: 1;
    }
}

@@keyframes iotSlideDown {
    from[b-3ahebl7bl4] {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to[b-3ahebl7bl4] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.iot-instruction-text[b-3ahebl7bl4] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 242, 254, 0.05);
    border: 1px solid rgba(0, 242, 254, 0.1);
    border-radius: 12px;
}
/* /Components/Pages/Fundamental.razor.rz.scp.css */
.fundamental-container[b-rxizxgnlxj] {
    padding: 20px;
    font-family: sans-serif;
}

.page-title[b-rxizxgnlxj] {
    color: #2c3e50;
}

.search-box[b-rxizxgnlxj] {
    margin-bottom: 20px;
}

    .search-box input[b-rxizxgnlxj] {
        padding: 8px;
        width: 250px;
    }

    .search-box button[b-rxizxgnlxj] {
        padding: 8px 16px;
        background: #007bff;
        color: white;
        border: none;
        cursor: pointer;
    }

.dashboard-grid[b-rxizxgnlxj] {
    display: flex;
    gap: 20px;
}

.widget-card[b-rxizxgnlxj] {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.loading-spinner[b-rxizxgnlxj] {
    color: #007bff;
    font-weight: bold;
}

.chart-box[b-rxizxgnlxj] {
    height: 150px;
    background: #f8f9fa;
    border: 1px dashed #aaa;
    text-align: center;
    padding-top: 50px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.dashboard-grid-container[b-jweowqozbb] {
    display: grid;
    /* Chia 2 cột: Cột 1 (Lịch) chiếm 65%, Cột 2 chiếm 35% */
    grid-template-columns: 65% 35%;
    /* Chia 2 hàng bằng nhau hoặc tùy chỉnh */
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    height: calc(100vh - 20px); /* Full màn hình trừ lề */
    padding: 10px;
    background-color: #020617;
    box-sizing: border-box;
}

/* --- LOGIC MERGE CỦA BÁC --- */
.calendar-area[b-jweowqozbb] {
    grid-column: 1;
    grid-row: 1 / span 2; /* MERGE: Bắt đầu hàng 1 và kéo dài qua hàng 2 */
}

.tide-area[b-jweowqozbb] {
    grid-column: 2;
    grid-row: 1; /* Ô (1,2) */
}

.orbital-area[b-jweowqozbb] {
    grid-column: 2;
    grid-row: 2; /* Ô (2,2) */
}

/* --- STYLE CHUNG CHO CÁC Ô --- */
.grid-item[b-jweowqozbb] {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.widget-header[b-jweowqozbb] {
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 15px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.widget-content[b-jweowqozbb] {
    flex-grow: 1;
    position: relative;
    overflow-y: auto; /* Nếu nội dung quá dài thì hiện scroll nội bộ */
}

/* --- ĐIỀU CHỈNH KÍCH THƯỚC NỘI BỘ ::DEEP --- */

.calendar-area[b-jweowqozbb]  .mini-cal-wrapper {
    height: 100% !important;
    padding: 15px !important;
    background: transparent !important;
}

.orbital-area[b-jweowqozbb]  .orbital-viewer-main {
    height: 100% !important;
}
/* /Components/Pages/IotDashboard.razor.rz.scp.css */
.bento-item[b-1vx7zu37z1] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .bento-item:hover[b-1vx7zu37z1] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(41, 98, 255, 0.15) !important;
        border-color: #2962ff !important;
    }
/* /Components/Pages/LapLaSoBatTu.razor.rz.scp.css */
/* 1. Đảm bảo layout chính không bị tràn và có cấu trúc sạch */
.dashboard-root[b-v6c3zqnfg9] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Cần thiết để các thành phần con không làm tràn trang */
}

.dashboard-body[b-v6c3zqnfg9] {
    flex: 1;
    overflow: hidden; /* Tránh tạo thêm thanh cuộn cho toàn trang */
    display: flex;
}

/* 2. Ép Modal đè lên mọi thứ với z-index cao và căn giữa chuẩn */
.modal-overlay[b-v6c3zqnfg9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center; /* Căn giữa dọc */
    justify-content: center; /* Căn giữa ngang */
    z-index: 9999; /* Đảm bảo cao nhất */
}

.modal-content-custom[b-v6c3zqnfg9] {
    background: white;
    width: 90%;
    max-width: 900px;
    max-height: 85vh; /* Giới hạn chiều cao để không bị tràn */
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* Ép Modal hiển thị đè lên mọi container cha */
.modal-overlay-custom[b-v6c3zqnfg9] {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important; /* Giá trị cao nhất */
    background-color: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}



/* Chỉ tập trung thanh cuộn vào đúng nơi cần thiết */
.modal-content-custom[b-v6c3zqnfg9] {
    background: white;
    width: 90%;
    max-width: 1000px;
    max-height: 85vh; /* Chiều cao tối đa toàn Modal */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex; /* Quan trọng để flex-grow hoạt động */
    flex-direction: column;
    overflow: hidden; /* Không cuộn toàn bộ Modal */
}

.modal-body-scrollable[b-v6c3zqnfg9] {
    overflow-y: auto; /* Chỉ cuộn phần body */
    flex-grow: 1;
}

/* Đảm bảo nội dung luận giải không bị mất chiều cao */
.analysis-container[b-v6c3zqnfg9] {
    display: block;
    padding: 10px;
}
.modal-body-scrollable[b-v6c3zqnfg9] {
    -webkit-overflow-scrolling: touch; /* Hỗ trợ cuộn mượt trên mobile/trình duyệt */
    scrollbar-width: thin; /* Làm thanh cuộn rõ hơn */
}

.analysis-wrapper[b-v6c3zqnfg9] {
    display: block !important;
    width: 100%;
    height: auto !important; /* Ép tự giãn theo nội dung */
    min-height: min-content; /* Luôn đủ cao để chứa nội dung */
    overflow: visible !important; /* KHÔNG CẮT NỘI DUNG */
    padding-bottom: 20px;
}

    /* Đảm bảo các thẻ p bên trong ToMarkupString không bị gò bó */
    .analysis-wrapper p[b-v6c3zqnfg9] {
        margin-bottom: 0.5rem !important;
        white-space: normal;
    }
/* /Components/Pages/LichChonNgayTot.razor.rz.scp.css */
/* Container chính */


/* Container chính */
.management-container[b-s18pxuq42y] {
    padding: 1rem;
    background-color: #020617; /* Dark mode sâu */
    height: 100vh; /* Chốt chiều cao bằng đúng cửa sổ trình duyệt */
    /* SỬA LẠI THÀNH HIDDEN: Ngăn cuộn toàn trang, nhường việc cuộn cho thẻ chứa bảng */
    overflow-y: hidden;
    overflow-x: hidden;
    /* Bổ sung Flexbox để quản lý chiều cao tự động */
    display: flex;
    flex-direction: column;
}

    /* --- TÙY CHỈNH THANH CUỘN (SCROLLBAR) CHO MƯỢT & CHUYÊN NGHIỆP --- */
    .management-container[b-s18pxuq42y]::-webkit-scrollbar,
    .datagrid-wrapper[b-s18pxuq42y]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .management-container[b-s18pxuq42y]::-webkit-scrollbar-track,
    .datagrid-wrapper[b-s18pxuq42y]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .management-container[b-s18pxuq42y]::-webkit-scrollbar-thumb,
    .datagrid-wrapper[b-s18pxuq42y]::-webkit-scrollbar-thumb {
        background: #0284c7; /* Màu xanh tone sur tone với nút XÁC NHẬN */
        border-radius: 4px;
    }

        .management-container[b-s18pxuq42y]::-webkit-scrollbar-thumb:hover,
        .datagrid-wrapper[b-s18pxuq42y]::-webkit-scrollbar-thumb:hover {
            background: #38bdf8;
        }

/* Form Layout ngang */
.dynamic-form-grid[b-s18pxuq42y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Chia đều lưới nhập liệu */
    gap: 1rem 2.5rem;
    padding: 1.5rem;
    background: #f0ffff;
    border: 1px solid #1e293b;
    border-radius: 4px;
}

.azure-theme .form-group[b-s18pxuq42y] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 0;
}

    .azure-theme .form-group label[b-s18pxuq42y] {
        margin-bottom: 4px !important;
        font-size: 0.85rem;
        color: #004578 !important; /* Chỉnh lại màu chữ xanh đậm cho dễ nhìn trên nền sáng */
        font-weight: 600;
    }

    .azure-theme .form-group:focus-within label[b-s18pxuq42y] {
        color: #0078d7 !important;
        transition: all 0.2s ease;
    }

/* Định dạng Input & Select */
.form-control[b-s18pxuq42y] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #004578;
    color: #000000;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

    .form-control:focus[b-s18pxuq42y] {
        border-color: #38bdf8;
        outline: none;
        box-shadow: 0 0 0 1px #38bdf8;
    }

.btn[b-s18pxuq42y] {
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-save[b-s18pxuq42y] {
    background: #0284c7;
    color: white;
}

    .btn-save:hover[b-s18pxuq42y] {
        background: #0369a1;
    }

/* --- TỔNG THỂ BẢNG WPF/EXCEL --- */
.datagrid-wrapper[b-s18pxuq42y] {
    margin-top: 1.5rem;
    margin-bottom: 1rem; /* Thêm chút lề dưới thay cho khoảng trống của container */
    /* BỎ max-height: 55vh; */
    /* max-height: 55vh; <-- Xóa dòng này đi */
    /* Bổ sung flex-grow để bảng tự dãn chiếm hết chỗ trống còn lại trên màn hình */
    flex-grow: 1;
    min-height: 0; /* Bắt buộc phải có để Flexbox không bị tràn */

    overflow: auto;
    border: 1px solid #1e293b;
    background: #f0ffff;
}

.wpf-grid[b-s18pxuq42y] {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    background-color: #f0ffff !important;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* --- TIÊU ĐỀ CỘT (HEADER) --- */
.wpf-header[b-s18pxuq42y] {
    background: linear-gradient(180deg, #fafafa 0%, #ededed 50%, #e0e0e0 100%) !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #c8c8c8 !important;
    border-bottom: 1px solid #999999 !important;
    border-top: 1px solid #e5e5e5 !important;
    position: sticky !important;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    user-select: none;
}

    .wpf-header:hover[b-s18pxuq42y] {
        background: linear-gradient(180deg, #f0f8ff 0%, #e0f0ff 100%) !important;
        color: #005a9e !important;
    }

.header-content[b-s18pxuq42y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.sort-icon[b-s18pxuq42y] {
    color: #0078d7;
    font-size: 10px;
}

/* --- DÒNG VÀ Ô DỮ LIỆU --- */
.wpf-row[b-s18pxuq42y] {
    background-color: #f0ffff !important; /* Nền dòng màu azure */
    color: #000000 !important;
}

.wpf-cell[b-s18pxuq42y] {
    padding: 8px 10px !important;
    font-size: 13px;
    color: #000000 !important; /* Ép chữ màu đen tuyền */
    border-right: 1px solid #b0c4de !important;
    border-bottom: 1px solid #b0c4de !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hiệu ứng hover dòng */
.wpf-row:hover[b-s18pxuq42y] {
    background-color: #e0ffff !important; /* Xanh ngọc đậm hơn khi di chuột */
}

/* Làm đẹp thanh Resizer */
.resizer[b-s18pxuq42y] {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    z-index: 99999 !important;
    cursor: col-resize !important;
}

    .resizer:hover[b-s18pxuq42y] {
        border-right: 2px solid #38bdf8 !important;
    }

.expert-commentary[b-s18pxuq42y] {
    background: rgba(15, 15, 20, 0.85);
    border: 1px solid #2962ff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.row-selected[b-s18pxuq42y] {
    background-color: rgba(41, 98, 255, 0.15) !important;
    border-left: 4px solid #2962ff;
}

.comment-text[b-s18pxuq42y] {
    line-height: 1.6;
    font-size: 1.1rem;
    color: #e0e0e0;
}

    .comment-text strong[b-s18pxuq42y] {
        color: #ffc107; /* Màu vàng cho các điểm nhấn quan trọng */
    }


/* --- TÍNH NĂNG KÉO CHIỀU CAO HÀNG (ROW RESIZING) --- */
.row-handle[b-s18pxuq42y] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Độ dày vùng kéo */
    cursor: row-resize !important;
    z-index: 100;
    background: transparent;
    transition: background 0.2s;
}

    /* Hiệu ứng khi rê chuột vào mép dưới hàng */
    .row-handle:hover[b-s18pxuq42y] {
        background: #0284c7 !important; /* Màu xanh tone sur tone với thanh cuộn */
        opacity: 0.5;
    }

/* Class giúp cell dãn ra khi cần thiết */
.row-wrapped .wpf-cell[b-s18pxuq42y] {
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}

/* Đảm bảo ô STT chứa handle luôn có vị trí tương đối */
.wpf-cell:first-child[b-s18pxuq42y] {
    position: relative !important;
}
.que-link[b-s18pxuq42y] {
    text-decoration: underline;
    color: #0078d7; /* Màu xanh dương đặc trưng */
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s;
}

    .que-link:hover[b-s18pxuq42y] {
        color: #005a9e; /* Màu đậm hơn khi hover */
    }
.que-header-compact[b-s18pxuq42y] {
    display: flex;
    align-items: center; /* Căn giữa icon và chữ theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa icon và chữ */
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.que-icon-small[b-s18pxuq42y] {
    transform: scale(0.6); /* Thu nhỏ icon lại nếu cần */
    transform-origin: left center;
}
/* /Components/Pages/Listedcompanies.razor.rz.scp.css */
/* Container chính */
.management-container[b-zzjc0zxrh4] {
    padding: 1rem;
    background-color: #020617; /* Dark mode sâu */
    min-height: 100vh;
}

/* Form Layout ngang */
.dynamic-form-grid[b-zzjc0zxrh4] {
    display: grid;
    gap: 1rem 2.5rem;
    padding: 1.5rem;
    background: #f0ffff;
    border: 1px solid #1e293b;
    border-radius: 4px;
}

.azure-theme .form-group[b-zzjc0zxrh4] {
    display: flex;
    flex-direction: column; /* Xếp Label ở trên, Input ở dưới */
    justify-content: flex-end; /* Ép các Input nằm thẳng hàng ngang với nhau ở đáy */
    margin-bottom: 0; /* Không cần margin vì đã có gap của Grid cha lo rồi */
}

    /* Ép khoảng cách giữa Label và Input cho chuẩn */
    .azure-theme .form-group label[b-zzjc0zxrh4] {
        margin-bottom: 4px !important;
        font-size: 0.85rem; /* Thu nhỏ label lại một chút cho thanh lịch */
        color: #e0f2fe !important; /* Xanh ngọc siêu nhạt, dịu mắt hơn màu trắng tinh */
    }

    /* Hiệu ứng focus (khi click vào ô nhập liệu) */
    .azure-theme .form-group:focus-within label[b-zzjc0zxrh4] {
        color: #ffffff !important; /* Khi đang gõ ở ô nào, chữ của ô đó sẽ sáng rực lên */
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Sáng bóng chữ */
        transition: all 0.2s ease;
    }

.form-row[b-zzjc0zxrh4] {
    display: flex;
    align-items: center;
}

.field-label[b-zzjc0zxrh4] {
    flex: 0 0 35%; /* Nhãn bên trái 35% */
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    padding-right: 10px;
}

.field-input[b-zzjc0zxrh4] {
    flex: 1; /* Ô nhập chiếm 65% còn lại */
}

/* Định dạng Input & Select */
.form-control[b-zzjc0zxrh4] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #004578;
    color: #000000;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

    .form-control:focus[b-zzjc0zxrh4] {
        border-color: #38bdf8;
        outline: none;
        box-shadow: 0 0 0 1px #38bdf8;
    }

    .form-control[readonly][b-zzjc0zxrh4] {
        background-color: #1e293b;
        color: #64748b;
        cursor: not-allowed;
    }

/* WPF DataGrid Style */
.datagrid-wrapper[b-zzjc0zxrh4] {
    margin-top: 1.5rem;
    height: 400px;
    overflow: auto;
    border: 1px solid #1e293b;
    background: #0f172a;
}

.wpf-datagrid[b-zzjc0zxrh4] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

    .wpf-datagrid thead th[b-zzjc0zxrh4] {
        position: sticky;
        top: 0;
        background: #1e293b;
        color: #38bdf8;
        padding: 12px;
        z-index: 10;
        border-bottom: 2px solid #334155;
        text-transform: uppercase;
        font-size: 0.75rem;
    }

    .wpf-datagrid tbody td[b-zzjc0zxrh4] {
        padding: 8px 12px;
        border-bottom: 1px solid #1e293b;
        color: #cbd5e1;
    }

    .wpf-datagrid tbody tr:hover[b-zzjc0zxrh4] {
        background-color: rgba(56, 189, 248, 0.1);
        cursor: pointer;
    }

/* Các lớp tiện ích */
.numeric[b-zzjc0zxrh4] {
    font-family: 'Consolas', monospace;
    color: #22c55e;
}

.form-actions-bar[b-zzjc0zxrh4] {
    padding: 1rem 1.5rem;
    background: #0f172a;
    border-top: none;
    display: flex;
    gap: 10px;
}

.btn[b-zzjc0zxrh4] {
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-save[b-zzjc0zxrh4] {
    background: #0284c7;
    color: white;
}

    .btn-save:hover[b-zzjc0zxrh4] {
        background: #0369a1;
    }

.btn-cancel[b-zzjc0zxrh4] {
    background: #475569;
    color: white;
}

.grid-action-btn[b-zzjc0zxrh4] {
    background: transparent;
    border: none;
    color: #38bdf8;
    cursor: pointer;
}
/* Hiệu ứng khi rê chuột và chọn dòng */
.row-item[b-zzjc0zxrh4] {
    cursor: pointer;
    transition: all 0.2s ease;
}

    .row-item:hover[b-zzjc0zxrh4] {
        background-color: rgba(0, 123, 255, 0.05); /* Màu xanh nhạt khi hover */
    }

.selected-row[b-zzjc0zxrh4] {
    background-color: #e3f2fd !important; /* Màu xanh nền khi được chọn */
    border-left: 4px solid #007bff; /* Vạch xanh bên trái để nhấn mạnh */
    font-weight: 500;
}

/* Định dạng số cho chuyên nghiệp */
.numeric[b-zzjc0zxrh4] {
    font-family: 'Roboto Mono', monospace;
    color: #2c3e50;
}
/* Style cho Header kiểu WPF/Excel */
.wpf-header[b-zzjc0zxrh4] {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Gradient xám nhạt chuyên nghiệp */
    background: linear-gradient(to bottom, #fdfdfd 0%, #eeeeee 50%, #e0e0e0 100%);
    color: #333;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #999;
    white-space: nowrap;
    /* Đổ bóng nhẹ phía dưới khi cuộn 7000 dòng */
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.15);
    text-align: center;
    user-select: none;
}

    .wpf-header:hover[b-zzjc0zxrh4] {
        background: linear-gradient(to bottom, #eef5fb 0%, #d8e6f2 100%);
        color: #0056b3;
    }

.header-content[b-zzjc0zxrh4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sort-icon[b-zzjc0zxrh4] {
    color: #aaa;
    font-size: 10px;
}

/* Style cho các ô dữ liệu Cell */
.wpf-cell[b-zzjc0zxrh4] {
    padding: 3px 8px;
    font-size: 13px;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hiệu ứng dòng khi di chuyển chuột */
.wpf-row:hover[b-zzjc0zxrh4] {
    background-color: #f2f7ff !important;
}

/* Hiệu ứng dòng được chọn - Màu vàng nhạt đặc trưng của Excel */
.selected-row[b-zzjc0zxrh4] {
    background-color: #fff2cc !important; /* Vàng Excel */
    outline: 1px solid #ffbf00;
    font-weight: 500;
}

/* Nút bấm Edit tinh tế */
.btn-edit-action[b-zzjc0zxrh4] {
    background: transparent;
    border: none;
    color: #0078d7;
    transition: transform 0.1s;
    cursor: pointer;
}

    .btn-edit-action:hover[b-zzjc0zxrh4] {
        transform: scale(1.2);
        color: #005a9e;
    }


/* 2. Tạo cái "que" bằng CSS trước để đảm bảo nó luôn tồn tại */
.resizer[b-zzjc0zxrh4] {
    position: absolute;
    top: 0;
    right: -5px; /* Nằm chính giữa vạch kẻ */
    width: 10px; /* Vùng bắt chuột rộng 10px */
    height: 100%;
    z-index: 99999 !important; /* Ép lên cao nhất màn hình */
    cursor: col-resize !important; /* ÉP CHUỘT ĐỔI HÌNH DẠNG */
    /* Bác tạm để màu đỏ này, khi nào thấy nó hiện lên và kéo được thì xóa đi */
    background-color: rgba(255, 0, 0, 0.3);
}

    .resizer:hover[b-zzjc0zxrh4], .resizing[b-zzjc0zxrh4] {
        border-right: 3px solid #38bdf8 !important;
    }


/* Đảm bảo khung ngoài cùng cho phép cuộn ngang */
.table-responsive[b-zzjc0zxrh4] {
    overflow: auto !important;
    width: 100%;
}


/* --- TIÊU ĐỀ CỘT (HEADER) - CHUẨN WPF/EXCEL --- */
.wpf-header[b-zzjc0zxrh4] {
    /* Đổ bóng Gradient từ trắng xám xuống xám nhạt */
    background: linear-gradient(180deg, #fafafa 0%, #ededed 50%, #e0e0e0 100%) !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    text-align: center;
    white-space: nowrap;
    /* Đường kẻ phân cách */
    border-right: 1px solid #c8c8c8 !important; /* Viền dọc phân cách cột */
    border-bottom: 1px solid #999999 !important; /* Viền đáy đậm hơn tạo độ khối */
    border-top: 1px solid #e5e5e5 !important;
    /* Giữ header đứng im khi cuộn dọc */
    position: sticky !important;
    top: 0;
    z-index: 10;
    /* Hiệu ứng đổ bóng nhẹ xuống dữ liệu bên dưới */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    user-select: none; /* Không cho bôi đen chữ */
}

    /* Hiệu ứng khi rê chuột vào tiêu đề cột (như Excel) */
    .wpf-header:hover[b-zzjc0zxrh4] {
        background: linear-gradient(180deg, #f0f8ff 0%, #e0f0ff 100%) !important;
        color: #005a9e !important;
    }

/* Nội dung bên trong tiêu đề (chứa chữ và icon sort) */
.header-content[b-zzjc0zxrh4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Ô DỮ LIỆU (CELLS) --- */
.wpf-cell[b-zzjc0zxrh4] {
    padding: 5px 10px !important;
    font-size: 13px;
    color: #202124;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Nếu chữ dài quá thì hiện ... */
}

/* Hiệu ứng hover dòng (Zebra/Hover) */
.wpf-row:hover[b-zzjc0zxrh4] {
    background-color: #f2f7ff !important;
}
/* --- TỔNG THỂ BẢNG --- */
.wpf-grid[b-zzjc0zxrh4] {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    background-color: #f0ffff !important; /* NỀN AZURE CHO TOÀN BẢNG */
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* --- DÒNG VÀ Ô DỮ LIỆU (Nền Azure, Chữ Đen) --- */
.wpf-row[b-zzjc0zxrh4] {
    background-color: #f0ffff !important; /* Nền dòng màu azure */
    color: #000000 !important; /* Chữ màu đen tuyền */
}

.wpf-cell[b-zzjc0zxrh4] {
    padding: 5px 10px !important;
    font-size: 13px;
    color: #000000 !important; /* Ép chữ đen */
    /* Đổi màu viền sang xanh dương xám (LightSteelBlue) cho tone-sur-tone với nền Azure */
    border-right: 1px solid #b0c4de !important;
    border-bottom: 1px solid #b0c4de !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- HIỆU ỨNG CHUỘT (Hover) --- */
/* Đổi sang màu xanh nhạt hơn (LightCyan) để nhận biết đang di chuột */
.wpf-row:hover[b-zzjc0zxrh4] {
    background-color: #e0ffff !important;
}

/* Dòng đang được chọn (Highlight) - Vẫn giữ màu vàng hoặc bác có thể đổi tùy ý */
.selected-row[b-zzjc0zxrh4] {
    background-color: #fff2cc !important;
    border-left: 3px solid #ffbf00 !important;
}
/* /Components/Pages/LoginModal.razor.rz.scp.css */
/* Tổng thể Backdrop với hiệu ứng kính mờ cao cấp */
.iot-modal-backdrop[b-olcezedguz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(6, 12, 24, 0.7); /* Dark background */
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: iotFadeIn 0.4s ease-out;
}

/* Hộp đăng nhập Glassmorphism */
.iot-login-card[b-olcezedguz] {
    background: rgba(17, 25, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    padding: 40px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden; /* Cho hiệu ứng icon nền */
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    animation: iotSlideDown 0.5s ease-out;
}

    /* Border phát sáng tinh tế khi focus hộp */
    .iot-login-card[b-olcezedguz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00f2fe, #4facfe, transparent);
    }

/* Nút đóng */
.iot-close-btn[b-olcezedguz] {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    z-index: 10;
}

    .iot-close-btn:hover[b-olcezedguz] {
        color: #ff4b5c;
        transform: rotate(90deg);
    }

/* Branding phần Header */
.iot-card-header[b-olcezedguz] {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.iot-tech-icon-wrapper[b-olcezedguz] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iot-bg-icon[b-olcezedguz] {
    font-size: 80px;
    color: rgba(79, 172, 254, 0.1); /* Neon blue very faint */
    position: absolute;
}

.iot-main-icon[b-olcezedguz] {
    font-size: 40px;
    color: #4facfe; /* Neon blue */
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.7);
    z-index: 1;
}

.iot-title[b-olcezedguz] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.text-highlight[b-olcezedguz] {
    color: #00f2fe; /* Cyan/neon blue */
    background: linear-gradient(120deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.iot-subtitle[b-olcezedguz] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 0;
}

/* Form Styles */
.iot-form-group[b-olcezedguz] {
    margin-bottom: 22px;
}

    .iot-form-group label[b-olcezedguz] {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.iot-input-wrapper[b-olcezedguz] {
    position: relative;
    display: flex;
    align-items: center;
}

.iot-input-icon[b-olcezedguz] {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    transition: color 0.3s ease;
}

.iot-input-wrapper input[b-olcezedguz] {
    width: 100%;
    padding: 14px 16px 14px 50px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.3s ease;
}

    .iot-input-wrapper input:focus[b-olcezedguz] {
        outline: none;
        border-color: #4facfe;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
    }

        .iot-input-wrapper input:focus + .iot-input-icon[b-olcezedguz] {
            color: #4facfe;
        }

/* Action row (Check/Link) */
.iot-action-row[b-olcezedguz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Custom Checkbox */
.iot-checkbox-container[b-olcezedguz] {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: rgba(255, 255, 255, 0.7);
}

    .iot-checkbox-container input[b-olcezedguz] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.iot-checkmark[b-olcezedguz] {
    height: 18px;
    width: 18px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.iot-checkbox-container:hover input ~ .iot-checkmark[b-olcezedguz] {
    border-color: #4facfe;
}

.iot-checkbox-container input:checked ~ .iot-checkmark[b-olcezedguz] {
    background-color: #4facfe;
    border-color: #4facfe;
}

.iot-checkmark[b-olcezedguz]::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.iot-checkbox-container input:checked ~ .iot-checkmark[b-olcezedguz]::after {
    display: block;
}

/* Tech Links */
.iot-link-tech[b-olcezedguz] {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

    .iot-link-tech:hover[b-olcezedguz] {
        color: #00f2fe;
        text-shadow: 0 0 5px rgba(0, 242, 254, 0.5);
    }

.iot-link-tech-bold[b-olcezedguz] {
    color: #4facfe;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .iot-link-tech-bold:hover[b-olcezedguz] {
        color: #00f2fe;
        text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
    }

/* Main Submit Button */
.iot-btn-primary[b-olcezedguz] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    border-radius: 12px;
    color: #060c18;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
}

    .iot-btn-primary:hover[b-olcezedguz] {
        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.6);
        transform: translateY(-2px);
    }

    .iot-btn-primary:active[b-olcezedguz] {
        transform: translateY(1px);
    }

/* Footer / Alt Logins */
.iot-card-footer[b-olcezedguz] {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
}

.iot-divider[b-olcezedguz] {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 0.1em;
    margin: 20px 0 30px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
}

    .iot-divider span[b-olcezedguz] {
        background: rgb(17, 25, 40); /* Matches card bg roughly to clear divider */
        padding: 0 15px;
    }

.iot-alternative-logins[b-olcezedguz] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.iot-btn-alt[b-olcezedguz] {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .iot-btn-alt:hover[b-olcezedguz] {
        background: rgba(79, 172, 254, 0.1);
        border-color: #4facfe;
        color: #4facfe;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
    }

.iot-signup-text[b-olcezedguz] {
    color: rgba(255, 255, 255, 0.5);
}

/* Animations */
@@keyframes iotFadeIn {
    from[b-olcezedguz] {
        opacity: 0;
    }

    to[b-olcezedguz] {
        opacity: 1;
    }
}

@@keyframes iotSlideDown {
    from[b-olcezedguz] {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to[b-olcezedguz] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.iot-brand-logo[b-olcezedguz] {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15); /* Đường viền đứt quãng chia tách logo và form */
}

/* Nếu bạn dùng ảnh thật */
.iot-logo-img[b-olcezedguz] {
    max-width: 150px;
    height: auto;
    display: inline-block;
}

/* Nếu dùng Text Logo */
.iot-logo-text[b-olcezedguz] {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

    .iot-logo-text .logo-icon[b-olcezedguz] {
        color: #00f2fe;
        font-size: 28px;
        filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6)); /* Hiệu ứng tỏa sáng cho chip */
    }

    .iot-logo-text .logo-highlight[b-olcezedguz] {
        color: #4facfe;
        font-weight: 400;
    }

.iot-input-wrapper[b-olcezedguz] {
    position: relative;
    display: flex;
    align-items: center;
}

.iot-eye-icon[b-olcezedguz] {
    position: absolute;
    right: 15px; /* Điều chỉnh vị trí bên phải */
    color: #888;
    z-index: 10;
}

    .iot-eye-icon:hover[b-olcezedguz] {
        color: #4a90e2; /* Đổi màu khi di chuột vào */
    }

/* Nút Đăng ký - Màu nổi bật (ví dụ: Primary Blue hoặc Gradient) */
.btn-signup[b-olcezedguz] {
    padding: 8px 20px;
    margin-right: 10px;
    border: none;
    border-radius: 25px; /* Bo tròn hoàn toàn */
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}

    .btn-signup:hover[b-olcezedguz] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
        background: linear-gradient(135deg, #0056b3, #004494);
    }

/* Nút Đăng nhập - Phong cách viền trong suốt/Outline */
.btn-login[b-olcezedguz] {
    padding: 8px 20px;
    border: 2px solid #007bff;
    border-radius: 25px;
    background: transparent;
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-login:hover[b-olcezedguz] {
        background: #007bff;
        color: white;
    }
/* /Components/Pages/MMonthlyCalendarWidget.razor.rz.scp.css */
/* =========================================================
   1. KHUNG CHÍNH (WRAPPER) CHỨA ẢNH NỀN WINDOWS
   ========================================================= */
.mini-cal-wrapper[b-25e77hzrzn] {
    /* Đảm bảo wrapper có chiều cao tối đa phù hợp hoặc tự động */
    height: auto;
    min-height: 100%;
    /* QUAN TRỌNG: Thêm padding-bottom để phần tử cuối không dính sát mép */
    padding-bottom: 20px;
    /* Nếu bạn đang để scroll cố định, hãy dùng: */
    overflow-y: auto;
}

/* =========================================================
   2. PHẦN TIÊU ĐỀ THÁNG / NĂM (HEADER)
   ========================================================= */

.mini-cal-header[b-25e77hzrzn] {
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(251, 191, 36, 0.4);
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between; /* Đẩy cụm chữ sang trái, cụm nút sang phải */
    align-items: center;
    flex-wrap: wrap; /* Chống vỡ khung nếu màn hình quá nhỏ */
    gap: 15px;
}

/* Khung bọc mới gom toàn bộ chữ và select box về lề trái */
.mini-cal-title-group[b-25e77hzrzn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px; /* Tạo khoảng cách an toàn 20px giữa cụm tháng/năm và combobox tỉnh */
}

.mini-cal-title[b-25e77hzrzn] {
    font-weight: 900;
    font-size: 2.2rem;
    color: #fbbf24;
    letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 15px rgba(251, 191, 36, 0.4);
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Cụm điều hướng bên phải chỉ chứa nút bấm */
.mini-header-controls[b-25e77hzrzn] {
    display: flex;
    align-items: center;
    gap: 10px; /* Khoảng cách giữa nút Lùi và Tiến */
}

.mini-location-select[b-25e77hzrzn], .mini-year-input[b-25e77hzrzn] {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: white;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 1.1rem;
    padding: 8px 15px;
    outline: none;
    transition: 0.3s;
}

/* Giữ nguyên độ rộng rộng rãi cho ô năm */
.mini-year-input[b-25e77hzrzn] {
    width: 140px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fbbf24;
    box-sizing: border-box;
}

.mini-location-select option[b-25e77hzrzn] {
    background: #0f172a;
    color: white;
}

.mini-nav-btn[b-25e77hzrzn] {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .mini-nav-btn:hover[b-25e77hzrzn] {
        background: #3b82f6;
        border-color: #60a5fa;
        transform: scale(1.1);
    }


/* =========================================================
   3. BẢNG LƯỚI LỊCH LIỀN MẠCH (TABLE/DESK CALENDAR)
   ========================================================= */
.mini-grid-days[b-25e77hzrzn] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0; /* Ép các ô dính sát vào nhau */
    /* Viền tổng thể bên ngoài bảng (Cạnh Trên và Cạnh Trái) */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Tiêu đề thứ (T2, T3...) */
.mini-day-name[b-25e77hzrzn] {
    font-size: 1rem;
    text-align: center;
    color: #e2e8f0;
    font-weight: 800;
    padding: 15px 0;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.4);
    /* Kẻ viền Cạnh Phải và Cạnh Dưới cho tiêu đề */
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

    .mini-day-name.sun[b-25e77hzrzn] {
        color: #fca5a5;
    }

/* =========================================================
   4. CÁC Ô LỊCH (CELLS)
   ========================================================= */
.mini-day-cell[b-25e77hzrzn] {
    height: 100px; /* Tăng chiều cao để tạo không gian thoáng 1/4 cho chữ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    /* Kẻ viền Cạnh Phải và Cạnh Dưới ghép thành lưới */
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    cursor: pointer;
    position: relative; /* QUAN TRỌNG: để neo vị trí absolute của chữ */
    transition: background 0.2s ease;
}

    /* Hover làm sáng nền (không làm nhảy khung) */
    .mini-day-cell:hover[b-25e77hzrzn] {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    /* Ngày hiện tại (Hôm nay): Viền hắt trong màu vàng */
    .mini-day-cell.today[b-25e77hzrzn] {
        background: rgba(250, 204, 21, 0.1) !important;
        box-shadow: inset 0 0 0 3px #facc15 !important;
        z-index: 5;
    }

    /* Ngày đang được chọn: Viền hắt trong màu xanh */
    .mini-day-cell.selected[b-25e77hzrzn] {
        background: rgba(59, 130, 246, 0.3) !important;
        box-shadow: inset 0 0 0 2px #3b82f6 !important;
        z-index: 4;
    }

    /* Ô trống không có dữ liệu: Tắt hiệu ứng hover */
    .mini-day-cell.empty-cell[b-25e77hzrzn] {
        cursor: default;
        background: transparent !important;
    }

        .mini-day-cell.empty-cell:hover[b-25e77hzrzn] {
            background: transparent !important;
            box-shadow: none !important;
        }

/* =========================================================
   5. ĐỊNH VỊ CHỮ DƯƠNG LỊCH & ÂM LỊCH (1/4 Ô)
   ========================================================= */


/* --- SỐ DƯƠNG LỊCH: Căn giữa chính xác vào tâm ô lịch --- */
.solar-num[b-25e77hzrzn] {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    color: #38bdf8;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.5);
    /* Neo chính giữa tâm ô */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

    .solar-num.sun[b-25e77hzrzn] {
        color: #f87171;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    }


/* SỐ ÂM LỊCH: Neo góc dưới bên Trái */
.lunar-sub[b-25e77hzrzn], .lunar-m1[b-25e77hzrzn] {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    position: absolute;
    bottom: 20px; /* Cách lề dưới 1/4 */
    left: 25px; /* Cách lề trái 1/4 */
}

.lunar-sub[b-25e77hzrzn] {
    color: #f1f5f9; /* Âm lịch thường màu trắng bạc */
}

.lunar-m1[b-25e77hzrzn] {
    color: #facc15; /* Âm lịch mùng 1 màu vàng rực */
    font-weight: 900;
}

/* Nhãn đánh dấu ngày cuốn tháng (Nếu có) */
.wrapped-indicator[b-25e77hzrzn] {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #fbbf24;
    color: #000;
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 900;
    z-index: 5;
}

/* =========================================================
   6. PHẦN MÔ TẢ CHI TIẾT (FOOTER)
   ========================================================= */
/* =========================================================
   6. PHẦN MÔ TẢ CHI TIẾT (FOOTER) - CHỈ SỬA CHIỀU CAO & SIZE CHỮ
   ========================================================= */
.mini-cal-footer[b-25e77hzrzn] {
    margin-top: 15px; /* Giảm khoảng cách từ lưới lịch xuống footer */
    padding: 10px; /* Thu hẹp khoảng đệm rìa khung lớn */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 15px;
    border-left: 5px solid #fbbf24;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* Thu nhỏ khoảng trống giữa các ô (từ 15px xuống 8px) */
    font-family: 'Segoe UI', system-ui, sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.info-card[b-25e77hzrzn] {
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 10px; /* Cắt giảm mạnh padding dọc từ 15px xuống 6px */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa nội dung theo chiều dọc */
    min-height: unset; /* Ép ô co theo chữ, không giữ chiều cao cố định */
}

.astro-card[b-25e77hzrzn] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 8px 10px; /* Thu hẹp đệm của riêng ô Mặt trời/Mặt trăng */
}

.info-label[b-25e77hzrzn] {
    color: #60a5fa;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    margin-bottom: 2px; /* Giảm khoảng cách dưới tiêu đề nhỏ (từ 8px xuống 2px) */
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.info-value[b-25e77hzrzn] {
    font-size: 0.9rem; /* Giảm kích thước chữ giá chính từ 1.05rem xuống 0.9rem */
    font-weight: 700;
    color: #f8fafc;
    display: block;
    line-height: 1.2;
}

.astro-sub-title[b-25e77hzrzn] {
    font-weight: 700;
    font-size: 0.7rem; /* Thu nhỏ nhẹ chữ MẶT TRỜI / MẶT TRĂNG */
    margin-bottom: 2px;
    display: block;
    opacity: 0.9;
}

.astro-time[b-25e77hzrzn] {
    font-size: 0.85rem; /* Giảm kích thước chữ hiển thị giờ mọc/lặn từ 1rem xuống 0.85rem */
    color: #fff;
    font-weight: 700;
    font-family: 'Montserrat';
    line-height: 1.2;
}

.astro-meta[b-25e77hzrzn] {
    font-size: 0.65rem; /* Thu nhỏ chữ kinh độ/pha trăng/sóng nước xuống một chút */
    color: #cbd5e1;
    margin-top: 1px;
}

/* Các thẻ nhãn xếp hạng (Cát, Hung, Bình) */
.score-badge[b-25e77hzrzn] {
    padding: 1px 6px; /* Bóp nghẹt không gian đệm của badge (từ 3px 8px xuống 1px 6px) */
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 4px; /* Đẩy sát lên trên thay vì cách 8px như cũ */
    width: fit-content;
    line-height: 1.2;
}

.score-cat[b-25e77hzrzn] {
    background: #064e3b;
    color: #6ee7b7;
}

.score-hung[b-25e77hzrzn] {
    background: #7f1d1d;
    color: #fca5a5;
}

.score-binh[b-25e77hzrzn] {
    background: #374151;
    color: #d1d5db;
}
/* =========================================================
   8. ĐỔI MÀU CHỮ TIÊU ĐỀ NGÀY THÁNG ÂM LỊCH NỔI BẬT
   ========================================================= */
.lunar-title-card[b-25e77hzrzn] {
    /* Giữ nguyên khung viền vàng nhạt và nền mờ của bạn */
    border-color: rgba(251, 191, 36, 0.3) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 10px !important;
}

.lunar-main-title[b-25e77hzrzn] {
    color: #ffe082; /* Màu vàng hổ phách dịu, sang trọng, không bị chói gắt */
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: 1.1rem; /* Kích thước vừa vặn, tinh tế */
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Đổ bóng chữ nhẹ giúp text cực sắc nét trên nền ảnh phong cảnh phía sau */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 224, 130, 0.2);
}

/* Trang phóng to ép mọi thứ ra 100% */
.full-screen-calendar[b-25e77hzrzn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    overflow-y: auto;
}

    .full-screen-calendar .mini-cal-wrapper[b-25e77hzrzn] {
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px;
    }

    /* Biến footer thành dạng lưới khi phóng to */
    .full-screen-calendar .mini-cal-footer[b-25e77hzrzn] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
/* /Components/Pages/MTideWidget.razor.rz.scp.css */
.tide-widget-container[b-4px46mr29o] {
    background: #000;
    color: #fff;
    padding: 15px;
    font-family: Arial, sans-serif;
}
/* --- CSS ĐÈ (OVERRIDE) KHI PHÓNG TO --- */
.full-screen-mode .tide-widget-container[b-4px46mr29o] {
    max-width: none !important; /* PHÁ BỎ KHỐNG CHẾ */
    width: 100vw !important;
    height: 100vh !important;
    padding: 20px !important;
    border-radius: 0 !important;
    border: none !important;
}

.tide-widget-title[b-4px46mr29o] {
    font-family: 'Orbitron', sans-serif;
    color: #00d2ff;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.nav-mini-btn[b-4px46mr29o] {
    background: transparent;
    border: 1px solid #00d2ff;
    color: #00d2ff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
}

.cyber-select-mini[b-4px46mr29o] {
    background: #0a0a0a;
    color: #00d2ff;
    border: 1px solid rgba(0, 210, 255, 0.3);
    font-size: 0.75rem;
    padding: 4px;
}

.chart-box[b-4px46mr29o] {
    height: 180px;
}

.extreme-item[b-4px46mr29o] {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
}

    .extreme-item.high[b-4px46mr29o] {
        border-left: 3px solid #ff4d4d;
    }

    .extreme-item.low[b-4px46mr29o] {
        border-left: 3px solid #00d2ff;
    }

.ex-time[b-4px46mr29o] {
    font-weight: bold;
    color: #fff;
}

.ex-label[b-4px46mr29o] {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
}

.ex-height[b-4px46mr29o] {
    font-weight: 900;
    color: #00d2ff;
}

.btn-ai-mini[b-4px46mr29o] {
    background: transparent;
    border: 1px solid #ffc107;
    color: #ffc107;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    transition: 0.3s;
}

    .btn-ai-mini:hover[b-4px46mr29o] {
        background: #ffc107;
        color: #000;
    }

.extracted-code-box pre[b-4px46mr29o] {
    font-size: 0.6rem;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.05);
    padding: 5px;
    max-height: 80px;
    overflow-y: auto;
}
.tide-master-container[b-4px46mr29o] {
    max-width: 1200px;
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    border: 1px solid rgba(0, 210, 255, 0.15);
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* --- TIÊU ĐỀ SIÊU NHỎ --- */
.tide-title[b-4px46mr29o] {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.85rem; /* Thu nhỏ tối đa */
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00d2ff;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.5);
}

.tide-header[b-4px46mr29o] {
    background: #050505;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- ĐIỀU KHIỂN TINH GỌN --- */
.cyber-select[b-4px46mr29o], .cyber-date-input[b-4px46mr29o] {
    background: #000 !important;
    color: #00d2ff !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    outline: none;
}

.tide-content[b-4px46mr29o] {
    padding: 8px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.panel-card[b-4px46mr29o] {
    background: rgba(0, 210, 255, 0.01);
    border-radius: 8px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    padding: 8px;
}

/* CHIỀU CAO BIỂU ĐỒ TỐI ƯU */
.chart-box-mini[b-4px46mr29o] {
    height: 150px;
}

.tide-table[b-4px46mr29o] {
    width: 100%;
    color: #ccc;
    font-size: 0.7rem;
    border-collapse: collapse;
}

    .tide-table td[b-4px46mr29o] {
        padding: 3px 5px;
        background: rgba(255,255,255,0.02);
    }

.extreme-card[b-4px46mr29o] {
    background: rgba(0, 210, 255, 0.03);
    padding: 6px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

    .extreme-card div:last-child[b-4px46mr29o] {
        font-size: 1.0rem;
        font-weight: 700;
        color: #fff;
    }

.nav-btn-pro[b-4px46mr29o] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #00d2ff;
    color: #00d2ff;
    background: transparent;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tide-master-container[b-4px46mr29o] {
    max-width: 1200px;
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    border: 1px solid rgba(0, 210, 255, 0.15);
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* --- TIÊU ĐỀ SIÊU NHỎ --- */
.tide-title[b-4px46mr29o] {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.85rem; /* Thu nhỏ tối đa */
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00d2ff;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.5);
}

.tide-header[b-4px46mr29o] {
    background: #050505;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- ĐIỀU KHIỂN TINH GỌN --- */
.cyber-select[b-4px46mr29o], .cyber-date-input[b-4px46mr29o] {
    background: #000 !important;
    color: #00d2ff !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    outline: none;
}

.tide-content[b-4px46mr29o] {
    padding: 8px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.panel-card[b-4px46mr29o] {
    background: rgba(0, 210, 255, 0.01);
    border-radius: 8px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    padding: 8px;
}

/* CHIỀU CAO BIỂU ĐỒ TỐI ƯU */
.chart-box-mini[b-4px46mr29o] {
    height: 150px;
}

.tide-table[b-4px46mr29o] {
    width: 100%;
    color: #ccc;
    font-size: 0.7rem;
    border-collapse: collapse;
}

    .tide-table td[b-4px46mr29o] {
        padding: 3px 5px;
        background: rgba(255,255,255,0.02);
    }

.extreme-card[b-4px46mr29o] {
    background: rgba(0, 210, 255, 0.03);
    padding: 6px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

    .extreme-card div:last-child[b-4px46mr29o] {
        font-size: 1.0rem;
        font-weight: 700;
        color: #fff;
    }

.nav-btn-pro[b-4px46mr29o] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #00d2ff;
    color: #00d2ff;
    background: transparent;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Pages/NewMoons.razor.rz.scp.css */
/* =========================================
   GIAO DIỆN TỔNG QUAN
========================================= */

.header-subtitle[b-4tjh2eldp0] {
    color: #0066cc !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

.moon-debug-container[b-4tjh2eldp0] {
    /* Đổi từ #f4f7f6 sang mã màu Azure nhạt */
    background-color: #F0FFFF;
    min-height: 100vh;
}
    .moon-debug-container .card[b-4tjh2eldp0] {
        border-radius: 8px;
        background-color: #ffffff;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }

/* Thêm class cho mô tả dưới tiêu đề để dễ đọc hơn */
.header-subtitle[b-4tjh2eldp0] {
    color: #0a4275 !important;
    font-weight: 500 !important;
}

/* =========================================
   TYPOGRAPHY & HIỂN THỊ DỮ LIỆU KỸ THUẬT
========================================= */
.font-monospace[b-4tjh2eldp0] {
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace !important;
}

.hex-code[b-4tjh2eldp0] {
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #d63384;
    font-size: 0.85rem;
    font-weight: bold;
}

/* =========================================
   BẢNG & TƯƠNG TÁC (TABLE)
========================================= */
.table-hover tbody tr:hover[b-4tjh2eldp0] {
    background-color: rgba(13, 110, 253, 0.04);
    transition: background-color 0.2s ease;
}

.sticky-top[b-4tjh2eldp0] {
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.table > :not(caption) > * > *[b-4tjh2eldp0] {
    padding: 1rem 0.75rem;
}

/* =========================================
   FORM LỌC (INPUT)
========================================= */
.form-control:focus[b-4tjh2eldp0] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* =========================================
   MÀU SẮC TAG/BADGE (SOFT COLORS)
========================================= */
.bg-soft-success[b-4tjh2eldp0] {
    background-color: rgba(25, 135, 84, 0.1);
}

.bg-soft-info[b-4tjh2eldp0] {
    background-color: rgba(13, 202, 240, 0.1);
}

.bg-soft-danger[b-4tjh2eldp0] {
    background-color: rgba(220, 53, 69, 0.1);
}

.bg-soft-secondary[b-4tjh2eldp0] {
    background-color: rgba(108, 117, 125, 0.1);
}

/* =========================================
   PHÂN TRANG (PAGINATION)
========================================= */
.page-link[b-4tjh2eldp0] {
    color: #0d6efd;
    cursor: pointer;
    border-color: #dee2e6;
    transition: all 0.2s ease-in-out;
}

    .page-link:hover[b-4tjh2eldp0] {
        background-color: #e9ecef;
    }

.page-item.active .page-link[b-4tjh2eldp0] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
    font-weight: bold;
}

.page-item.disabled .page-link[b-4tjh2eldp0] {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
}
/* /Components/Pages/OrbitalViewer.razor.rz.scp.css */
.orbital-viewer-widget[b-tlq4qrffoc] {
    background: #000;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    font-family: 'JetBrains Mono', monospace;
}

.widget-title[b-tlq4qrffoc] {
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.current-time-mini[b-tlq4qrffoc] {
    font-size: 0.7rem;
    color: #64748b;
}

.orbital-render-box[b-tlq4qrffoc] {
    flex-grow: 1;
    min-height: 250px;
    background: radial-gradient(circle, #0a0a0a 0%, #000 100%);
    margin: 10px 0;
    border-radius: 12px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.orbital-loader[b-tlq4qrffoc] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.8);
    z-index: 5;
}

.btn-step[b-tlq4qrffoc] {
    background: transparent;
    border: 1px solid #334155;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-left: 5px;
}

    .btn-step.active[b-tlq4qrffoc] {
        color: #fbbf24;
        border-color: #fbbf24;
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
    }

.orbital-footer[b-tlq4qrffoc] {
    font-size: 0.6rem;
    color: #475569;
}

.status[b-tlq4qrffoc] {
    color: #22c55e;
}

/* Tùy chỉnh thanh cuộn cho bảng HUD */
.d-flex.flex-column.gap-2[b-tlq4qrffoc]::-webkit-scrollbar {
    width: 6px;
}

.d-flex.flex-column.gap-2[b-tlq4qrffoc]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.d-flex.flex-column.gap-2[b-tlq4qrffoc]::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.4);
    border-radius: 3px;
}

    .d-flex.flex-column.gap-2[b-tlq4qrffoc]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 255, 255, 0.8);
    }
.camera-controls[b-tlq4qrffoc] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.btn-ctrl[b-tlq4qrffoc] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.5);
    background: rgba(0, 20, 40, 0.7);
    color: #00ffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .btn-ctrl:hover[b-tlq4qrffoc] {
        background: rgba(0, 255, 255, 0.2);
        box-shadow: 0 0 10px #00ffff;
    }
/* /Components/Pages/PersonalInfoForm.razor.rz.scp.css */
/* /Components/Pages/SignupModal.razor.rz.scp.css */
/* Kế thừa hiệu ứng kính mờ từ form đăng nhập */
.iot-modal-backdrop[b-dv24kcjlr9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(6, 12, 24, 0.7);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: iotFadeIn 0.4s ease-out;
}

/* Thiết kế riêng cho form Đăng ký (Rộng hơn một chút để chứa form dài) */
.iot-signup-card[b-dv24kcjlr9] {
    background: rgba(17, 25, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    width: 90%;
    max-width: 500px;
    padding: 40px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    animation: iotSlideUp 0.5s ease-out;
}

    .iot-signup-card[b-dv24kcjlr9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00f2fe, #4facfe, transparent);
    }

/* Tái sử dụng các class cơ bản từ Login Modal */
.iot-close-btn[b-dv24kcjlr9] {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    z-index: 10;
}

    .iot-close-btn:hover[b-dv24kcjlr9] {
        color: #ff4b5c;
        transform: rotate(90deg);
    }

.iot-card-header[b-dv24kcjlr9] {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.iot-tech-icon-wrapper[b-dv24kcjlr9] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iot-bg-icon[b-dv24kcjlr9] {
    font-size: 80px;
    color: rgba(79, 172, 254, 0.1);
    position: absolute;
}

.iot-main-icon[b-dv24kcjlr9] {
    font-size: 40px;
    color: #4facfe;
    text-shadow: 0 0 15px rgba(79, 172, 254, 0.7);
    z-index: 1;
}

.iot-title[b-dv24kcjlr9] {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

.text-highlight[b-dv24kcjlr9] {
    color: #00f2fe;
    background: linear-gradient(120deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.iot-subtitle[b-dv24kcjlr9] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 0;
}

/* Nút Google chuẩn Pro */
.iot-btn-google[b-dv24kcjlr9] {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

    .iot-btn-google:hover[b-dv24kcjlr9] {
        background: rgba(255, 255, 255, 0.1);
        border-color: #ffffff;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

    .iot-btn-google i[b-dv24kcjlr9] {
        color: #ea4335;
        font-size: 18px;
    }
/* Màu đỏ đặc trưng của logo Google */

/* Divider */
.iot-divider[b-dv24kcjlr9] {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 0.1em;
    margin: 25px 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    letter-spacing: 2px;
}

    .iot-divider span[b-dv24kcjlr9] {
        background: rgb(17, 25, 40);
        padding: 0 15px;
    }

/* Form Fields */
.iot-form-group[b-dv24kcjlr9] {
    margin-bottom: 18px;
}

    .iot-form-group label[b-dv24kcjlr9] {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
    }

.iot-input-wrapper[b-dv24kcjlr9] {
    position: relative;
    display: flex;
    align-items: center;
}

.iot-input-icon[b-dv24kcjlr9] {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    transition: color 0.3s ease;
}

.iot-input-wrapper input[b-dv24kcjlr9] {
    width: 100%;
    padding: 12px 16px 12px 45px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .iot-input-wrapper input:focus[b-dv24kcjlr9] {
        outline: none;
        border-color: #4facfe;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
    }

        .iot-input-wrapper input:focus + .iot-input-icon[b-dv24kcjlr9] {
            color: #4facfe;
        }

/* Submit Button */
.iot-btn-primary[b-dv24kcjlr9] {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    border-radius: 12px;
    color: #060c18;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
    margin-top: 10px;
}

    .iot-btn-primary:hover[b-dv24kcjlr9] {
        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.6);
        transform: translateY(-2px);
    }

/* Footer */
.iot-card-footer[b-dv24kcjlr9] {
    text-align: center;
}

.iot-signup-text[b-dv24kcjlr9] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.iot-link-tech-bold[b-dv24kcjlr9] {
    color: #4facfe;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-left: 5px;
}

    .iot-link-tech-bold:hover[b-dv24kcjlr9] {
        color: #00f2fe;
        text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
    }

/* Animations */
@@keyframes iotFadeIn {
    from[b-dv24kcjlr9] {
        opacity: 0;
    }

    to[b-dv24kcjlr9] {
        opacity: 1;
    }
}

@@keyframes iotSlideUp {
    from[b-dv24kcjlr9] {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to[b-dv24kcjlr9] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Components/Pages/SolarTerms.razor.rz.scp.css */
/* =========================================
   GIAO DIỆN TỔNG QUAN
========================================= */
.term-debug-container[b-64q9uc0ixq] {
    background-color: #F0FFFF; /* Nền màu Azure như trang Điểm Sóc */
    min-height: 100vh;
}

    .term-debug-container .card[b-64q9uc0ixq] {
        border-radius: 8px;
        background-color: #ffffff;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }

/* Thêm class cho mô tả dưới tiêu đề để nổi bật hẳn lên */
.header-subtitle[b-64q9uc0ixq] {
    color: #0066cc !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

/* =========================================
   TYPOGRAPHY & HIỂN THỊ DỮ LIỆU KỸ THUẬT
========================================= */
.font-monospace[b-64q9uc0ixq] {
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace !important;
}

.hex-code[b-64q9uc0ixq] {
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #d63384;
    font-size: 0.85rem;
    font-weight: bold;
}

/* =========================================
   BẢNG & TƯƠNG TÁC (TABLE)
========================================= */
.table-hover tbody tr:hover[b-64q9uc0ixq] {
    background-color: rgba(13, 110, 253, 0.04);
    transition: background-color 0.2s ease;
}

.sticky-top[b-64q9uc0ixq] {
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.table > :not(caption) > * > *[b-64q9uc0ixq] {
    padding: 1rem 0.75rem;
}

/* =========================================
   FORM LỌC (INPUT)
========================================= */
.form-control:focus[b-64q9uc0ixq], .form-select:focus[b-64q9uc0ixq] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* =========================================
   MÀU SẮC TAG/BADGE (SOFT COLORS)
========================================= */
.bg-soft-warning[b-64q9uc0ixq] {
    background-color: rgba(255, 193, 7, 0.15);
}

.bg-soft-info[b-64q9uc0ixq] {
    background-color: rgba(13, 202, 240, 0.1);
}

/* =========================================
   PHÂN TRANG (PAGINATION)
========================================= */
.page-link[b-64q9uc0ixq] {
    color: #0d6efd;
    cursor: pointer;
    border-color: #dee2e6;
    transition: all 0.2s ease-in-out;
}

    .page-link:hover[b-64q9uc0ixq] {
        background-color: #e9ecef;
    }

.page-item.active .page-link[b-64q9uc0ixq] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
    font-weight: bold;
}

.page-item.disabled .page-link[b-64q9uc0ixq] {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
}
/* /Components/Pages/StockAutocomplete.razor.rz.scp.css */
/* ======================================================================
   🧩 StockAutocomplete: Style tối ưu cho ComboBox Chứng khoán
   ====================================================================== */

/* 1. CONTAINER CHÍNH */
.smart-cb-container[b-9wtt4ijhf9] {
    position: relative;
    width: 100%;
    max-width: 280px;
    z-index: 1001;
}

.cb-input-group[b-9wtt4ijhf9] {
    display: flex;
    align-items: center;
    background: #2a2a2e;
    border: 1px solid #434348;
    border-radius: 6px;
    padding: 4px 10px;
    transition: all 0.2s ease;
}

    .cb-input-group:focus-within[b-9wtt4ijhf9] {
        border-color: #2962ff;
        box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.2);
        background: #1e1e21;
    }

.cb-input[b-9wtt4ijhf9] {
    flex: 1;
    background: transparent;
    border: none;
    color: #d1d4dc !important;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    height: 28px;
}

.cb-caret[b-9wtt4ijhf9] {
    color: #80848e;
    cursor: pointer;
    font-size: 10px;
    padding-left: 8px;
    user-select: none;
}

/* 2. DROPDOWN LIST (THEME AZURE SÁNG) */
.cb-list[b-9wtt4ijhf9] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 350px;
    max-height: 300px;
    overflow-y: auto !important;
    background: #F0FFFF !important;
    border: 1px solid #ADD8E6 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border-radius: 6px;
    z-index: 10000;
    padding: 0;
    margin: 4px 0 0 0;
    list-style: none;
}

.cb-list-header[b-9wtt4ijhf9] {
    background: #E0FFFF;
    color: #4682B4;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 12px;
}

.cb-item[b-9wtt4ijhf9] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #000 !important;
    transition: background 0.15s ease;
}

    .cb-item:last-child[b-9wtt4ijhf9] {
        border-bottom: none !important;
    }

    .cb-item:hover[b-9wtt4ijhf9] {
        background: rgba(176, 224, 230, 0.5) !important;
    }

/* 3. NỘI DUNG ITEM */
.item-logo img[b-9wtt4ijhf9] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 12px;
}

.item-info[b-9wtt4ijhf9] {
    display: flex;
    flex-direction: column;
}

.stock-code[b-9wtt4ijhf9] {
    color: #000000 !important;
    font-weight: 800;
    font-size: 14px;
}

.stock-name[b-9wtt4ijhf9] {
    color: #333333 !important;
    font-size: 13px;
}

/* 4. NHÃN TÊN CÔNG TY (FIXED WIDTH) */
.company-name-label[b-9wtt4ijhf9] {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    flex-grow: 1;
    min-width: 0;
    margin-left: 15px;
    color: #e2b344;
    font-size: 15px;
    font-weight: bold;
}

/* 5. SCROLLBAR CHO DROPDOWN */
.cb-list[b-9wtt4ijhf9]::-webkit-scrollbar {
    width: 6px;
}

.cb-list[b-9wtt4ijhf9]::-webkit-scrollbar-track {
    background: #E0FFFF;
}

.cb-list[b-9wtt4ijhf9]::-webkit-scrollbar-thumb {
    background: #ADD8E6;
    border-radius: 10px;
}

    .cb-list[b-9wtt4ijhf9]::-webkit-scrollbar-thumb:hover {
        background: #87CEEB;
    }
/* /Components/Pages/StockChart.razor.rz.scp.css */
/* ======================================================================
   🧱 1. HỆ THỐNG GRID TỔNG THỂ & THIẾT LẬP TOÀN CỤC
   ====================================================================== */
.dashboard-container[b-y4ldu5gozq] {
    display: grid;
    /* HÀNG 1: Cao 45px (Vùng 1), HÀNG 2: Lấy hết phần còn lại của màn hình (1fr) */
    grid-template-rows: 45px 1fr;
    /* CỘT 1: Giữ cứng đúng 250px cho Sidebar, CỘT 2: Toàn bộ vùng đồ thị (1fr) */
    grid-template-columns: 250px 1fr;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Ép html và body phải khít khao với vùng hiển thị màn hình, chống cuộn lửng */
html[b-y4ldu5gozq], body[b-y4ldu5gozq] {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ======================================================================
   ⚡ 2. VÙNG 1: THANH CÔNG CỤ TOP BAR (HEIGHT: 45PX)
   ====================================================================== */
.vung-1[b-y4ldu5gozq] {
    display: grid !important;
    /* Chia toolbar làm 3 phân vùng đối xứng: Trái (1fr) | Giữa (33.34%) | Phải (1fr) */
    grid-template-columns: 1fr 33.34% 1fr !important;
    align-items: center;
    width: 100vw;
    height: 45px !important;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
    padding: 0 15px;
    box-sizing: border-box;
}

.toolbar-left-group[b-y4ldu5gozq] {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* SMART COMBOBOX (Ô tìm kiếm mã cổ phiếu) */
.smart-cb-container[b-y4ldu5gozq] {
    position: relative;
    width: 100%;
    max-width: 280px;
    z-index: 1001;
}

.cb-input-group[b-y4ldu5gozq] {
    display: flex;
    align-items: center;
    background: #2a2a2e;
    border: 1px solid #434348;
    border-radius: 6px;
    padding: 4px 10px;
    transition: all 0.2s ease;
}

    .cb-input-group:focus-within[b-y4ldu5gozq] {
        border-color: #2962ff;
        box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.2);
        background: #1e1e21;
    }

.search-icon[b-y4ldu5gozq] {
    color: #80848e;
    margin-right: 8px;
    font-size: 14px;
}

.cb-input[b-y4ldu5gozq] {
    flex: 1;
    background: transparent;
    border: none;
    color: #d1d4dc !important;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    height: 28px;
}

.cb-caret[b-y4ldu5gozq] {
    color: #80848e;
    cursor: pointer;
    font-size: 10px;
    padding-left: 8px;
    user-select: none;
}

/* DANH SÁCH SUGGESTIONS DROPDOWN (ÉP NỔI TRÊN CANVAS PHẲNG) */
.cb-list[b-y4ldu5gozq], .stock-dropdown-list[b-y4ldu5gozq] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 350px;
    max-height: 300px;
    overflow-y: auto !important;
    overflow-x: hidden;
    background: #1e222d;
    border: 1px solid #363c4e;
    z-index: 99999; /* Con số tối cao để không bị Canvas nến đè mất chữ */
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.cb-list-header[b-y4ldu5gozq] {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 11px;
    color: #80848e;
    text-transform: uppercase;
    border-bottom: 1px solid #2a2e39;
    letter-spacing: 1px;
}

.cb-item[b-y4ldu5gozq], .stock-dropdown-list li[b-y4ldu5gozq] {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #2a2e39;
    transition: background 0.15s;
}

    .cb-item:hover[b-y4ldu5gozq], .stock-dropdown-list li:hover[b-y4ldu5gozq] {
        background: #2a2e39;
    }

.item-main[b-y4ldu5gozq] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.stock-code[b-y4ldu5gozq] {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    min-width: 60px;
}

.item-details[b-y4ldu5gozq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.stock-name[b-y4ldu5gozq] {
    color: #d1d4dc;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-market[b-y4ldu5gozq] {
    color: #787b86;
    font-size: 11px;
    margin-top: 2px;
}

/* CUSTOM THANH CUỘN DROPDOWN THEME CHUẨN TRADINGVIEW */
.cb-list[b-y4ldu5gozq]::-webkit-scrollbar, .stock-dropdown-list[b-y4ldu5gozq]::-webkit-scrollbar {
    width: 6px;
}

.cb-list[b-y4ldu5gozq]::-webkit-scrollbar-track, .stock-dropdown-list[b-y4ldu5gozq]::-webkit-scrollbar-track {
    background: #1e222d;
}

.cb-list[b-y4ldu5gozq]::-webkit-scrollbar-thumb, .stock-dropdown-list[b-y4ldu5gozq]::-webkit-scrollbar-thumb {
    background: #363a45;
    border-radius: 10px;
}

    .cb-list[b-y4ldu5gozq]::-webkit-scrollbar-thumb:hover, .stock-dropdown-list[b-y4ldu5gozq]::-webkit-scrollbar-thumb:hover {
        background: #4a4f5d;
    }

/* ĐỊNH VỊ NHÃN TÊN GIỮA VÀ BỘ CHỌN TIMEFRAME */
.company-name-label[b-y4ldu5gozq] {
    grid-column: 2;
    justify-self: stretch;
    text-align: center;
    color: #e2b344;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-selector[b-y4ldu5gozq] {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 5px;
}

.tf-btn[b-y4ldu5gozq] {
    background: #2d2d2d;
    border: 1px solid #444;
    color: #999;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

    .tf-btn.active[b-y4ldu5gozq] {
        background: #007acc !important;
        color: white !important;
    }

/* ======================================================================
   📐 3. VÙNG 2: THANH SIDEBAR CÔNG CỤ VẼ (HỆ LƯỚI 3 CỘT ĐÃ VÁ LỖI CUỘN)
   ====================================================================== */
.vung-2[b-y4ldu5gozq] {
    grid-row: 2;
    grid-column: 1;
    background: #131722;
    border-right: 1px solid #2a2e39;
    width: 250px !important; /* Khóa cứng 250px theo thiết kế grid tổng */
    box-sizing: border-box;
    /* 🚀 GIẢI PHÁP ĐỒNG BỘ: Chuyển sang flex để cưỡng chế hộc con tuân thủ chiều cao */
    display: flex;
    flex-direction: column;
    min-height: 0 !important; /* Chặn đứng chuỗi phình tự động của CSS Grid */
    overflow: hidden; /* Khóa biên ngoài tránh rác tràn layout */
}

.sidebar-content[b-y4ldu5gozq] {
    padding: 12px 6px; /* Thu hẹp lề ngang tăng diện tích hiển thị của 3 cọc */
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #1a1a1a;
    /* 🚀 BƠM LỰC TRƯỢT: Tự động kích hoạt thanh cuộn dọc khi dư thừa nút mút */
    flex: 1;
    overflow-y: auto !important;
    box-sizing: border-box;
}

/* Tiêu đề phân nhóm (Trải dài hết 3 cọc lề) */
.group-label[b-y4ldu5gozq] {
    grid-column: span 3; /* Ép buộc tiêu đề chiếm trọn bề ngang lề */
    display: block !important;
    font-size: 11px;
    color: #868993;
    text-transform: uppercase;
    margin-bottom: 6px;
    margin-top: 4px;
    padding-left: 6px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* 🚀 THIẾT LẬP LƯỚI ĐỒNG BỘ NÉT CỨNG 3 CỘT */
.chart-action-group[b-y4ldu5gozq],
.drawing-grid[b-y4ldu5gozq] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Chia đều thành 3 phân vùng bằng nhau */
    gap: 6px !important;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px !important;
}

/* 🚀 STYLE ĐỒNG BỘ CHO NÚT BẤM VÙNG SIDEBAR */
.action-btn[b-y4ldu5gozq],
.draw-item-btn[b-y4ldu5gozq] {
    display: flex !important;
    flex-direction: column !important; /* Phối layout: Icon nằm TRÊN, Chữ nằm DƯỚI */
    align-items: center !important;
    justify-content: center !important;
    background: #2a2a2e !important;
    border: 1px solid #363c4e !important;
    color: #d1d4dc !important;
    padding: 10px 2px !important; /* Thu hẹp đệm ngang tối đa */
    border-radius: 6px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 62px !important; /* Độ cao đối xứng tạo hình khối vuông vắn */
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
}

    .action-btn:hover[b-y4ldu5gozq],
    .draw-item-btn:hover[b-y4ldu5gozq] {
        background: #363a45 !important;
        border-color: #2962ff !important;
        color: #fff !important;
    }

    /* Trạng thái nút đang được kích nổ active hoặc tool đang chạy */
    .action-btn.active[b-y4ldu5gozq],
    .draw-item-btn.active[b-y4ldu5gozq] {
        background: rgba(41, 98, 255, 0.2) !important;
        border: 1px solid #2962ff !important;
        color: #2962ff !important;
        box-shadow: 0 0 10px rgba(41, 98, 255, 0.3) !important;
    }

    /* Khối biểu tượng hình học (Icon) */
    .action-btn .icon[b-y4ldu5gozq],
    .draw-item-btn .draw-icon[b-y4ldu5gozq] {
        display: block !important;
        font-size: 18px !important;
        margin-bottom: 4px !important;
        margin-right: 0 !important;
        width: auto !important;
        height: auto !important;
        text-align: center;
    }

    /* Khối nhãn chữ lọt khít trong biên cột hẹp */
    .action-btn .text[b-y4ldu5gozq],
    .draw-item-btn .draw-text[b-y4ldu5gozq] {
        display: block !important;
        font-size: 10px !important; /* 10px bảo đảm chữ không bị nhảy dòng làm vỡ form */
        font-weight: 500;
        color: #868993;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Tên dài vượt biên tự động sinh dấu "..." */
        width: 100%;
    }

    /* Ép chữ chuyển màu trắng sáng căng nét khi tương tác */
    .action-btn:hover .text[b-y4ldu5gozq], .draw-item-btn:hover .draw-text[b-y4ldu5gozq],
    .action-btn.active .text[b-y4ldu5gozq], .draw-item-btn.active .draw-text[b-y4ldu5gozq] {
        color: #fff !important;
    }

    /* Phối màu sắc đỏ rực cho phân vùng lệnh Xóa chọn / Gỡ bỏ hộc */
    .action-btn.btn-danger:hover[b-y4ldu5gozq],
    .btn-clear-draw:hover[b-y4ldu5gozq] {
        background: rgba(242, 54, 69, 0.15) !important;
        border-color: #f23645 !important;
        color: #f23645 !important;
    }

        .action-btn.btn-danger:hover .text[b-y4ldu5gozq],
        .btn-clear-draw:hover .draw-text[b-y4ldu5gozq] {
            color: #f23645 !important;
        }

/* Đường vạch chia cắt phân vùng */
.divider[b-y4ldu5gozq] {
    grid-column: span 3 !important; /* Dãn rộng trọn ổ 3 cột lề */
    height: 1px;
    background: #2a2e39;
    margin: 8px 0 !important;
}

/* THANH CUỘN SIDEBAR TINH TẾ KIỂU TRADINGVIEW TỐI */
.sidebar-content[b-y4ldu5gozq]::-webkit-scrollbar {
    width: 5px;
}

.sidebar-content[b-y4ldu5gozq]::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.sidebar-content[b-y4ldu5gozq]::-webkit-scrollbar-thumb {
    background: #363a45;
    border-radius: 4px;
}

    .sidebar-content[b-y4ldu5gozq]::-webkit-scrollbar-thumb:hover {
        background: #2962ff; /* Rà chuột vào hóa xanh Neon nổi bật */
    }

/* ======================================================================
   🖼️ 4. VÙNG 3: KHU VỰC DỰNG HÌNH CANVAS ĐỒ THỊ (VIEWPORT CHÍNH)
   ====================================================================== */
.vung-3[b-y4ldu5gozq] {
    grid-row: 2;
    grid-column: 2;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;

}

#js-chart-engine-root[b-y4ldu5gozq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ======================================================================
   📈 5. GIAO DIỆN MODAL CHỈ BÁO KỸ THUẬT CHUYÊN NGHIỆP (ĐÃ SỬA LỖI TRÀN)
   ====================================================================== */
.modal-backdrop[b-y4ldu5gozq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center; /* Giữ căn giữa nếu hộp thoại ngắn */
    justify-content: center;
    z-index: 999999;
    padding: 20px; /* 🚀 Chống dính sát lề màn hình trên thiết bị nhỏ */
    box-sizing: border-box;
}

.modal-content-pro[b-y4ldu5gozq] {
    background: #1e222d;
    color: #d1d4dc;
    width: 650px;
    max-height: 85vh; /* 🚀 KHỐI GIỚI HẠN: Ép hộp thoại không vượt quá 85% chiều cao màn hình */
    border-radius: 12px;
    border: 1px solid #363c4e;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    /* 🚀 PHÂN BỐ LỰC TRƯỢT FLEXBOX: Giữ cố định Header và Footer, chỉ cuộn Body */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Khóa các góc bo tròn không cho nội dung tràn ra */
    animation: fadeInModal-b-y4ldu5gozq 0.2s ease-out;
}

@keyframes fadeInModal-b-y4ldu5gozq {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header-pro[b-y4ldu5gozq] {
    padding: 20px;
    background: #131722;
    border-bottom: 1px solid #2a2e39;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* 🚀 Không cho phép tiêu đề bị thu nhỏ khi ép chiều cao */
}

.header-title[b-y4ldu5gozq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .header-title h5[b-y4ldu5gozq] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #ffffff;
    }

    .header-title .icon[b-y4ldu5gozq] {
        font-size: 22px;
    }

.close-btn-pro[b-y4ldu5gozq] {
    background: transparent;
    border: none;
    color: #868993;
    font-size: 24px;
    cursor: pointer;
}

/* 🚀 VÙNG CHỨA NỘI DUNG CHÍNH: TỰ ĐỘNG SINH THANH CUỘN */
.modal-body-pro[b-y4ldu5gozq] {
    flex: 1; /* Chiếm trọn vùng không gian trống ở giữa */
    overflow-y: auto !important; /* Tự động kích hoạt thanh cuộn đứng khi danh sách quá dài */
    padding-bottom: 10px;
}

    /* Custom lại thanh cuộn của riêng vùng Modal cho đồng bộ với TradingView */
    .modal-body-pro[b-y4ldu5gozq]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body-pro[b-y4ldu5gozq]::-webkit-scrollbar-track {
        background: #1e222d;
    }

    .modal-body-pro[b-y4ldu5gozq]::-webkit-scrollbar-thumb {
        background: #363a45;
        border-radius: 10px;
    }

        .modal-body-pro[b-y4ldu5gozq]::-webkit-scrollbar-thumb:hover {
            background: #2962ff;
        }

.indicator-section[b-y4ldu5gozq] {
    padding: 15px 20px;
}

.section-label[b-y4ldu5gozq] {
    font-size: 14px;
    font-weight: 600;
    color: #787b86;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.indicator-grid[b-y4ldu5gozq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.indicator-card[b-y4ldu5gozq] {
    background: #2a2e39;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

    .indicator-card.selected[b-y4ldu5gozq] {
        border-color: #2962ff;
        background: rgba(41, 98, 255, 0.08);
    }

.card-main[b-y4ldu5gozq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .card-main label[b-y4ldu5gozq] {
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        user-select: none;
        line-height: 1.4;
        color: #fff;
    }

    .card-main input[type="checkbox"][b-y4ldu5gozq] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #2962ff;
    }

/* Phần cài đặt thông số phụ trợ phía dưới (Kỳ, Màu sắc) */
.card-settings-pro[b-y4ldu5gozq], .card-settings[b-y4ldu5gozq] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #363c4e;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 14px;
    color: #b2b5be;
}

.setting-item[b-y4ldu5gozq] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .setting-item span[b-y4ldu5gozq] {
        font-size: 11px;
        color: #868993;
    }

.input-period[b-y4ldu5gozq] {
    width: 70px;
    background-color: #131722;
    border: 1px solid #363c4e;
    color: #2962ff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    outline: none;
}

.input-color-picker[b-y4ldu5gozq] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

    .input-color-picker[b-y4ldu5gozq]::-webkit-color-swatch {
        border-radius: 50%;
        border: 1px solid #434651;
    }

    .input-color-picker[b-y4ldu5gozq]::-moz-color-swatch {
        border-radius: 50%;
        border: 1px solid #434651;
    }

/* 🚀 CỐ ĐỊNH CHÂN TRANG FOOTER CHỨA NÚT ÁP DỤNG */
.modal-footer-pro[b-y4ldu5gozq] {
    padding: 15px 20px;
    background: #131722;
    border-top: 1px solid #2a2e39; /* Đường vạch nhẹ phân tách vùng cuộn bên trên */
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0; /* 🚀 Khóa cứng, không cho phép triệt tiêu diện tích nút */
}

.btn-secondary[b-y4ldu5gozq], .btn-primary-pro[b-y4ldu5gozq] {
    font-size: 16px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}

.btn-secondary[b-y4ldu5gozq] {
    background: #2a2e39;
    border: 1px solid #363c4e;
    color: #d1d4dc;
}

.btn-primary-pro[b-y4ldu5gozq] {
    background: #2962ff;
    color: white;
    border: none;
    transition: 0.2s;
}

    .btn-primary-pro:hover[b-y4ldu5gozq] {
        background: #1e53e5;
        transform: translateY(-1px);
    }

.cb-item[b-y4ldu5gozq] {
    display: flex; /* Kích hoạt Flexbox */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.item-logo img[b-y4ldu5gozq] {
    width: 32px;
    height: 32px;
    object-fit: contain; /* Giữ tỷ lệ logo không bị méo */
    margin-right: 12px;
}

.item-info[b-y4ldu5gozq] {
    display: flex;
    flex-direction: column; /* Xếp chồng hàng trên/hàng dưới */
}

.stock-code[b-y4ldu5gozq] {
    font-weight: bold;
    font-size: 14px;
}

.stock-name[b-y4ldu5gozq] {
    font-size: 12px;
    color: #666;
}

/* Danh sách đổ xuống - Nền Azure, Chữ Đen */
.cb-list[b-y4ldu5gozq] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 350px;
    max-height: 300px;
    overflow-y: auto !important;
    /* Màu nền Azure cực kỳ nổi bật trên nền đen */
    background: #F0FFFF !important;
    border: 1px solid #ADD8E6 !important; /* Viền bao ngoài xanh nhạt hơn */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border-radius: 6px;
    z-index: 10000;
}

/* Chữ trong danh sách (Chữ đen) */
.stock-code[b-y4ldu5gozq] {
    color: #000000 !important; /* CHỮ ĐEN CỰC NÉT */
    font-weight: 800;
    font-size: 14px;
    margin-right: 12px;
}

.stock-name[b-y4ldu5gozq] {
    color: #333333 !important; /* Xám đậm thay vì đen để dịu mắt */
    font-size: 13px;
}

.cb-list-header[b-y4ldu5gozq] {
    background: #E0FFFF;
    color: #4682B4; /* Xanh thép cho tiêu đề */
    padding: 8px 16px;
    font-weight: bold;
    font-size: 12px;
}

.cb-item[b-y4ldu5gozq] {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* 🚀 ĐƯỜNG KẺ MỜ ĐEN CỦA BÁC ĐÂY */
    border-bottom: 1px solid #000 !important;
    transition: background 0.15s ease;
}

    /* Loại bỏ gạch ở dòng cuối cùng để nhìn tinh tế hơn */
    .cb-item:last-child[b-y4ldu5gozq] {
        border-bottom: none !important;
    }

    /* Hiệu ứng khi hover */
    .cb-item:hover[b-y4ldu5gozq] {
        background: rgba(176, 224, 230, 0.5) !important; /* Xanh Azure đậm hơn khi hover */
    }

/* =======================================================
   BỘ NÚT NHẤN NHẢ (MOMENTARY PUSH BUTTON) CHUẨN PRO
   ======================================================= */

/* 1. TRẠNG THÁI BÌNH THƯỜNG (OFF - LÒ XO NẢY LÊN) */
.action-btn[b-y4ldu5gozq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #c8d3df; /* Màu chữ xám bạc sang trọng */
    cursor: pointer;
    /* Hiệu ứng nền 3D với Gradient nhẹ */
    background: linear-gradient(180deg, #2b3139 0%, #22262c 100%);
    border: 1px solid #363c45; /* Viền phay xước nhẹ */
    /* Đổ bóng kép: Bóng đổ ngoài tạo độ nổi + Bóng trắng hắt viền trong */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* Chống bôi đen text khi click chuột liên tục (Dấu hiệu của web Pro) */
    user-select: none;
    -webkit-user-select: none;
    /* Gia tốc lò xo: Chậm ở đầu, nảy nhanh ở cuối */
    transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

    /* 2. TRẠNG THÁI HOVER (ĐƯA CHUỘT VÀO) */
    .action-btn:hover:not(:disabled)[b-y4ldu5gozq] {
        background: linear-gradient(180deg, #323842 0%, #282c34 100%);
        border-color: #4a515c;
        /* Nhấc nhẹ nút lên 1 pixel */
        transform: translateY(-1px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* 3. TRẠNG THÁI ON (NHẤN XUỐNG - ĐÓNG MẠCH) */
    .action-btn:active:not(:disabled)[b-y4ldu5gozq] {
        /* Ép nút lún xuống 5% và đẩy xuống mặt phẳng */
        transform: scale(0.95) translateY(1px);
        /* Đổi màu xanh Neon đặc trưng của Trading */
        background: #00bcd4;
        color: #ffffff;
        border-color: transparent;
        /* Đổ bóng chìm (inset) để tạo cảm giác lõm sâu vào bề mặt + Hiệu ứng Glow tỏa sáng */
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 188, 212, 0.4);
    }

    /* 4. TÙY BIẾN RIÊNG CHO NÚT "GỠ BỎ" (MÀU ĐỎ) */
    .action-btn.btn-danger:active:not(:disabled)[b-y4ldu5gozq] {
        background: #f44336;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3), 0 0 12px rgba(244, 67, 54, 0.4);
    }

    /* Hiệu ứng viền đỏ mờ khi đưa chuột vào nút Gỡ bỏ */
    .action-btn.btn-danger:hover:not(:disabled)[b-y4ldu5gozq] {
        border-color: rgba(244, 67, 54, 0.4);
    }

    /* 5. TRẠNG THÁI NGẮT NGUỒN (DISABLED) */
    .action-btn:disabled[b-y4ldu5gozq] {
        opacity: 0.4;
        cursor: not-allowed;
        background: #1e2227; /* Màu nền chết */
        border-color: #2b3139;
        box-shadow: none; /* Mất độ nổi 3D */
        color: #6a7382;
        transform: none; /* Khóa cứng, không cho lún */
    }
/* 🚀 HIỆU ỨNG LỚP PHỦ MÀN HÌNH KHI ĐANG PENDING */
.chart-pending-overlay[b-y4ldu5gozq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Phủ đen mờ */
    backdrop-filter: blur(4px); /* Làm nhòe đồ thị bên dưới */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Nổi lên trên cùng */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none; /* Để chuột xuyên qua nếu cần */
}
/* Tùy biến ô Input Date cho nền đen */
.heatmap-date-picker[b-y4ldu5gozq] {
    background-color: #1e222d !important; /* Màu nền khớp với toolbar */
    color: #ffffff !important; /* Chữ trắng */
    border: 1px solid #454a55 !important; /* Viền sáng hơn để nổi bật */
    padding: 6px 10px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    cursor: pointer;
}

    /* Đổi màu icon lịch sang trắng để nhìn thấy nút bấm */
    .heatmap-date-picker[b-y4ldu5gozq]::-webkit-calendar-picker-indicator {
        filter: invert(1) hue-rotate(180deg) brightness(1.5);
        cursor: pointer;
    }

    /* Hiệu ứng hover cho chuyên nghiệp */
    .heatmap-date-picker:hover[b-y4ldu5gozq] {
        border-color: #2962ff !important; /* Viền xanh khi di chuột vào */
    }
/* Tùy chỉnh riêng cho label NGÀY */
.ngay-label[b-y4ldu5gozq] {
    color: #29b6f6 !important; /* Màu xanh dương sáng (Sky Blue) */
    font-size: 12px; /* Tăng chút cho dễ đọc */
    font-weight: bold;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(41, 182, 246, 0.5); /* Tạo hiệu ứng sáng nhẹ */
}

/* Đảm bảo ô input date vẫn đồng bộ */
.heatmap-date-picker[b-y4ldu5gozq] {
    background-color: #1e222d !important;
    color: #ffffff !important;
    border: 1px solid #454a55 !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

    .heatmap-date-picker[b-y4ldu5gozq]::-webkit-calendar-picker-indicator {
        filter: invert(1) hue-rotate(180deg) brightness(1.5);
        cursor: pointer;
    }
/* /Components/Pages/TuTruView.razor.rz.scp.css */
.tu-tru-container[b-zctsj8z7xy] {
    overflow-x: auto;
}

.table[b-zctsj8z7xy] {
    table-layout: fixed;
    width: 100%;
    font-size: 0.9rem;
}

    .table th[b-zctsj8z7xy], .table td[b-zctsj8z7xy] {
        vertical-align: middle;
        text-align: center;
        padding: 8px 4px;
    }

.col-fixed[b-zctsj8z7xy] {
    width: 120px;
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Tô màu hàng tiêu đề */
thead th[b-zctsj8z7xy] {
    background-color: #e9ecef;
}
/* /Components/Pages/VanTrinhView.razor.rz.scp.css */
.van-trinh-container[b-tfjbxi5p9s] {
    overflow-x: auto;
    width: 100%;
}

    .van-trinh-container table[b-tfjbxi5p9s] {
        min-width: 800px; /* Đảm bảo bảng không bị co quá nhỏ trên mobile */
        font-size: 0.9rem;
    }

.col-fixed[b-tfjbxi5p9s] {
    width: 150px;
    background-color: #f8f9fa;
    font-weight: bold;
}

.table-bordered th[b-tfjbxi5p9s], .table-bordered td[b-tfjbxi5p9s] {
    border: 1px solid #dee2e6;
    padding: 8px;
}body[b-tfjbxi5p9s] {
}
/* /Components/Pages/XemTuoiLamNha.razor.rz.scp.css */
/* Màu sắc chủ đạo: Dark Theme & Gold Accent */

.luxury-container[b-2cku4vkqan] {
    min-height: 100%; /* Sửa thành min-height để nó tự giãn ra khi nội dung dài */
    background-color: #0f172a;
    color: #e2e8f0;
    padding: 2rem;
    padding-bottom: 5rem !important; /* Ép buộc cách đáy một khoảng lớn */
    display: flow-root; /* Ngăn chặn việc margin của bảng bị sập ra ngoài container */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.good-years-section[b-2cku4vkqan] {
    background-color: #1e293b;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid #334155;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem; /* Thêm dòng này */
    text-align: center;
}


.max-w-wrapper[b-2cku4vkqan] {
    max-width: 900px;
    margin: 0 auto;
}

/* Header */
.header-section[b-2cku4vkqan] {
    text-align: center;
    margin-bottom: 3rem;
}

.title[b-2cku4vkqan] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #f59e0b; /* Amber 500 */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.subtitle[b-2cku4vkqan] {
    color: #94a3b8;
    font-size: 1.125rem;
}

.divider[b-2cku4vkqan] {
    width: 6rem;
    height: 4px;
    background-color: #d97706; /* Amber 600 */
    margin: 1rem auto;
    border-radius: 4px;
}

/* Form Nhập liệu */
.form-card[b-2cku4vkqan] {
    background-color: #1e293b; /* Slate 800 */
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid #334155;
    margin-bottom: 2.5rem;
}

.form-layout[b-2cku4vkqan] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: center;
}

.input-group[b-2cku4vkqan] {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}

    .input-group label[b-2cku4vkqan] {
        color: #fbbf24; /* Amber 400 */
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.luxury-input[b-2cku4vkqan] {
    width: 100%;
    background-color: #0f172a;
    border: 1px solid #475569;
    color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

    .luxury-input:focus[b-2cku4vkqan] {
        outline: none;
        border-color: #f59e0b;
        box-shadow: 0 0 0 1px #f59e0b;
    }

.btn-submit[b-2cku4vkqan] {
    width: 100%;
    background: linear-gradient(to right, #d97706, #f59e0b);
    color: #0f172a;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

    .btn-submit:hover[b-2cku4vkqan] {
        transform: scale(1.05);
        background: linear-gradient(to right, #f59e0b, #fbbf24);
    }

/* Kết quả tổng quan */
.result-section[b-2cku4vkqan] {
    animation: fadeInUp-b-2cku4vkqan 0.5s ease-out;
}

.result-header[b-2cku4vkqan] {
    text-align: center;
    margin-bottom: 2rem;
}

    .result-header h2[b-2cku4vkqan] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .result-header span[b-2cku4vkqan] {
        color: #f59e0b;
    }

.badge[b-2cku4vkqan] {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 1.125rem;
}

.badge-success[b-2cku4vkqan] {
    background-color: rgba(20, 83, 45, 0.5);
    border: 1px solid #22c55e;
    color: #4ade80;
}

.badge-error[b-2cku4vkqan] {
    background-color: rgba(127, 29, 29, 0.5);
    border: 1px solid #ef4444;
    color: #f87171;
}

/* Lưới 3 yếu tố */
.grid-cards[b-2cku4vkqan] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.card[b-2cku4vkqan] {
    background-color: #1e293b;
    padding: 1.5rem;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.card-error[b-2cku4vkqan] {
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.card-success[b-2cku4vkqan] {
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.card-icon[b-2cku4vkqan] {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 4rem;
    opacity: 0.05;
}

.card h3[b-2cku4vkqan] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #f1f5f9;
    margin-bottom: 1rem;
}

.card p[b-2cku4vkqan] {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    min-height: 60px;
}

.status-error[b-2cku4vkqan] {
    color: #f87171;
    font-weight: bold;
}

.status-success[b-2cku4vkqan] {
    color: #4ade80;
    font-weight: bold;
}

/* Animations */
@keyframes fadeInUp-b-2cku4vkqan {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Nút Điều Hướng --- */
.nav-actions[b-2cku4vkqan] {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: flex-start;
}

.btn-back[b-2cku4vkqan] {
    background-color: transparent;
    color: #94a3b8; /* Slate 400 */
    border: 1px solid #475569; /* Slate 600 */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-back:hover[b-2cku4vkqan] {
        color: #f59e0b; /* Amber 500 */
        border-color: #f59e0b;
        background-color: rgba(245, 158, 11, 0.1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

.back-icon[b-2cku4vkqan] {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.btn-back:hover .back-icon[b-2cku4vkqan] {
    transform: translateX(-3px); /* Hiệu ứng lùi mũi tên nhẹ khi hover */
}

/* --- Khung Khuyến Cáo --- */
.recommendation[b-2cku4vkqan] {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: rgba(127, 29, 29, 0.3); /* Nền đỏ đậm mờ */
    border: 1px solid rgba(239, 68, 68, 0.4); /* Viền đỏ tinh tế */
    border-radius: 0.5rem;
    color: #fca5a5; /* Chữ màu đỏ pastel */
    font-size: 0.85rem;
    line-height: 1.4;
}

    .recommendation strong[b-2cku4vkqan] {
        color: #ef4444; /* Chữ "Khuyến cáo" nổi bật hơn */
        display: block;
        margin-bottom: 0.25rem;
    }
/* --- Bảng Các Năm Tốt --- */
.good-years-section[b-2cku4vkqan] {
    background-color: #1e293b; /* Đồng bộ nền card Slate 800 */
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid #334155; /* Đồng bộ viền */
    margin-top: 2.5rem;
    text-align: center;
}

    .good-years-section h3[b-2cku4vkqan] {
        color: #f59e0b; /* Màu vàng Gold (Amber 500) */
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.table-responsive[b-2cku4vkqan] {
    width: 100%;
    overflow-x: auto;
}

.luxury-table[b-2cku4vkqan] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    overflow: hidden;
}

    .luxury-table thead[b-2cku4vkqan] {
        background-color: #0f172a; /* Nền tối hơn cho tiêu đề bảng */
    }

    .luxury-table th[b-2cku4vkqan] {
        padding: 1rem;
        color: #fbbf24; /* Amber 400 */
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #334155;
    }

    .luxury-table td[b-2cku4vkqan] {
        padding: 1.2rem 1rem;
        color: #e2e8f0; /* Slate 200 - Chữ xám sáng dễ đọc */
        font-size: 1.05rem;
        font-weight: 500;
        border-bottom: 1px solid #334155;
        transition: background-color 0.2s ease;
    }

    .luxury-table tbody tr:last-child td[b-2cku4vkqan] {
        border-bottom: none; /* Bỏ viền dòng cuối cùng */
    }

    .luxury-table tbody tr:hover td[b-2cku4vkqan] {
        background-color: rgba(245, 158, 11, 0.05); /* Hiệu ứng hover vệt vàng gold nhạt */
    }

.year-highlight[b-2cku4vkqan] {
    color: #4ade80 !important; /* Xanh lá sáng (Success) cho cột năm Dương */
    font-weight: 700 !important;
    font-size: 1.15rem !important;
}