/* ============================================================================
   TRANG CÁ NHÂN CHUYÊN GIA / GIẢNG VIÊN  —  /chuyen-gia/{slug} · /giang-vien/{slug}

   Yêu cầu chủ dự án 26/08/2026: đây phải là trang RIÊNG của người đó, không phải một trang phụ
   nằm trong khung 3 cột của sonchu.vn. Vì vậy trang tự lo toàn bộ bề mặt của mình (layout-fb đã
   tắt cả hai rail qua .fb-profile-page), và nhận MÀU NHẤN riêng từ hồ sơ qua biến --pf-accent.

   Đổi tệp này PHẢI bump ?v= ở layout-fb.blade.php — Cloudflare cache theo từng query string.
   ============================================================================ */

.fb-body.fb-profile-page { grid-template-columns: minmax(0, 1fr); max-width: 1240px; padding: 0; }
.fb-body.fb-profile-page .fb-panel { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.fb-body.fb-profile-page .fb-center .wrap { padding-left: 0; padding-right: 0; }

.pf {
  /* Mặc định = xanh SonChu. Hồ sơ có accent_color thì Blade ghi đè bằng style nội tuyến. */
  --pf-accent: #1c8a4e;
  --pf-ink: #14171d;
  --pf-muted: #59616e;
  --pf-line: #e2e6ec;
  --pf-card: #ffffff;
  --pf-ground: #eef0f4;
  --pf-radius: 16px;
  color: var(--pf-ink);
}

/* Khung nội dung của riêng trang này (layout-fb đã trả lại toàn bộ bề ngang). */
.pf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Ảnh bìa ---------- */
.pf-cover {
  position: relative; height: clamp(150px, 23vw, 280px);
  border-radius: var(--pf-radius) var(--pf-radius) 0 0; overflow: hidden;
  background: var(--pf-accent);
}
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Chưa có ảnh bìa: dựng nền từ chính màu nhấn của chuyên gia — mỗi hồ sơ một sắc, không cần file.
   Các chấm sáng thưa gợi tinh đồ, hợp lĩnh vực cổ học mà vẫn đủ trầm để chữ trắng đọc rõ.
   Trình duyệt cũ không hiểu color-mix vẫn còn nền màu nhấn phẳng ở .pf-cover. */
.pf-cover.is-auto::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.22) 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.16) 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 62%, rgba(255,255,255,.20) 0 2px, transparent 2.5px),
    radial-gradient(circle at 38% 76%, rgba(255,255,255,.14) 0 1.5px, transparent 2px),
    radial-gradient(120% 140% at 8% 0%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(118deg, var(--pf-accent) 0%, color-mix(in srgb, var(--pf-accent) 62%, #0d1117) 100%);
}

/* ---------- Danh tính (đè lên đáy bìa) ---------- */
.pf-idbar {
  background: var(--pf-card); border: 1px solid var(--pf-line); border-top: 0;
  border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}
.pf-id {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 0 22px;
  align-items: end; padding-bottom: 18px;
}
.pf-ava {
  width: clamp(96px, 13vw, 136px); aspect-ratio: 1; margin-top: calc(clamp(96px, 13vw, 136px) / -2);
  border-radius: 999px; overflow: hidden; background: var(--pf-ground);
  border: 5px solid var(--pf-card); box-shadow: 0 6px 20px rgba(11,17,28,.18);
  display: grid; place-items: center;
}
.pf-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-ava .ini { font-size: 42px; font-weight: 800; color: var(--pf-accent); }

.pf-idtext { padding-top: 14px; min-width: 0; }
.pf-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pf-role {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  color: var(--pf-accent); background: color-mix(in srgb, var(--pf-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 28%, #fff);
}
.pf-name {
  margin: 0; font-size: clamp(25px, 3.6vw, 40px); font-weight: 800;
  letter-spacing: -.022em; line-height: 1.1; color: var(--pf-ink); text-wrap: balance;
}
.pf-role2 { margin-top: 5px; font-size: 15.5px; font-weight: 600; color: var(--pf-muted); }

/* Điểm sao ngay dưới tên — bấm được, nhảy xuống khu đánh giá. */
/* ---------- Hàng thông tin nhanh dưới tên: điểm sao + liên hệ ---------- */
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

/* Nút liên hệ — CHỈ ICON, không kèm chữ. Chỉ hiện những mục chuyên gia CHO PHÉP
   (xem Instructor::lienHeCongKhai). Nội dung nằm ở title + aria-label. */
.pf-lh {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--pf-accent); background: var(--pf-ground);
  border: 1px solid var(--pf-line);
  transition: background .15s, border-color .15s, transform .15s;
}
.pf-lh:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pf-accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--pf-accent) 34%, #fff);
}
.pf-lh svg { width: 19px; height: 19px; display: block; }

/* Zalo và Facebook giữ NGUYÊN màu thương hiệu: người Việt nhận ra chúng bằng màu, đổi màu theo
   màu nhấn của trang là mất luôn tín hiệu nhận diện. Mark tự tô màu nên nút để nền trắng. */
.pf-lh-zalo, .pf-lh-facebook { background: var(--pf-card); }
.pf-lh-zalo svg, .pf-lh-facebook svg { width: 24px; height: 24px; }
.pf-lh-zalo:hover { background: #e8f1ff; border-color: #0068FF; }
.pf-lh-facebook:hover { background: #e8f1fe; border-color: #1877F2; }

.pf-rate {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--pf-ground);
  border: 1px solid var(--pf-line); font-size: 14px; color: var(--pf-ink);
}
.pf-rate:hover {
  background: color-mix(in srgb, var(--pf-accent) 9%, #fff);
  border-color: color-mix(in srgb, var(--pf-accent) 30%, #fff); color: var(--pf-ink);
}
/* Nút mời viết đánh giá — JS chỉ dựng cho người THẬT SỰ đủ điều kiện. */
.pf-rate-cta {
  background: color-mix(in srgb, var(--pf-accent) 10%, #fff);
  border-color: color-mix(in srgb, var(--pf-accent) 32%, #fff);
  color: var(--pf-accent); font-weight: 700;
}
.pf-rate-cta .st { color: var(--pf-accent); }
.pf-rate-cta .n { color: var(--pf-accent); }
.pf-rate .st { color: #e0890c; letter-spacing: 1px; font-size: 15px; }
.pf-rate b { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.pf-rate .n { color: var(--pf-muted); }
/* Chưa có đánh giá giờ là LỜI MỜI (ai cũng đánh giá được từ 26/08/2026), không phải nhãn chết —
   nên vẫn dùng màu nhấn để mời bấm, chỉ để sao rỗng cho đúng sự thật là chưa ai chấm. */
.pf-rate.is-empty { border-style: dashed; }
.pf-rate.is-empty .st { color: var(--pf-line); }
.pf-rate.is-empty .n b { color: var(--pf-accent); }

.pf-actions { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
}
.pf-btn-main { background: var(--pf-accent); color: #fff; }
.pf-btn-main:hover { background: color-mix(in srgb, var(--pf-accent) 82%, #000); color: #fff; }
.pf-btn-ghost { background: var(--pf-card); border-color: var(--pf-line); color: var(--pf-ink); }
.pf-btn-ghost:hover { border-color: var(--pf-accent); color: var(--pf-accent); }

/* ---------- Mục lục dính (thay cột số của site) ---------- */
.pf-nav {
  position: sticky; top: var(--fb-topbar-h, 56px); z-index: 20;
  margin: 14px 0 18px; background: color-mix(in srgb, var(--pf-ground) 82%, #fff);
  backdrop-filter: blur(8px); border-block: 1px solid var(--pf-line);
}
.pf-nav-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pf-nav-in::-webkit-scrollbar { display: none; }
.pf-nav a {
  flex: none; padding: 13px 14px; font-size: 14.5px; font-weight: 600; color: var(--pf-muted);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.pf-nav a:hover { color: var(--pf-ink); }
.pf-nav a.on { color: var(--pf-accent); border-bottom-color: var(--pf-accent); }

/* ---------- Thân: nội dung + thẻ liên hệ của CHÍNH chuyên gia ---------- */
.pf-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start;
  padding-bottom: 40px;
}
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pf-side {
  position: sticky; top: calc(var(--fb-topbar-h, 56px) + 62px);
  display: flex; flex-direction: column; gap: 16px;
}

.pf-sec {
  background: var(--pf-card); border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius); padding: 22px 24px;
}
.pf-sec > h2 {
  margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.pf-sec > h2::before {
  content: ""; width: 4px; height: 19px; border-radius: 3px;
  background: var(--pf-accent); flex: none;
}
/* Nhảy tới phần: chừa chỗ cho cả topbar lẫn thanh mục lục dính. */
.pf [id] { scroll-margin-top: calc(var(--fb-topbar-h, 56px) + 66px); }

.pf-prose { color: #22262e; line-height: 1.68; font-size: 15.5px; }
.pf-prose p { margin: 0 0 .85em; }
.pf-prose > :last-child { margin-bottom: 0; }
.pf-prose a { color: var(--pf-accent); text-decoration: underline; text-underline-offset: 2px; }
.pf-prose img { max-width: 100%; height: auto; border-radius: 10px; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--pf-ink); background: var(--pf-ground); border: 1px solid var(--pf-line);
}

/* Ba con số thành tích — nằm trong thẻ bên phải, không còn là "tab" lửng lơ ở cột trái. */
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-stat { text-align: center; padding: 12px 6px; border-radius: 12px; background: var(--pf-ground); }
.pf-stat b {
  display: block; font-size: 22px; font-weight: 800; color: var(--pf-accent);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pf-stat span { display: block; margin-top: 3px; font-size: 12px; color: var(--pf-muted); line-height: 1.3; }

/* Bảng thông tin dịch vụ (hình thức · giờ · khu vực · ngôn ngữ) */
.pf-facts { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pf-fact { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; font-size: 14.5px; }
.pf-fact dt { color: var(--pf-muted); }
.pf-fact dd { margin: 0; font-weight: 600; }

.pf-links { display: flex; flex-direction: column; gap: 6px; }
.pf-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--pf-ground);
  font-weight: 600; font-size: 14.5px; color: var(--pf-ink);
}
.pf-link:hover { background: color-mix(in srgb, var(--pf-accent) 11%, #fff); color: var(--pf-accent); }
.pf-link::after { content: "\2192"; color: var(--pf-muted); }
.pf-link:hover::after { color: var(--pf-accent); }

/* ---------- Dịch vụ ---------- */
.pf-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pf-svc {
  display: flex; flex-direction: column; border: 1px solid var(--pf-line);
  border-radius: 14px; overflow: hidden; background: var(--pf-card);
}
.pf-svc-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--pf-ground); }
.pf-svc-b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; flex: 1; }
.pf-svc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pf-svc-n { font-weight: 700; }
.pf-svc-p { white-space: nowrap; font-weight: 700; color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.pf-svc-p small { font-weight: 500; color: var(--pf-muted); }
.pf-svc-d { margin: 0; font-size: 14px; color: var(--pf-muted); white-space: pre-line; }
.pf-svc-go { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--pf-accent); }
.pf-svc-go:hover { text-decoration: underline; }

/* ---------- Thẻ khoá học / bài viết ---------- */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pf-card {
  display: flex; flex-direction: column; gap: 6px; padding: 15px 16px;
  border: 1px solid var(--pf-line); border-radius: 14px; background: var(--pf-card);
}
.pf-card:hover { border-color: var(--pf-accent); }
.pf-card .tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pf-accent);
}
.pf-card h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--pf-ink); }
.pf-card p { margin: 0; font-size: 13.5px; color: var(--pf-muted); line-height: 1.5; }
.pf-card .meta { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--pf-muted); }

/* ---------- Khối do CHUYÊN GIA tự dựng ---------- */
.pf-blk-banner {
  border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden;
  background: var(--pf-card); display: block;
}
.pf-blk-banner img { width: 100%; height: auto; display: block; }
.pf-blk-cap { padding: 12px 18px; font-size: 14.5px; color: var(--pf-muted); }
a.pf-blk-banner:hover { border-color: var(--pf-accent); }
.pf-blk-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-blk-links a {
  padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  color: #fff; background: var(--pf-accent);
}
.pf-blk-links a:hover { background: color-mix(in srgb, var(--pf-accent) 82%, #000); color: #fff; }

/* ---------- Màn hẹp ---------- */
@media (max-width: 1000px) {
  .pf-grid { grid-template-columns: minmax(0,1fr); }
  .pf-side { position: static; }
}
@media (max-width: 700px) {
  .pf-wrap { padding: 0 14px; }
  .pf-id { grid-template-columns: minmax(0,1fr); gap: 0; }
  .pf-idtext { padding-top: 10px; }
  .pf-actions { flex-direction: row; flex-wrap: wrap; padding-top: 14px; }
  .pf-btn { flex: 1 1 150px; }
  .pf-sec { padding: 18px 16px; }
  .pf-fact { grid-template-columns: minmax(0,1fr); gap: 2px; }
}

/* Cụm khối tự soạn — dùng flow riêng để neo cuộn (#rieng) vẫn có hộp thật.
   display:contents sẽ làm getBoundingClientRect trả về 0 và mục lục dính nhảy sai. */
.pf-blocks { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Nút SỬA của chủ hồ sơ: icon nhỏ cạnh tên ----------
   Ẩn bằng CLASS `.is-off`, KHÔNG bằng thuộc tính [hidden]: quy tắc display của tác giả thắng
   [hidden]{display:none} của trình duyệt, nên dùng `hidden` là nút hiện với TẤT CẢ mọi người
   trên MỌI trang chuyên gia — đã vấp đúng lỗi này 26/08/2026. */
.pf-edit {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 34px; height: 34px; margin-left: 10px; flex: none;
  border-radius: 50%; position: relative;
  color: var(--pf-accent);
  background: color-mix(in srgb, var(--pf-accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 30%, #fff);
}
.pf-edit.is-off { display: none; }
.pf-edit:hover { background: var(--pf-accent); color: #fff; }
.pf-edit svg { width: 17px; height: 17px; }

/* Chấm cam ở góc = hồ sơ còn dở. Nhắc mà không chiếm chỗ. */
.pf-edit.is-warn::after {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #e0890c; border: 2px solid var(--pf-card);
}

.pf-edit-tip {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: #2b2620; color: #fff; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; letter-spacing: 0;
  padding: 6px 10px; max-width: 260px; width: max-content; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 40;
}
.pf-edit:hover .pf-edit-tip, .pf-edit:focus-visible .pf-edit-tip { opacity: 1; }

/* ---------- Thẻ liên hệ (nhãn nhỏ trên, nội dung dưới) ---------- */