/* ==========================================================
   laptop.css - Style nền, thiết kế cho màn hình laptop (từ 992px trở lên).
   Tablet và mobile dùng tablet.css, mobile.css để ghi đè lại phần cần khác.
   File này được nạp SAU Bootstrap nên ghi đè được các giá trị mặc định của Bootstrap.
   ========================================================== */

/* ===== Thiết lập chung ===== */
body {
  margin: 0;
  font-family: "open_sansregular", Arial, sans-serif;
  font-size: 13px;
  color: #777;
  background-color: #fff;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Tiêu đề lớn của từng khối */
.heading {
  font-size: 26px;
  font-weight: normal;
  color: #333;
  margin-bottom: 28px;
}

.text {
  line-height: 1.9;
}

.text b {
  font-weight: normal;
  color: #333;
}

/* Class dùng chung để ẩn phần tử bằng JS (thêm/bớt class "hide") */
.hide {
  display: none !important;
}

/* ===== Banner: ảnh position relative, chữ position absolute ===== */
.banner {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.banner-name {
  font-size: 34px;
  font-weight: normal;
}

.banner-job {
  margin-top: 6px;
  font-family: "open_sanslight", Arial, sans-serif;
  font-size: 13px;
}

/* ===== Navbar ===== */
.nav-bar {
  position: relative; /* làm mốc để đặt ảnh cá nhân ở giữa */
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.nav-list {
  height: 100%;
}

.nav-item {
  border-left: 1px solid #e5e5e5;
}

.nav-item a {
  display: block;
  height: 100%;
  padding: 0 24px;
  line-height: 60px;
  font-size: 11px;
  text-transform: uppercase;
  color: #333;
}

.nav-item i {
  color: #199cdb;
  margin: 0 0 0 4px;
}

.nav-item a:hover {
  background-color: #f5f5f5;
}

/* Khoảng trống ở giữa cho ảnh cá nhân */
.nav-gap {
  width: 150px;
}

/* Ảnh cá nhân: tròn, viền trắng, căn giữa navbar, đè lên banner */
.nav-avatar {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 6px solid #fff;
  background-color: #fff;
  z-index: 10;
}

/* ===== Thông tin cá nhân ===== */
.info-col {
  padding: 70px 40px 50px 20%; /* căn nội dung từng cột */
}

.info-goal {
  background-color: #f5f5f5;
}

.info-goal .text {
  max-width: 400px;
  line-height: 1.7;
}

.info-personal {
  background-color: #efefef;
  padding-left: 47px;
}

.social {
  margin-top: 18px;
}

.social a {
  margin-right: 12px;
  color: #199cdb;
  font-size: 15px;
}

/* Form nhập email (chức năng ẩn thông tin cá nhân) */
#email-box {
  max-width: 380px;
}

#email-box .form-control {
  font-size: 12px;
}

#email-box .form-text {
  margin: 4px 0 12px;
  font-size: 10px;
  color: #777;
}

/* Lỗi sai định dạng: Bootstrap chỉ hiện .invalid-feedback khi input có .is-invalid */
#email-box .invalid-feedback {
  margin-top: 4px;
  font-size: 11px;
}

/* ===== Thông tin nghề nghiệp ===== */
.career {
  margin: 50px auto;
}

