/* CKX updated style with brighter, premium colors */
body {
  font-family: "Segoe UI", sans-serif;
  background-color: #121212;
  color: #f2f2f2;
  padding-top: 70px; /* Thêm padding-top cho body để nội dung không bị navbar cố định che khuất */
}

img {
  max-width: 100%;
  height: auto;
}

/* Điều chỉnh riêng cho tab-review để kiểm soát độ rộng tổng thể */
#tab-review {
    /* Mặc định cho màn hình lớn, không giới hạn chiều rộng để nó mở rộng hết cỡ */
    max-width: none; 
}


@media (max-width: 767px) {
  /* Trên mobile, giới hạn lại chiều rộng để nội dung không bị quá rộng */
  #tab-review {
    max-width: 900px; /* Giữ lại max-width cho mobile */
    margin-left: auto;
    margin-right: auto;
  }

  #review-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    margin-top: 10px;
  }

  #valuation-card .text-end {
    text-align: center !important;
  }

  .navbar-toggler {
      margin-left: 1rem; /* Push toggler to the right */
  }

  /* Adjust review search box for small screens */
  .review-search-box-outside {
    flex-direction: column; /* Stack search box and dropdowns vertically */
    align-items: stretch;
    max-width: 90%; /* Adjust width for smaller screens */
  }

  .review-search-box-outside .search-input-custom {
      margin-bottom: 0.5rem !important; /* Space between stacked input and dropdowns */
  }

  .review-search-box-outside .review-search-button {
      position: static; /* Remove absolute positioning */
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 0.5rem;
      width: 100%; /* Make button full width */
      border-radius: 0.25rem !important; /* Make it rectangular */
  }

  .review-search-box-outside .review-dropdown-custom {
      width: 100%; /* Make dropdown full width */
      margin-left: 0 !important; /* Remove left margin */
      margin-bottom: 0.5rem; /* Space between stacked dropdowns */
  }

  /* Adjust chart controls for small screens */
  .chart-controls-top { /* Apply to the container of buttons */
      flex-direction: column; /* Stack buttons vertically */
      align-items: stretch; /* Make buttons full width */
      gap: 0.5rem; /* Space between buttons */
  }
  .chart-controls-top .btn { /* Apply to the buttons themselves */
      width: 100%;
      margin-right: 0 !important; /* Override me-2 */
  }

  /* Report page specific adjustments for small screens */
  .report-filter-form .col-md-4 {
      flex: 0 0 100%; /* Make each filter input full width */
      max-width: 100%;
  }
  .report-filter-form .d-flex {
      flex-direction: column;
      align-items: stretch;
  }
  .report-filter-form .d-flex .btn {
      width: 100%;
      margin-bottom: 0.5rem;
      margin-right: 0 !important;
  }
}

/* Custom theme colors */
.bg-primary {
  background-color: #00b7ff !important; /* Bright blue for Navbar - Reverted to original as per previous instruction */
}

/* New custom class for darker backgrounds, specifically for navbar */
.bg-dark-custom {
    background-color: #1a1a1a !important; /* This is the dark color you wanted for the navbar */
}

.bg-info {
  background-color: #5be5e5 !important; /* Aqua */
  color: #000 !important;
}

.bg-secondary {
  background-color: #3e3e3e !important; /* Darker grey for search input */
  color: #f2f2f2 !important;
}

.bg-success {
  background-color: #3bd671 !important; /* Fresh green */
  color: #000 !important;
}

.bg-danger {
  background-color: #e55b5b !important; /* Red for BELOW VALUE badge */
  color: #fff !important;
}

.text-info {
  color: #5be5e5 !important; /* Blue for valuation numbers */
}

.text-warning {
  color: #ffd43b !important; /* Yellow for profitability numbers */
}

.text-success {
  color: #3bd671 !important;
}

.text-light {
  color: #f2f2f2 !important;
}

.text-secondary {
  color: #aaaaaa !important;
}

