/* --- style.css - PHIÊN BẢN MACOS SEQUOIA --- */

/* --- THIẾT LẬP TỔNG THỂ: FONT VÀ MÀU SẮC --- */
:root {
    --mac-bg-color: #f6f6f6; /* Nền xám rất nhạt */
    --mac-card-bg-color: rgba(255, 255, 255, 0.8); /* Nền thẻ/cửa sổ trắng mờ */
    --mac-border-color: rgba(0, 0, 0, 0.1); /* Viền xám nhạt */
    --mac-text-color: #333; /* Màu chữ chính */
    --mac-text-secondary-color: #666; /* Màu chữ phụ */
    --mac-accent-color: #007aff; /* Màu xanh dương nhấn của Apple */
    --mac-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ nhàng */
    --mac-border-radius: 12px; /* Bo góc chuẩn */
}

body {
    background-color: var(--mac-bg-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--mac-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page-content {
    padding-top: 75px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    margin-left: 0;
    width: 100%;
    transition: margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* KHI SIDEBAR MỞ: Đẩy nội dung chính sang phải */
.sidebar.is-open ~ #page-content {
    margin-left: calc(20rem + 15px); /* Bằng chiều rộng sidebar + khoảng cách của nó */
}


/* --- HEADER CHÍNH CỦA ỨNG DỤNG (GIAO DIỆN THANH CỐ ĐỊNH) --- */
.sticky-header {
    position: fixed; /* Cố định trên cùng */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.75rem 2rem; /* Thêm padding cho đẹp */
    background-color: var(--mac-card-bg-color); /* Vẫn dùng nền mờ */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mac-border-color); /* Thêm đường kẻ dưới */
    z-index: 1050; /* Đảm bảo header nổi lên trên */
}

/* QUAN TRỌNG: Quy tắc này sửa lỗi dropdown bị lệch */
.sticky-header .input-group {
    position: relative;
}

/* --- SIDEBAR VÀ NÚT TOGGLE --- */
/* THAY ĐỔI LỚN: Sidebar cũng "nổi" bên trái */
.sidebar {
    position: fixed;
    top: 70px; /* Cách lề trên */
    bottom: 15px; /* Cách lề dưới */
    left: 15px; /* Cách lề trái */
    width: 20rem;
    padding: 1.5rem 1rem;
    background-color: var(--mac-card-bg-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mac-border-color);
    border-radius: var(--mac-border-radius);
    box-shadow: var(--mac-shadow);
    transform: translateX(calc(-100% - 30px)); /* Ẩn đi hoàn toàn */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1090;
    display: flex;
    flex-direction: column;
}

.sidebar.is-open {
    transform: translateX(0);
}

.sidebar h4 {
    padding-left: 0.5rem;
}

.scrollable-checklist {
    flex-grow: 1; /* Tự động co giãn chiều cao */
    overflow-y: auto;
    padding-right: 10px;
}

.sidebar-toggle {
    /* Các thuộc tính mới cho giao diện hiện đại */
    background-color: transparent !important; /* QUAN TRỌNG: Nền trong suốt để hòa vào header */
    border: none !important;                 /* QUAN TRỌNG: Bỏ viền */
    color: var(--mac-text-secondary-color);   /* Màu icon xám cho tinh tế */
    font-size: 1.1rem;                        /* Kích thước icon lớn hơn một chút */
    padding: 0.25rem 0.5rem;                  /* Thêm chút đệm xung quanh icon */
    margin-right: 0.5rem;                     /* Tạo khoảng cách với ô nhập liệu "FPT" */

    /* GIỮ LẠI: Hiệu ứng chuyển động mượt mà */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    /* XÓA: Các thuộc tính định vị và hình tròn không còn cần thiết */
    /* position, bottom, left, border-radius, width, height, box-shadow, z-index đã được loại bỏ */
}

.sidebar-toggle:hover {
    color: var(--mac-text-color); /* Đổi màu icon thành đen khi người dùng di chuột vào */
}

.sidebar-toggle.is-open {
    /* CHỈ GIỮ LẠI: Hiệu ứng xoay 180 độ khi sidebar được mở */
    transform: rotate(180deg);
    
    /* XÓA: Thuộc tính "left" không còn cần thiết nữa */
}

.content-overlay {
    /* Không cần overlay nữa, vì sidebar nổi lên trên */
    display: none;
}


/* --- THẺ CHỨA BIỂU ĐỒ (MỚI) --- */
.chart-card {
    background-color: white;
    border-radius: var(--mac-border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem; /* Thay thế cho mb-3 của row */
    border: 1px solid var(--mac-border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
}
.chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.chart-card .graph-container {
    padding: 0 !important;
}


/* --- METRICS --- */
.metric-container {
    padding: 10px 15px;
    border-left: 1px solid #e9ecef;
}
.metric-container:first-child {
    border-left: none;
}
.metric-label {
    font-size: 12px;
    color: var(--mac-text-secondary-color);
    margin-bottom: 4px;
}
.metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--mac-text-color);
}


/* --- BẢNG DỮ LIỆU CHI TIẾT --- */
/* THAY ĐỔI LỚN: Giao diện bảng sạch sẽ, hiện đại hơn */
.table-container {
    max-height: 70vh;
    overflow: auto;
    border-radius: var(--mac-border-radius);
    border: 1px solid var(--mac-border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.financial-statement-table {
    font-size: 0.82rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.financial-statement-table thead th {
    position: sticky;
    top: 0;
    background-color: var(--mac-card-bg-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 10px;
    font-weight: 600;
    color: var(--mac-text-color);
    white-space: nowrap;
    border-bottom: 1px solid var(--mac-border-color);
    text-align: right;
    z-index: 20;
}

.financial-statement-table thead th:first-child {
    left: 0;
    width: 320px;
    text-align: left;
    z-index: 30;
    border-right: 1px solid var(--mac-border-color);
}

.financial-statement-table tbody td {
    padding: 10px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    white-space: nowrap;
    color: var(--mac-text-secondary-color);
    text-align: right;
}

.financial-statement-table tbody tr:last-child td {
    border-bottom: none;
}

.financial-statement-table tbody td:first-child.indicator-name-cell {
    position: sticky;
    left: 0;
    background-color: #fff !important;
    z-index: 10;
    width: 320px;
    text-align: left;
    font-weight: 500;
    color: var(--mac-text-color);
    border-right: 1px solid var(--mac-border-color);
}

.indicator-main {
    font-weight: 700 !important;
    color: #000 !important;
}

.indicator-detail { padding-left: 20px !important; }
.indicator-detail-deep { padding-left: 35px !important; font-style: italic; }
.indicator-sub { padding-left: 25px !important; font-style: italic; color: #555; }

.financial-statement-table tbody tr:hover td,
.financial-statement-table tbody tr:hover td:first-child {
    background-color: #f5faff !important;
}


/* --- CÁC THÀNH PHẦN KHÁC (TABS, BUTTONS, INPUTS) --- */
.nav-tabs {
    border-bottom: 1px solid var(--mac-border-color);
}

.nav-tabs .nav-link {
    color: var(--mac-text-secondary-color) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link.active {
    color: var(--mac-accent-color) !important;
    font-weight: 600;
    border-bottom: 3px solid var(--mac-accent-color) !important;
    background-color: transparent !important;
}

.btn, .form-control, .input-group-text, .accordion-button, .accordion-item {
    border-radius: 8px !important;
}

.accordion-item {
    border: 1px solid var(--mac-border-color) !important;
    margin-bottom: 0.5rem;
    background-color: #fff;
}
.accordion-button {
    background-color: #fff !important;
    box-shadow: none !important;
}

mark {
    background-color: #ffde6a;
    padding: 0 3px;
    border-radius: 4px;
    color: #000;
    font-weight: 600;
}

/* --- CSS CHO TÍNH NĂNG KÉO-THẢ --- */
.draggable-chart {
    cursor: grab; /* Biểu tượng bàn tay mở khi trỏ vào */
    user-select: none; /* Ngăn bôi đen chữ khi kéo */
}

.draggable-chart.is-dragging {
    cursor: grabbing; /* Biểu tượng bàn tay nắm khi đang kéo */
    opacity: 0.6; /* Làm mờ biểu đồ đang được kéo đi */
    border: 2px dashed var(--mac-accent-color);
}

/* --- CSS CHO BỐ CỤC GRID CỦA TAB TỔNG QUAN --- */
.chart-grid {
    display: grid;
    gap: 1rem; /* Khoảng cách giữa các biểu đồ */
}

.grid-1-col {
    grid-template-columns: 1fr;
}

.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 1200px) {
    .grid-3-col {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .grid-2-col, .grid-3-col {
        grid-template-columns: 1fr;
    }
}

/* --- CSS CHO MENU WATCHLIST 2 CẤP --- */

/* Định dạng cho mỗi mục trong menu cấp 1 (ví dụ: "Chờ mua", "SVIP") */
.nested-dropdown-item {
    position: relative; /* QUAN TRỌNG NHẤT: Đặt làm gốc định vị cho menu con */
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: block;
    color: var(--mac-text-color);
    transition: background-color 0.15s ease-in-out;
}

/* Hiệu ứng khi rê chuột qua một mục cấp 1 */
.nested-dropdown-item:hover {
    background-color: #f0f0f0;
}

/* Định dạng cho menu cấp 2 (danh sách các mã cổ phiếu) */
.nested-dropdown-submenu {
    display: none; /* QUAN TRỌNG: Mặc định ẩn menu con đi */
    position: absolute; /* Giúp menu con 'nổi' lên trên các phần tử khác */
    top: -5px; /* Dịch lên một chút cho đẹp */
    left: 100%; /* Đẩy menu con sang hết bên phải của mục cha */
    min-width: 150px; /* Độ rộng tối thiểu của menu con */
    background-color: #ffffff; /* THAY ĐỔI: Nền trắng đục, không còn mờ */
    border-radius: var(--mac-border-radius);
    box-shadow: var(--mac-shadow);
    border: 1px solid var(--mac-border-color);
    z-index: 1060; /* Đảm bảo nó nổi lên trên các thành phần khác */
    padding: 0.5rem 0; /* Đệm bên trong menu con */
}

/* PHÉP MÀU XẢY RA Ở ĐÂY */
/* Khi rê chuột vào mục cha (.nested-dropdown-item:hover), 
   thì menu con (.nested-dropdown-submenu) bên trong nó sẽ hiện ra */
.nested-dropdown-item:hover .nested-dropdown-submenu {
    display: block;
}

/* === CSS MỚI CHO CÁC MỤC TRONG WATCHLIST DROPDOWN === */

/* Định dạng cho cả một hàng chứa mã cổ phiếu (VD: hàng "FPT   x") */
.watchlist-stock-row {
    display: flex; /* Dùng flexbox để căn chỉnh tên mã và nút xóa */
    justify-content: space-between; /* Đẩy tên mã và nút xóa về 2 phía */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 0.5rem 1rem; /* Tạo khoảng cách bên trong */
    cursor: default; /* Con trỏ mặc định cho cả hàng */
    transition: background-color 0.15s ease-in-out;
}

/* Hiệu ứng khi rê chuột qua CẢ HÀNG */
.watchlist-stock-row:hover {
    background-color: var(--mac-accent-color); /* Nền chuyển sang màu xanh */
}

/* Định dạng cho tên mã cổ phiếu (FPT, HSG,...) */
.watchlist-stock-name {
    flex-grow: 1; /* Cho phép tên mã chiếm hết không gian còn lại */
    color: var(--mac-text-color); /* Màu chữ mặc định */
    text-decoration: none; /* Bỏ gạch chân */
    cursor: pointer; /* Chuyển thành con trỏ bàn tay khi rê vào tên mã */
}

/* Khi rê chuột vào CẢ HÀNG, tên mã bên trong sẽ đổi thành màu trắng */
.watchlist-stock-row:hover .watchlist-stock-name {
    color: white;
}

/* Định dạng cho nút xóa nhanh (dấu x) */
.quick-delete-button {
    color: #999; /* Màu xám nhạt cho icon */
    padding: 0 0.25rem; /* Căn chỉnh lại khoảng cách */
}
.quick-delete-button:hover {
    color: #333; /* Đổi màu đậm hơn khi rê chuột vào */
}

/* Khi rê chuột vào CẢ HÀNG, dấu x cũng đổi thành màu trắng */
.watchlist-stock-row:hover .quick-delete-button {
    color: white;
}

/* Bỏ hiệu ứng focus (viền xanh) của nút xóa khi được click */
.quick-delete-button:focus {
    box-shadow: none !important;
}

/* Định dạng cho chữ 'Trống' khi watchlist không có mã nào */
.nested-dropdown-stock-item-empty {
    display: block;
    padding: 0.25rem 1rem;
    color: var(--mac-text-secondary-color);
    font-style: italic;
}

/* File: assets/styles.css */

/* ================================================= */
/* ===  TINH CHỈNH BẢNG SO SÁNH NGANG HÀNG (MỚI)  === */
/* ================================================= */

/* Định dạng cho Card chứa biểu đồ so sánh */
.peer-comparison-card {
    border: none !important; /* Bỏ viền của Card */
    box-shadow: none !important; /* Bỏ bóng mờ */
    background-color: #f8f9fa !important; /* Màu nền xám rất nhạt */
    border-radius: 8px; /* Bo góc nhẹ */
}

/* Định dạng cho phần thân của Card */
.peer-comparison-card .card-body {
    padding: 0.75rem !important; /* Căn chỉnh lại padding */
}

/* Định dạng cho câu nhận định so sánh */
.peer-comparison-card .small {
    font-size: 12px;
    color: #495057;
}

/* ĐỊNH DẠNG THANH CUỘN CHO BIỂU ĐỒ */
.peer-chart-scroll-container {
    max-height: 450px; /* Giới hạn chiều cao tối đa, bạn có thể thay đổi số này */
    overflow-y: auto;  /* Tự động hiện thanh cuộn dọc khi cần */
    overflow-x: hidden; /* Ẩn thanh cuộn ngang */
    flex-grow: 1; /* Cho phép co giãn để lấp đầy không gian còn lại */
}

/* Tinh chỉnh thanh cuộn cho đẹp hơn (hoạt động trên Chrome, Edge, Safari) */
.peer-chart-scroll-container::-webkit-scrollbar {
  width: 6px; /* Độ rộng thanh cuộn */
}

.peer-chart-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Màu của rãnh cuộn */
  border-radius: 10px;
}

.peer-chart-scroll-container::-webkit-scrollbar-thumb {
  background: #cccccc; /* Màu của con trượt */
  border-radius: 10px;
}

.peer-chart-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* Màu con trượt khi rê chuột vào */
}

/* assets/custom.css */

/* Nút "Cách thức chấm điểm */

.btn-methodology {
    background-color: #f6f7f8; /* Nền trắng */
    border-color: #cfcfcf; /* Viền xám nhạt (tương tự màu light của Bootstrap) */
    color: #474747; /* Màu chữ xanh dương (màu của tiêu đề ứng dụng) */
    transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
    font-weight: 300; /* Có thể làm chữ đậm hơn một chút để nổi bật */
}

.btn-methodology:hover {
    background-color: #525252; /* Màu xanh dương (màu current trong chart) */
    border-color: #212122;
    color: #fff; /* Chữ màu trắng */
}


/* Tùy chỉnh kích thước font cho tiêu đề chính */
#main-title {
    font-size: 1.6rem; /* Thay đổi giá trị này theo ý muốn của bạn */
    /* Ví dụ: 
    font-size: 24px; 
    font-size: 2rem; 
    */
    font-weight: 500; /* Có thể làm đậm hơn để giữ sự nổi bật */
}


/* ================================================================== */
/* === CSS CHO MODAL SO SÁNH (v3 - GIAO DIỆN DẠNG LƯỚI) === */
/* ================================================================== */

/* --- Thanh bar Âm/Dương (Giữ nguyên logic) --- */
.comparison-bar-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.6rem; /* Làm thanh bar mỏng hơn một chút */
}

.comparison-bar-left,
.comparison-bar-right {
    display: flex;
    height: 100%;
    background-color: #f0f2f5; /* <-- THÊM DÒNG NÀY ĐỂ TẠO NỀN CHO THANH BAR */
    border-radius: 3px; /* <-- THÊM DÒNG NÀY ĐỂ BO GÓC CẢ THANH NỀN */
}

.comparison-bar-left {
    width: 50%;
    justify-content: flex-end;
    border-right: 1px solid #e9ecef; 
    padding-right: 2px;
}

.comparison-bar-right {
    width: 50%;
    justify-content: flex-start;
    padding-left: 2px;
}

.bar-segment {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease-in-out;
}

.bar-negative {
    background-color: #fc8080; /* Màu đỏ */
}

.bar-positive-current {
    background-color: #007aff; /* Màu xanh dương cho mã hiện tại */
}

.bar-positive-peer {
    background-color: #cdcdcd; /* Màu xám cho các mã khác */
}


/* --- Layout chính của Modal --- */
.comparison-modal-body {
    background-color: #f8f9fa; /* Nền xám rất nhạt cho toàn bộ modal */
}

.comparison-header {
    padding: 1rem 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

.comparison-content {
    padding: 1.5rem;
}

/* --- Tiêu đề các nhóm lớn --- */
.comparison-group-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.5rem; /* Thêm khoảng cách nếu không phải nhóm đầu tiên */
}
.comparison-content > .comparison-group-title:first-child {
    margin-top: 0;
}

/* --- Thẻ cho từng chỉ số --- */
.comparison-metric-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    height: 100%; /* Giúp các thẻ trong một hàng cao bằng nhau */
}
.comparison-metric-card .card-body {
    padding: 1rem;
}
.comparison-metric-card .metric-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
    color: #495057;
}

/* --- Hàng dữ liệu bên trong thẻ --- */
.metric-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 0.9rem;
}
.metric-row .ticker {
    width: 55px;
    font-weight: 500;
    white-space: nowrap;
}
.metric-row .value {
    width: 65px;
    text-align: right;
    font-weight: 500;
    padding-left: 10px;
}