.career-item {
  position: relative;
  border: 1px solid #e3e3e3;
  padding: 0 18px 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hiệu ứng khi rê chuột (hover) lên từng mục */
.career-item:hover {
  border-color: #199cdb;
  box-shadow: 0 2px 10px rgba(25, 156, 219, 0.25);
}

/* Tiêu đề: 75% chữ, 25% icon. Tiêu đề bấm được để ẩn/hiện chi tiết */
.card-head {
  display: grid;
  grid-template-columns: 75% 25%;
  align-items: center;
  padding-top: 26px;
  cursor: pointer;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

.card-icon {
  text-align: right;
  font-size: 42px;
  line-height: 1;
  color: #aaa;
}

.card-icon i {
  margin: 0;
}

/* Nút View More / View Less: chỉ hiện khi hover; đã mở rộng (.open) thì luôn hiện */
.view-btn {
  margin-top: 14px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s;
}

.career-item:hover .view-btn,
.career-item.open .view-btn {
  opacity: 1;
}

.career-detail {
  margin-top: 20px;
}

/* Danh sách có chấm tròn xanh (timeline) */
.timeline li {
  position: relative;
  margin-bottom: 22px;
  padding-left: 22px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #199cdb;
}

.item-title {
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

.item-date {
  margin: 6px 0 8px;
  font-family: "open_sansitalic", Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #777;
}

.item-desc {
  line-height: 1.7;
}

.tag-now {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background-color: #1a73e8;
  color: #fff;
  font-size: 11px;
}

/* Sở thích */
.hobby {
  display: flex;
  justify-content: space-around;
  padding-top: 8px;
}

.hobby-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hobby-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #4cd3a8;
  border-radius: 50%;
  color: #999;
  font-size: 18px;
}

.hobby-circle i {
  margin: 0;
}

.hobby-text {
  margin-top: 10px;
  font-size: 10px;
}

/* Ngôn ngữ, Kỹ năng: thang điểm 3 bậc */
.level {
  margin-bottom: 20px;
}

.level-name {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

.bar {
  display: inline-block;
  height: 4px;
  width: 45px;
  margin-right: 8px;
  background-color: #ddd; /* bậc chưa đạt: xám */
}

.bar.on {
  background-color: #199cdb; /* bậc đã đạt: xanh */
}

/* ===== Chứng chỉ - Giải thưởng ===== */
.certificate {
  padding: 40px 0 30px;
  background-color: #f7f7f7;
}

.cert-item {
  display: flex;
  align-items: flex-start;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid #d6c08d;
}

/* Cột bên phải: có viền trái phân cách */
.cert-item:nth-child(even) {
  padding-left: 20px;
  border-left: 1px solid #d6c08d;
}

/* Hàng cuối không cần viền dưới */
.cert-item:last-child,
.cert-item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

.cert-img {
  width: 190px;
  height: 95px;
  object-fit: cover;
  margin-right: 20px;
}

.cert-title {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  color: #444;
}

.cert-info .text {
  line-height: 1.6;
}

/* ===== Dự án ===== */
.project {
  padding: 40px 0;
}

.project-card {
  height: 100%;
  border: 1px solid #e3e3e3;
}

.project-img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: top;
}

.project-title {
  padding: 14px 12px;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  color: #444;
  border-top: 1px solid #e3e3e3;
}

.project-title a:hover {
  color: #199cdb;
}

.project-meta {
  display: flex;
  align-items: center;
  padding: 12px;
  border-top: 1px solid #e3e3e3;
}

.pill {
  padding: 4px 14px;
  border-radius: 14px;
  background-color: #199cdb;
  color: #fff;
  font-size: 11px;
}

.meta-item {
  margin-left: 14px;
  font-size: 12px;
}

.meta-item i {
  color: #777;
  font-size: 15px;
}

.project-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e3e3e3;
}

.project-table td {
  padding: 10px 12px;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid #e3e3e3;
}

.project-table tr:last-child td {
  border-bottom: none;
}

.project-table .label {
  width: 90px;
  white-space: nowrap;
}

/* ===== Footer ===== */
.footer {
  padding: 28px 0;
  text-align: center;
  background-color: #f7f7f7;
}

.footer-link {
  display: inline-block; /* dàn ngang */
  margin: 0 20px;
  color: #999;
}

/* Icon footer cỡ theo % của chữ nên tự co giãn theo màn hình */
.footer-link i {
  color: #199cdb;
  font-size: 170%;
  vertical-align: middle;
}

.footer-link:hover {
  color: #199cdb;
}