.card-header strong {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.badge.fs-5 {
  padding: 0.75rem 1.25rem;
  font-weight: bold;
  border-radius: 12px;
  font-size: 1rem;
}

/* Navbar specific adjustments */
.navbar {
    padding: 0.75rem 1.5rem !important;
    position: fixed; /* Cố định navbar */
    top: 0; /* Luôn ở trên cùng */
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    z-index: 1030; /* Đảm bảo nó luôn ở trên các nội dung khác (Bootstrap modal z-index là 1050, nên cái này đủ thấp hơn modal mà vẫn cao hơn nội dung trang) */
}

.navbar-brand strong {
    font-size: 1.5rem;
}

.navbar .nav-link {
    color: #f2f2f2 !important;
    font-weight: normal;
    margin: 0 0.5rem;
    padding: 0.5rem 0;
}

.navbar .nav-link.active {
    color: #fff !important; /* White for active link text */
    border-bottom: 2px solid #fff; /* White underline for active link */
    padding-bottom: 0.5rem; /* Adjust padding for underline */
}

/* Removed Navbar Search Compact styles (from previous iterations) */
.navbar-search-compact {
    display: none; /* Hide this container */
}


/* Card general styling for review tab to match image's flat, bordered look */
/* Keep this for the main wrapping card */
#tab-review .card {
    background-color: #1a1a1a !important; /* Darker background for cards */
    border: 1px solid #3e3e3e !important; /* Subtle border */
    border-radius: 8px;
    overflow: hidden; /* Ensures child elements respect border-radius */
    margin-top: 1.5rem; /* Add some space below the search bar */
}

/* Specific styling for card-header, now applied broadly to all card headers on review tab */
#tab-review .card-header {
    background-color: #1a1a1a !important; 
    border-bottom: 1px solid #3e3e3e !important; 
    padding-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
    display: block !important; 
}

/* Specific styling for card-body, now applied broadly to all card bodies on review tab */
#tab-review .card-body {
    padding: 1.5rem !important; 
}

/* Specific styling for card-footer, for the newly added ACB card footer */
#tab-review .card-footer {
    background-color: #1a1a1a !important; /* Match card body background */
    border-top: 1px solid #3e3e3e !important; /* Subtle separator */
    padding: 0.75rem !important; /* Consistent padding */
    text-align: center; /* Center the badge */
}


/* New: Search Box OUTSIDE the card in Review Tab */
.review-search-box-outside {
    display: flex; /* Use flexbox for horizontal layout */
    align-items: center;
    justify-content: center; /* Center content */
    max-width: 900px;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.review-search-box-outside .search-input-custom {
    flex-grow: 1; 
    border-radius: 20px !important;
    padding-left: 1rem;
    padding-right: 2.5rem;
    height: 40px;
    background-color: #6c757d !important;
    color: #f2f2f2 !important;
    border: 1px solid #6c757d !important;
}

.review-search-box-outside .review-search-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: -35px;
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
    color: #00b7ff !important;
    border: 1px solid #00b7ff !important;
    background-color: transparent !important;
}

.review-search-box-outside .review-dropdown-custom {
    flex-shrink: 0;
    width: 150px;
    border-radius: 20px !important;
    height: 40px;
    background-color: #6c757d !important;
    color: #f2f2f2 !important;
    border: 1px solid #6c757d !important;
    padding-left: 1rem;
    padding-right: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f2f2f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.review-search-box-outside .review-dropdown-custom option {
    background-color: #495057;
    color: #f2f2f2;
}

/* --- NEW STYLES FOR INFO GROUPS (ACB main info) --- */
/* Overall styling for the info groups (ACB, Key Financials, Quarter Data) */
/* This ensures consistent padding, line-height, and text alignment */
/* This specific selector targets the col-md-3 holding the ACB info */
/* Removed review-info-group as the entire col-md-3 is now a card */
/* No padding here, as the card itself has padding */
.review-info-group { 
    margin-bottom: 0 !important;
}

/* Style for the main ticker (ACB) */
/* This now targets h5 in card-header directly */
#review-sticker-main {
    font-size: 2.5rem; 
    font-weight: bold;
    color: #f2f2f2 !important; 
    line-height: 1; 
    /* Reduce margin-bottom for a tighter look with the company name */
    margin-bottom: 0.1rem !important; 
}

/* Style for company name in ACB group */
#review-company-name {
  font-size: 0.8rem; 
  color: #aaaaaa !important; 
  margin-bottom: 0.2rem !important; 
  line-height: 1.2;
}

/* Style for the labels (Price, Intrinsic Value, Margin of Safety) in ACB Info Group */
/* These are now inside a card-body */
/* Apply to p tags within the card-body of the ACB info card */
/* This is also used for Key Financials and Quarter Data values, so needs to be more general */
#tab-review .card-body p { 
    margin-bottom: 0.1rem !important; 
    font-size: 0.9rem; 
    line-height: 1.2; 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    padding: 0 !important; 
}
#tab-review .card-body p span {
    font-weight: bold; 
    margin-left: 0.5rem; 
}

/* Style for the headings like "Key Financials", "Quarter Data" */
/* This targets h5 inside the card-header for these sections */
#tab-review .card-header h5 {
    font-size: 1rem !important; 
    font-weight: bold; 
    color: #f2f2f2 !important; 
    margin-bottom: 0 !important; 
    line-height: 1.2;
    padding-bottom: 0; /* Ensures no extra space below the heading itself */
}