/* ==== CARD GOM NHÓM CHỈ SỐ ==== */
.comparison-group-card{
    border:1px solid var(--mac-border-color);
    border-radius:var(--mac-border-radius);
    background:#fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07); /* Thêm bóng mờ nhẹ cho đẹp */
    margin-bottom: 1.25rem; /* Tạo khoảng cách giữa các cụm */
}
.comparison-group-card .card-header{
    background-color: #f8f9fa; /* Màu nền xám rất nhạt cho tiêu đề */
    font-size:0.9rem; /* Chữ to hơn một chút cho rõ ràng */
    font-weight: 600; /* In đậm tiêu đề nhóm */
    padding: 0.5rem 1rem; /* Căn chỉnh lại padding */
    border-bottom: 1px solid var(--mac-border-color);
}
.comparison-group-card .card-body{
    padding: 1rem 1.25rem; /* Tăng padding cho nội dung bên trong thoáng hơn */
}


/* ==== THẺ CON (chứa từng metric như NPL, LLR) ==== */
.metric-card{
    background:transparent;
    border:none;
}
.metric-card .card-header{
    /* Tiêu đề của metric (NPL, LLR,...) */
    font-size:0.82rem; /* Chữ nhỏ lại như bạn muốn */
    font-weight: 600; /* Vẫn giữ in đậm để phân biệt */
    padding: 0 0 0.5rem 0; /* Chỉ cần padding dưới */
    border-bottom: 1px solid #f0f0f0; /* Thêm đường kẻ mờ phân tách */
    background-color: transparent;
    margin-bottom: 0.5rem;
}
.metric-card .card-body{
    padding:0 !important; /* Bỏ hết padding của body thẻ con */
}

