/**
 * Stylesheet entry chỉ cho trang công cụ Gross–Net / BHTN.
 * Import các file cẩm nang hiện có — không sửa file CSS global trong public/css.
 * Khớp layout cột phải với detailnews (wrapper .salary-tools-sidebar trong Blade tools).
 */
@import url("../../css/page/News/detailNews.css");
@import url("../../css/sidebar-goi-y-viec-lam-detailnews.css");
@import url("../../css/toppage/detailnews.css");
@import url("../../css/page/News/News.css");

.salary-tools-sidebar {
  min-width: 0;
}

/* Khối "Bài Viết Liên Quan" */
.salary-tools-sidebar .salary-tools-sidebar__related-block {
  box-sizing: border-box;
  padding-right: 4px;
}

.salary-tools-sidebar .salary-tools-sidebar__related-head {
  margin-bottom: 14px;
}

.salary-tools-sidebar .salary-tools-sidebar__related-title {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #212529;
  text-transform: none;
  letter-spacing: normal;
}

/*
 * “Gợi ý việc làm”: cùng font-size / font-weight với “Bài Viết Liên Quan”.
 * toppage/detailnews.css (import sau) đặt .head_title 20px — ghi đè chỉ trong sidebar công cụ.
 */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .sidebar-goi-y-viec-lam-detailnews__head .head_title {
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  color: inherit;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .sidebar-goi-y-viec-lam-detailnews__head .head_title h3 {
  margin: 0 0 12px;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  color: #212529;
  text-transform: none;
  letter-spacing: normal;
}

/* "Xem thêm" dưới cùng khối, căn phải */
.salary-tools-sidebar .salary-tools-sidebar__related-footer {
  margin-top: 14px;
  text-align: right;
}

.salary-tools-sidebar .salary-tools-sidebar__related-footer .salary-tools-sidebar__related-more {
  font-weight: 400;
  color: #f07e1d !important;
}

.salary-tools-sidebar .salary-tools-sidebar__related-footer .salary-tools-sidebar__related-more:hover {
  color: #335b7a !important;
}

/* Các link "Xem thêm" khác trong sidebar công cụ */
.salary-tools-sidebar a.link-see-more-sidebar {
  color: #f07e1d !important;
}

.salary-tools-sidebar a.link-see-more-sidebar:hover {
  color: #335b7a !important;
}

.salary-tools-sidebar a.link-see-more-sidebar:focus-visible {
  color: #335b7a !important;
}

/* Khối “Gợi ý việc làm”: lề phải + footer “Xem thêm” giống khối Bài viết liên quan (mockup) */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews {
  box-sizing: border-box;
  padding-right: 4px;
  margin-bottom: 24px; /* khoảng cách tới banner TaoCV bên dưới (~mockup 20–30px) */
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .sidebar-goi-y-viec-lam-detailnews__footer {
  margin-top: 14px;
  text-align: right;
}

/* Khớp `.salary-tools-sidebar__related-more` — cam, hover xanh, không gạch khi thường */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .sidebar-goi-y-viec-lam-detailnews__footer .see_all- {
  font-weight: 400;
  font-size: 14px;
  color: #f07e1d !important;
  text-decoration: none;
  white-space: nowrap;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .sidebar-goi-y-viec-lam-detailnews__footer .see_all-:hover,
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .sidebar-goi-y-viec-lam-detailnews__footer .see_all-:focus-visible {
  color: #335b7a !important;
  text-decoration: underline;
}

/* Danh sách "Bài Viết Liên Quan": khoảng cách dọc giữa các item */
.salary-tools-sidebar .salary-tools-sidebar__related-list.tintuc-baiviet-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mỗi item: flex ngang, ảnh cố định + tiêu đề căn giữa theo chiều dọc so với ảnh */
.salary-tools-sidebar .salary-tools-sidebar__related-item.tintuc-baiviet {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  text-decoration: none;
}

.salary-tools-sidebar .salary-tools-sidebar__related-item.tintuc-baiviet:hover .salary-tools-sidebar__related-item-title {
  color: #f07e1d;
}

/* Ẩn badge xếp hạng — mockup chỉ có ảnh + tiêu đề */
.salary-tools-sidebar .salary-tools-sidebar__related-item .rank-article {
  display: none !important;
}

/* Thumbnail: ~96px, bo góc ~9px, landscape */
.salary-tools-sidebar .salary-tools-sidebar__related-thumb-wrap.img_ranking_container {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.salary-tools-sidebar .salary-tools-sidebar__related-thumb.img_ranking_inner {
  width: 96px;
  height: 64px;
  margin: 0;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.salary-tools-sidebar .salary-tools-sidebar__related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
}

/* Cột chữ: tiêu đề đậm, xuống dòng tự nhiên */
.salary-tools-sidebar .salary-tools-sidebar__related-text.mobile-content-baiviet {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.salary-tools-sidebar .salary-tools-sidebar__related-item-title {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #333333;
  text-transform: none;
  white-space: normal;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Ẩn đoạn tóm tắt — mockup chỉ nổi bật tiêu đề + ảnh */
.salary-tools-sidebar .salary-tools-sidebar__related-item-excerpt.max-lines-content {
  display: none;
}

/*
 * Căn mép trái khớp khối “Bài Viết Liên Quan”:
 * - custom.css: `.widget-box { padding-left: 19px; … }` đẩy tiêu đề “Gợi ý việc làm” vào trong.
 * - Bootstrap 3 (global): `.col-xs-12` thêm padding ngang — banner CV lệch tương tự.
 */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .widget-box,
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .widget.widget-box {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.salary-tools-sidebar .salary-tools-sidebar__cv-banner.banner_img {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/*
 * Gợi ý việc làm — từng item (card nhỏ listsmalljob)
 * Figma: https://www.figma.com/design/ILHcxEuPmbw9AiIZs6DpKd/Viecoi?node-id=40848-100794
 * Token: border #E5E7EB, primary #F07E1D, title/company rgba(0,0,0,0.85), tag nền #F6F3F3 chữ #434343
 */
/*
 * `<hr>` được module `listsmalljob.blade.php` render giữa mỗi item việc làm,
 * nhưng Bootstrap 5 reboot ép `hr { opacity: 0.25 }` → vạch quá mờ, gần như khuất.
 * Ép display + opacity + height để vạch luôn hiển thị rõ giữa các item.
 */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .list_small_job_container hr {
  display: block !important;
  height: 1px !important;
  width: 100%;
  border: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  color: inherit;
  visibility: visible !important;
}

/* Yêu cầu hiện cả thẻ <hr> sau item cuối cùng (để footer "Xem thêm" có vạch ngăn phía trên). */

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .list_job_detail .jobs-info.grid-job {
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  column-gap: 12px;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .list_small_job_container .image_home.image_list_job {
  width: 55px;
  height: 55px;
  min-width: 55px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
  box-sizing: border-box;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .width-image-home.property-card-header.grid-job-img {
  width: auto;
}

/*
 * Khoảng cách dọc giữa các dòng trong mỗi item (tiêu đề / công ty / meta): 1px.
 * HTML: .grid-job-title chứa .job-title_container rồi .job_overflow (tên cty).
 */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .grid-job-title {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding-left: 0;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .grid-job-title .job-title_container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  margin: 0;
  padding: 0;
  row-gap: 1px;
  column-gap: 6px;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .grid-job-title .jobs-title,
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .grid-job-title h4.jobs-title {
  margin: 0;
  padding: 0;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .grid-job-title .job_overflow.display-flex {
  margin: 0;
  padding: 0;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .job-title_container .title_container {
  color: rgba(0, 0, 0, 0.85);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .title_container .job-title-name {
  color: rgba(0, 0, 0, 0.85);
}

/*
 * Link công ty từ CardSmallJobItem có class Bootstrap `.mt-3` → margin-top ~1rem !important;
 * gây khoảng trắng lớn so với Figma — phải ghi đè !important.
 */
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .grid-job-title .a-company {
  margin: 0 !important;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-header-right .icon-bookmark,
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-header-right .fa-bookmark {
  color: #f07e1d;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-deatails-body {
  margin: 0;
  padding: 0;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 1px;
  column-gap: 8px;
  margin-top: 1px;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow {
  margin: 0;
  gap: 1px;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation .job_overflow.icon-hight-light {
  color: #f07e1d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation .job_overflow.icon-hight-light .hight-light-txt {
  color: #f07e1d;
  font-weight: 700;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation .job_overflow:not(.icon-hight-light) .added-detail-information,
.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation .added-detail-information {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-deatails-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-deatails-tag .list-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-deatails-tag .list-tag .cp-tag {
  background: #f6f3f3;
  color: #434343;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  margin: 0 !important;
  text-transform: capitalize;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-deatails-tag .apply-button .btn-save-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 6px 12px;
  border-radius: 4px;
  background: #f07e1d !important;
  color: #fff !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  text-transform: none;
  border: none;
  box-shadow: none;
}

.salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .list_job_detail .jobs-info.grid-job:hover {
  box-shadow: none;
}

/*
 * Mobile (≤ 767.98px): mỗi item "Gợi Ý Việc Làm" — 3 thông tin lương / địa chỉ / thời gian
 * nằm CÙNG 1 hàng (theo design Figma — xem ảnh tham chiếu yêu cầu).
 *
 * Cách tiếp cận tối giản:
 *   - Bọc 3 item bằng flex row, không wrap.
 *   - Mỗi `.job_overflow` được reset hoàn toàn về `display: flex` (đè rule base `display: grid;
 *     grid-template-columns: auto 1fr` trong listSmallJob.css line ~458 — cột `1fr` đó là thủ
 *     phạm làm item lương phình 309px → ép địa chỉ/ngày tràn ra ngoài viewport trên iPhone).
 *   - Dùng `!important` cho `display` & `grid-template-columns` để tránh bị các rule base có
 *     specificity 0,3,0 đè ngược.
 */
@media (max-width: 767.98px) {
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    grid-template-columns: none !important;
    min-width: 0;
    width: 100%;
  }

  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  /* Icon (i / svg / .icon-container) — không co, kích thước cố định. */
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow > i,
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow > svg,
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow > .icon-container {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
  }

  /* Text (lương / địa chỉ / ngày): 1 dòng, không ellipsis (để text luôn hiện đủ). */
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow .added-detail-information,
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow .added-detail-information a,
  .salary-tools-sidebar .sidebar-goi-y-viec-lam-detailnews .jobs-detail-infomation > .job_overflow .added_detail_information {
    white-space: nowrap;
    overflow: visible;
    display: inline;
    max-width: none;
    min-width: 0;
  }
}

/*
 * Header border — khôi phục viền/đổ bóng dưới header như trang chủ.
 * `public/css/page/News/News.css` đặt `nav.header-js-v1765 { box-shadow: unset; }`
 * khiến trang công cụ (đang import News.css) mất viền dưới header.
 * Ghi đè lại đúng giá trị mặc định trong `header_jobseeker.css`
 * và bổ sung border-bottom 1px cho rõ ràng.
 */
nav.header-js-v1765 {
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 5px 4.75px 0.25px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 5px 4.75px 0.25px rgba(0, 0, 0, 0.07);
}

/*
 * Force Inter font trên trang công cụ.
 * `News.css` (được import phía trên) đặt
 *   `body, h2, h3, span, strong, ul { font-family: "Helvetica Neue", ... !important; }`
 * Cùng với `toppage/detailnews.css` body cũng dùng Helvetica → breadcrumb / nội dung trang
 * công cụ bị rơi về Helvetica thay vì Inter. Liệt kê element thông dụng để đảm bảo
 * thắng được rule `!important` trong News.css (specificity body * > selector đơn).
 */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body strong, body em, body b, body small,
body a, body button, body input, body select, body textarea, body label,
body ul, body ol, body li,
body div, body section, body article, body nav,
body header, body footer, body main, body aside,
body table, body th, body td {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}