/* --- END NEW STYLES FOR INFO GROUPS (ACB main info) --- */


/* Specific styling to match the image's "BELOW VALUE" badge more closely */
.badge.bg-danger {
    background-color: #ee5d5d !important; 
    color: white !important;
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem; 
    font-weight: bold;
    border-radius: 0.5rem; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    /* For card-footer placement, we might need to adjust margin */
    margin: auto; /* Center the badge within its container */
    display: block; /* Make it a block element to apply margin:auto */
}


/* Chart section adjustments */
/* These rules apply to cards, now including Key Financials and Quarter Data */
#tab-review .col-md-7 > .card, /* Main Chart */
#tab-review .col-md-4 > .card, /* Key Financials */
#tab-review .col-md-3 > .card, /* Quarter Data */
#tab-review .col-md-5 > .row > .col-12 > .card { /* Profitability, Valuation, Cash Flow cards */
    background-color: #1a1a1a !important; 
    border: 1px solid #3e3e3e !important; 
    box-shadow: none !important;
    border-radius: 8px; /* Maintain rounded corners for these */
    height: 100%; /* Ensure all cards in a row have same height */
}
/* Reduce vertical spacing between cards in the same row by adjusting padding of card-header/body */
#tab-review .card .card-header { /* General header padding for all cards */
    padding-bottom: 0.5rem !important; /* Reduced padding bottom */
    padding-top: 0.5rem !important; /* Reduced padding top */
}
#tab-review .card .card-body { /* General body padding for all cards */
    padding: 1rem !important; /* Reduced padding for card bodies */
}
#tab-review .card .card-footer { /* General footer padding for all cards */
    padding: 0.5rem !important; /* Reduced padding for card footers */
}


/* Chart Controls and Title layout */
.chart-header-split {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    padding-bottom: 0.5rem !important; 
}

.chart-controls-top { 
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; 
    gap: 0.5rem; 
    width: 100%; 
    margin-bottom: 0.5rem; 
}

.chart-controls-top .btn {
    flex-shrink: 0; 
}

#chart-title {
    align-self: flex-start; 
    width: 100%; 
    margin-top: 0; 
}


/* Legend for chart */
.chart-legend {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem; 
    flex-wrap: wrap; 
}

.chart-legend .legend-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
}