/* Tinh chỉnh lại giao diện modal một chút */
.comparison-modal-body .metric-row {
    padding: 4px 0; /* Tăng nhẹ khoảng cách giữa các hàng so sánh */
    font-size: 0.85rem; /* Giảm cỡ chữ trong hàng */
}


/* ---- CSS CHO LAYOUT SO SÁNH NGANG (PHIÊN BẢN HOÀN THIỆN V7 - CĂN CHỈNH ICON) ---- */

/* Container chính cho danh sách, có thanh cuộn */
.peer-chart-scroll-container {
    max-height: 400px; 
    overflow-y: auto;  
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
}

/* ---- Đoạn CSS Mới - Làm nhỏ icon ---- */
/* Tùy chỉnh nút bấm thêm/bớt */
.add-compare-btn {
    /* Kích thước & Hình dạng - QUAN TRỌNG NHẤT */
    width: 15px !important;      /* <<< THAY ĐỔI Ở ĐÂY: Giảm kích thước nút */
    height: 15px !important;     /* <<< THAY ĐỔI Ở ĐÂY: Giảm kích thước nút */
    min-width: 15px !important;  /* <<< THAY ĐỔI Ở ĐÂY: Giảm kích thước nút */
    min-height: 15px !important; /* <<< THAY ĐỔI Ở ĐÂY: Giảm kích thước nút */
    border-radius: 50% !important; 
    padding: 0 !important;       

    /* Căn chỉnh Icon vào chính giữa (giữ nguyên) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Tinh chỉnh Icon bên trong */
    font-size: 0.5rem;          /* <<< THAY ĐỔI Ở ĐÂY: Giảm kích thước icon */
    line-height: 1;             
}