.revenue-color { background-color: rgba(54, 162, 235, 0.5); }
.revofit-color { background-color: #ffcd56; }
.net-profit-color { background-color: rgba(75, 192, 192, 0.5); }
.roic-color { background-color: #9370db; }
.roe-color { background-color: #ff6384; }
.fcf-color { background-color: #4bc0c0; }
.capex-color { background-color: #ff9f40; }
.eps-color { background-color: #9966ff; }


/* List styling for metrics (Profitability & Growth, Valuation Ratios, Key Financials, Quarter Data) */
/* This rule needs to apply to all ULs inside cards */
.compact-list li { /* Target specifically lists with compact-list class */
    padding: 0 !important; /* Remove padding */
    margin-bottom: 0.1rem !important; /* Keep lines very close */
    font-size: 0.9rem; /* Consistent font size */
    line-height: 1.2; /* Consistent line height */
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.compact-list li:last-child {
    margin-bottom: 0 !important; /* No margin for the last item */
}

.compact-list li span {
    font-weight: bold;
    margin-left: 0.5rem; /* Reduce space between label and value */
}


/* Modal styling */
.modal-content {
    border: 1px solid #3e3e3e !important;
    border-radius: 8px;
}

.modal-header {
    border-bottom: 1px solid #3e3e3e !important;
}

.modal-footer {
    border-top: 1px solid #3e3e3e !important;
}

.modal-header .btn-close-white {
    filter: invert(1); 
}

/* Report Tab specific styles */
.report-subtabs .btn {
    border: 1px solid #3e3e3e;
    color: #f2f2f2;
    background-color: transparent;
}

.report-subtabs .btn.active {
    background-color: #00b7ff !important;
    border-color: #00b7ff !important;
    color: #000 !important;
}

/* Styles for DataTables integration */
.dataTables_wrapper {
    color: #f2f2f2; 
    background-color: transparent; 
    padding: 1rem; 
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #f2f2f2 !important; 
}

.dataTables_length label,
.dataTables_filter label {
    color: #f2f2f2 !important; 
}

.dataTables_length select,
.dataTables_filter input {
    background-color: #3e3e3e !important; 
    color: #f2f2f2 !important; 
    border: 1px solid #555 !important; 
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
}

.dataTables_filter input { 
    margin-left: 0.5em;
    box-shadow: none !important; 
}

.dataTables_paginate .paginate_button {
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #0dcaf0 !important; 
    color: #000 !important; 
    border: 1px solid #0dcaf0 !important; 
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background-color: #00b7ff !important;
    color: #000 !important;
    border-color: #00b7ff !important;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #3e3e3e !important; 
    color: #aaaaaa !important; 
}

.table.dataTable { 
    width: 100% !important; 
    margin-bottom: 0 !important;
}

.table.dataTable thead th,
.table.dataTable tbody td {
    border-color: #3e3e3e; 
    color: #f2f2f2; 
}

#table_length {
    border-radius: 0.25rem; 
    height: calc(1.5em + 0.75rem + 2px); 
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: flex !important; 
    align-items: center; 
    margin-bottom: 1em; 
}

.dataTables_wrapper .dataTables_length {
    justify-content: flex-start; 
}

.dataTables_wrapper .dataTables_filter {
    justify-content: flex-end; 
}

.dataTables_length select,
.dataTables_filter input[type="search"] { 
    margin: 0 0.5em; 
    height: calc(1.5em + 0.5rem + 2px); 
    min-width: 80px; 
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important; 
    position: relative;
    padding-right: 20px; 
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    font-family: 'Bootstrap Icons' !important; 
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #aaaaaa; 
}

table.dataTable thead .sorting:after {
    content: "\F164"; 
    opacity: 0.5;
}
table.dataTable thead .sorting_asc:after {
    content: "\F160"; 
    opacity: 1;
}
table.dataTable thead .sorting_desc:after {
    content: "\F15E"; 
    opacity: 1;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 20px; 
}

.dataTables_length label,
.dataTables_filter label {
    color: #f2f2f2 !important;
}

.dataTables_length select,
.dataTables_filter input {
    background-color: #2e2e2e !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

.dataTables_filter input::placeholder {
    color: #ccc;
}

.dt-length label,
.dt-length select {
  color: #f8f9fa; 
  background-color: #343a40; 
  border: 1px solid #6c757d;
}

.dt-search label,
.dt-search input[type="search"] {
  color: #f8f9fa;
  background-color: #343a40;
  border: 1px solid #6c757d;
}

.dt-length select,
.dt-search input[type="search"] {
  padding: 2px 6px;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.dt-paging-button {
    background-color: #343a40 !important;
    color: #00b7ff !important;
    border: 1px solid #00b7ff !important;
    border-radius: 0.25rem;
    margin: 0 2px;
    padding: 4px 10px;
    font-weight: 500;
}

.dt-paging-button.current {
    background-color: #00b7ff !important;
    color: #000 !important;
}

.dt-paging-button:hover {
    background-color: #009fdb !important;
    color: #fff !important;
}

#tab-about p, #tab-about ul li {
  font-size: 1rem;
  line-height: 1.6;
}

/* Spinner for loading state on search button */
.review-search-button .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* Biểu tượng search ban đầu */
.review-search-button .bi-search {
  display: inline-block;
}

/* Ẩn biểu tượng search khi đang loading */
.review-search-button.loading .bi-search {
  display: none;
}

/* Watermark for Review tab */
#watermark-review {
  position: fixed; /* Giữ watermark cố định trên màn hình */
  top: 50%; /* Đặt vị trí top ở giữa */
  left: 50%; /* Đặt vị trí left ở giữa */
  transform: translate(-50%, -50%) ; /* Dịch chuyển để căn giữa chính xác và xoay 45 độ */
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.05); /* Chữ trắng mờ (độ trong suốt 5%) */
  pointer-events: none; /* Cho phép click chuột xuyên qua */
  z-index: 1000; /* Đảm bảo nó nằm trên nội dung tab nhưng dưới các modal */
  font-weight: bold;
  white-space: nowrap; /* Ngăn chữ bị xuống dòng */
}

/* New style for the quick assessment text */
.quick-assessment-text {
  text-align: center;
  font-size: 1rem; /* Same as other h5 headers */
  font-weight: bold;
  color: #f2f2f2;
}

#btn-canslim-check {
  border-color: #e55b5b !important; /* cùng tone “danger” hiện tại */
}

/* Force text in CANSLIM box to be light on dark background */
#industry-canslim {
  color: #f2f2f2 !important;  /* chữ sáng */
}

#industry-canslim strong {
  color: #ffd43b !important;  /* vàng nhấn mạnh giống text-warning */
}

#industry-canslim small {
  color: #aaaaaa !important;  /* ghi chú xám nhạt */
}

#industry-canslim .badge {
  font-size: 0.8rem;
}