/* Lớp vỏ bên ngoài của thanh bar */
.progress-bar-container {
    background-color: #e9ecef; 
    border-radius: 8px;    
    height: 10px;
    width: 100%;
    overflow: hidden; 
}

/* Thanh màu bên trong (thanh màu xanh hoặc cam) */
.progress-bar-inner {
    height: 100%; 
    border-radius: 8px;
    transition: width 0.4s ease-in-out; 
}

/* Màu sắc cho các loại thanh bar */
.progress-bar-inner.bar-current { background-color: #007aff; }
.progress-bar-inner.bar-average { background-color: #ff9500; }
.progress-bar-inner.bar-peer { background-color: #d1d1d6; }

/* Căn chỉnh chung cho một hàng */
.peer-comparison-row {
    margin-bottom: 7px !important;
    height: 20px;
}

/* Quy tắc cho Tên mã và Điểm số */
.peer-ticker, .peer-ticker-current, .peer-score {
    font-size: 0.75rem !important;
    display: flex;
    align-items: center;
    padding: 0;
}

.peer-ticker-current {
    font-weight: 600; 
}

.peer-score {
    font-weight: 600;   
    justify-content: flex-end; 
}


/* ===================================================================== */
/* === CODE MỚI CHO NÚT BÁO LỖI (NHỎ GỌN, LUÔN HIỂN THỊ TEXT) === */
/* ===================================================================== */

.report-bug-button {
    position: fixed;               /* Giữ nút cố định trên màn hình */
    bottom: 20px;                  /* Cách cạnh dưới 20px */
    left: 20px;                    /* Cách cạnh trái 20px */
    z-index: 1000;                 /* Nổi lên trên các thành phần khác */

    /* Bỏ width/height cố định, dùng padding để nút tự co giãn theo nội dung */
    padding: 8px 16px;             
    border-radius: 50px;           /* Bo tròn nhiều để tạo hình viên thuốc */
    
    background-color: #0d6efd;     /* Màu nền xanh dương */
    color: white;                  /* Màu của icon và chữ bên trong */
    text-decoration: none;         /* Bỏ gạch chân (nếu có) */
    cursor: pointer;               /* Biến con trỏ thành hình bàn tay */
    white-space: nowrap;           /* Ngăn không cho chữ bị xuống dòng */

    /* Căn giữa icon và chữ theo chiều dọc */
    display: flex;
    align-items: center;

    /* Kích thước của chữ và icon (nhỏ lại) */
    font-size: 14px;
    font-weight: 500;

    /* Đổ bóng cho nút trông nổi bật và hiện đại hơn */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);

    /* Hiệu ứng chuyển động mượt mà */
    transition: all 0.2s ease-in-out;
}

/* Hiệu ứng khi di chuột vào nút */
.report-bug-button:hover {
    transform: translateY(-3px); /* Di chuyển nhẹ lên trên khi hover */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25); /* Bóng đổ đậm hơn để tạo chiều sâu */
    background-color: #0b5ed7;   /* Màu nền đậm hơn */
}

/* ================================================= */
/* === CODE MỚI CHO FOOTER (CHÂN TRANG) === */
/* ================================================= */

.app-footer {
    padding: 2rem 0;             /* Tạo khoảng cách bên trong Footer (trên-dưới 2rem, trái-phải 0) */
    background-color: #f8f9fa;   /* Một màu nền xám rất nhạt, tinh tế */
    color: #6c757d;              /* Màu chữ xám, không quá nổi bật */
    text-align: center;          /* Căn giữa toàn bộ nội dung */
    font-size: 0.9rem;           /* Cỡ chữ nhỏ hơn một chút so với nội dung chính */
    border-top: 1px solid #e9ecef; /* Một đường kẻ mỏng ở trên để phân tách với nội dung */
}

/* Định dạng cho các link trong Footer */
.app-footer a {
    color: #0d6efd;              /* Màu xanh dương cho các link */
    text-decoration: none;       /* Bỏ gạch chân */
    font-weight: 500;            /* Chữ đậm hơn một chút */
    transition: color 0.2s ease-in-out; /* Hiệu ứng chuyển màu mượt mà */
}

/* Hiệu ứng khi di chuột vào link */
.app-footer a:hover {
    color: #0a58ca;              /* Màu xanh dương đậm hơn */
    text-decoration: underline;  /* Thêm lại gạch chân khi di chuột vào */
}

/* Định dạng cho các icon mạng xã hội */
.footer-social-icons a {
    font-size: 1.5rem;           /* Kích thước icon to hơn */
    margin: 0 10px;              /* Khoảng cách giữa các icon */
    color: #6c757d;              /* Màu xám mặc định cho icon */
}

/* Hiệu ứng khi di chuột vào icon */
.footer-social-icons a:hover {
    color: #0d6efd;              /* Đổi sang màu xanh khi di chuột vào */
    transform: translateY(-2px); /* Nhấc icon lên một chút */
}


/* --- CSS CHO HIỆU ỨNG BLUR PREVIEW AN TOÀN --- */

/* Lớp bọc ngoài cùng cho component bị khóa */
.blurred-preview-container {
    position: relative; /* Bắt buộc để lớp phủ hoạt động chính xác */
    overflow: hidden;   /* Đảm bảo các góc bo tròn của card được đẹp */
    border-radius: var(--bs-card-border-radius, 0.375rem); /* Lấy bo góc từ Bootstrap */
    height: 100%;       /* Luôn chiếm hết chiều cao của container cha */
    border: 2px dashed #e0e0e0; /* Thêm một đường viền đứt để trông giống placeholder */
}

/* Lớp này áp dụng hiệu ứng mờ cho biểu đồ giả lập */
.blurred-graph {
    filter: blur(2.5px);       /* Độ mờ của biểu đồ */
    transform: scale(1.1);  /* Phóng to nhẹ để che các cạnh bị mờ */
    pointer-events: none;   /* Ngăn người dùng click hay tương tác với biểu đồ mờ */
    height: 100%;
}

/* Lớp phủ chứa nội dung kêu gọi hành động */
.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 249, 250, 0.6); /* Nền màu sáng, hơi trong suốt */
    backdrop-filter: blur(0.5px); /* Thêm hiệu ứng thủy tinh mờ nhẹ cho lớp phủ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
}

.blurred-preview-container:hover .preview-overlay {
    background-color: rgba(233, 236, 239, 0.85); /* Đổi màu nền khi di chuột vào */
}


/* --- CSS CHO HIỆU ỨNG BLUR PREVIEW AN TOÀN --- */

/* Lớp bọc ngoài cùng cho component bị khóa */
.blurred-preview-container {
    position: relative; /* Bắt buộc để lớp phủ hoạt động chính xác */
    overflow: hidden;   /* Đảm bảo các góc bo tròn của card được đẹp */
    border-radius: var(--bs-card-border-radius, 0.375rem); /* Lấy bo góc từ Bootstrap */
    height: 100%;       /* Luôn chiếm hết chiều cao của container cha */
}


/* ================================================= */
/* ===  CSS CHO MENU NGƯỜI DÙNG MỚI (GỌN GÀNG)   === */
/* ================================================= */

.user-dropdown-toggle {
    background-color: transparent !important; /* Nền trong suốt */
    border: none !important;                 /* Bỏ viền */
    color: #495057 !important;               /* Màu chữ xám đậm */
    font-weight: 500;                        /* Chữ hơi đậm một chút */
    box-shadow: none !important;             /* Bỏ hiệu ứng đổ bóng của nút */
    padding-right: 1rem !important;          /* Thêm khoảng cách bên phải */
}

/* Tinh chỉnh mũi tên xổ xuống mặc định của Bootstrap */
.user-dropdown-toggle::after {
    margin-left: 0.5em;
    vertical-align: 0.15em;
}

/* Hiệu ứng khi di chuột vào */
.user-dropdown-toggle:hover, .user-dropdown-toggle:focus {
    color: #0059ff !important; /* Đổi màu chữ thành màu xanh dương chính của trang */
}

/* Làm cho chữ "Đăng xuất" có màu đỏ để cảnh báo */
.dropdown-item.text-danger {
    font-weight: 500;
}
.dropdown-item.text-danger:hover {
    color: white !important;
    background-color: #dc3545 !important;
}

/* ======================= */
/* FIX: User menu overflow */
/* ======================= */
.user-dropdown-toggle {
    max-width: 110px;              /* chỉnh 80-140px tuỳ ý */
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding-inline: 0.5rem !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-toggle .user-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

/* đảm bảo menu xổ xuống căn phải */
.user-dropdown-toggle + .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 160px;
}

.user-dropdown-toggle + .dropdown-menu .dropdown-divider {
    margin-block: 0.25rem;
}


/* ================================================== */
/* ===  CSS MỚI CHO LINK ĐĂNG NHẬP / ĐĂNG KÝ      === */
/* ================================================== */

/* Định dạng cho các link có class "auth-link" ở trạng thái bình thường */
a.auth-link {
    color: #333; /* Đặt màu chữ mặc định là màu đen xám (#333) cho dễ đọc */
    font-weight: 500; /* Giữ lại độ đậm của chữ */
    text-decoration: none !important; /* QUAN TRỌNG: Loại bỏ hoàn toàn gạch chân */
    transition: color 0.2s ease-in-out; /* Thêm hiệu ứng chuyển màu mượt mà trong 0.2 giây */
}

/* Định dạng cho link khi người dùng di chuột vào */
a.auth-link:hover {
    /* Đổi màu chữ thành màu xanh dương (lấy từ biến màu nhấn bạn đã định nghĩa) */
    color: var(--mac-accent-color, #007aff);
}