/* ============================================================
   Trang chủ Portfolio — phần bổ sung cho theme.css (giữ theme.css
   y nguyên bản portfolio để dễ đối chiếu).
   ============================================================ */

/* ---------- Thanh menu: menu WordPress nhiều cấp + ô tìm kiếm ---------- */
.nav__links li { position: relative; }
.nav__links > li > a { display: inline-block; font-size: 0.875rem; } /* nhỏ hơn 1 nấc so với 0.95rem của theme.css */
.nav__links .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 220px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: none; z-index: 30;
}
/* Cầu nối trong suốt lấp khoảng hở 10px giữa mục menu và dropdown: chuột đi qua không bị mất menu */
.nav__links .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__links li:hover > .sub-menu, .nav__links li:focus-within > .sub-menu { display: block; }
.nav__links .sub-menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 0.92rem; }
.nav__links .sub-menu a::after { display: none; }
.nav__links .sub-menu a:hover { background: var(--bg-soft); }
/* Mũi tên dropdown: đặt sau chữ (float right), canh giữa theo chiều cao chữ */
.nav__links .menu-item-has-children > a::before {
  content: ""; float: right; width: 6px; height: 6px; margin: 0.55em 0 0 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
/* Cụm chuyển "Video | Ảnh" cuối thanh menu (chuyển từ dải chuyên mục lên 20/10/2026): viên thuốc 2 nửa, nửa đang xem tô đậm */
.nav__switch { display: inline-flex; flex-shrink: 0; border: 1px solid var(--text); border-radius: 999px; }
.nav__switch a {
  font-family: var(--font-head); font-weight: 600; font-size: 0.8125rem; white-space: nowrap; line-height: 1;
  padding: 0.55em 1em; color: var(--text); transition: var(--transition);
}
.nav__switch a:first-child { border-radius: 999px 0 0 999px; }
.nav__switch a:last-child { border-radius: 0 999px 999px 0; }
.nav__switch a:hover { background: var(--bg-soft); }
.nav__switch a.is-active { background: var(--text); color: var(--text-invert); }
@media (max-width: 992px) {
  .nav__links { gap: var(--space-3); }
  .nav__links > li > a { font-size: 0.85rem; }
}
@media (max-width: 768px) {
  .nav__links { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav__links .sub-menu {
    position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 var(--space-3); background: transparent;
  }
  .nav__links .menu-item-has-children > a::before { display: none; }
  .nav__switch a { font-size: 0.75rem; padding: 0.5em 0.8em; }
}

/* ---------- Dải chuyên mục (ở /video/, /album/ và trang chuyên mục; dính dưới thanh menu) ----------
   Màn rộng: nút 14px, tràn thì XUỐNG DÒNG căn giữa (không cuộn ngang, để dropdown chuyên mục con khi rê chuột
   không bị vùng cuộn cắt mất; chốt 20/10/2026). Màn hẹp (≤768px): một dòng, tràn thì vuốt ngang
   (theme.js gắn .is-scrollable, dropdown ẩn, bấm chuyên mục cha sẽ thấy các chuyên mục con). */
.catmenu__inner {
  flex-wrap: wrap; justify-content: center;
  gap: var(--space-2);
  max-width: none; /* cho dải rộng hết màn hình (căn giữa) để 9 nút 13px đứng một dòng từ ~1.350px trở lên; yêu cầu 20/10/2026 */
}
.catmenu__btn {
  white-space: nowrap; display: inline-block;
  font-size: 0.8125rem;
  padding: 0.5em 0.9em;
}
.catmenu.is-scrollable .catmenu__inner {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.catmenu.is-scrollable .catmenu__inner::-webkit-scrollbar { display: none; }
.catmenu.is-scrollable .catmenu__sub { display: none !important; }
/* Mép phải mờ dần để biết còn nút bị khuất; biến mất khi đã cuộn tới cuối (theme.js gắn .is-end) */
.catmenu--static { position: relative; top: auto; } /* .catmenu thường đã sticky nên là mốc cho ::after; bỏ top của sticky */
.catmenu.is-scrollable::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 56px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface-blur));
}
.catmenu--static.is-scrollable::after { background: linear-gradient(to right, transparent, var(--bg)); }
.catmenu.is-scrollable.is-end::after { display: none; }
@media (max-width: 768px) {
  .catmenu__inner { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .catmenu__item:first-child { margin-left: auto; }
  .catmenu__item:last-child { margin-right: auto; } /* căn giữa khi vừa khung, cuộn đúng khi tràn */
  .catmenu__btn { font-size: 0.8125rem; padding: 0.5em 0.8em; }
}

/* ---------- Masthead: tiêu đề tiếng Việt dài được xuống dòng + nút ---------- */
.masthead__title { white-space: normal; max-width: none; } /* ngắt dòng bằng <br> cố định trong masthead.php */
.masthead__sub { white-space: normal; max-width: 60ch; }
.masthead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* ---------- Đầu trang thư viện / chuyên mục ---------- */
.pf-page-head { padding: calc(var(--nav-h) + var(--space-4)) 0 var(--space-4); background: var(--bg-soft); } /* gọn lại 20/10/2026 */
.pf-page-head__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--space-2); }
.pf-page-head__sub { margin: 0 auto; }
.pf-page-head .rule { margin-top: var(--space-3); }
@media (min-width: 993px) { .pf-page-head__sub { white-space: nowrap; } } /* câu mô tả một dòng trên màn rộng */
.pf-page-head .eyebrow a { color: inherit; }
.pf-h2-small { font-size: 1.4rem; margin: 0; }
.pf-h2-small a:hover { color: var(--accent); }
.catmenu--static .catmenu__inner { padding-left: 0; padding-right: 0; }

/* ---------- Trang video đơn ---------- */
.pf-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.pf-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.pf-content { max-width: var(--pf-reading, 820px); margin: var(--space-5) auto 0; color: var(--text-soft); } /* cột chữ chung với bài viết */
.pf-content img { border-radius: var(--radius-sm); margin: 0 auto var(--space-3); }

/* ---------- Tiêu đề khối dùng chung ---------- */
/* Các khối Dịch vụ / Khách hàng / Bài viết / SEO: theme.css cho .section 96px trên dưới → quá thoáng, rút về 56px (40px trên di động) */
/* 21/10/2026: mọi khối có tiêu đề cùng một quy tắc — đệm trên 40px (tiêu đề cách mép màu nền 40px), đệm dưới 56px */
.pf-services, .pf-process, .pf-feelback, .pf-news, .pf-seo { padding-top: var(--space-5); padding-bottom: 56px; }
.pf-h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.pf-section__head { margin-bottom: var(--space-4); }
.pf-section__head.center .rule { margin-top: var(--space-2); }
.pf-section__head.center .pf-h2 { margin-bottom: 0; }
.pf-more { font-weight: 600; font-size: 0.92rem; color: var(--text-soft); transition: var(--transition); white-space: nowrap; }
.pf-more:hover { color: var(--accent); }
/* "Xem tất cả video/album" ở đầu khối: dạng nút viền (cùng kiểu .btn) cho nổi bật, nhỏ hơn nút thường một chút */
.pf-more-btn { padding: 0.55em 1.2em; font-size: 0.88rem; white-space: nowrap; }
.section__head.pf-section__head { align-items: center; }
@media (max-width: 560px) {
  /* Tiêu đề dài + nút không đủ chỗ trên một dòng: xếp tiêu đề trên, nút dưới */
  .section__head.pf-section__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
}
.section--tight.pf-videos { padding-top: var(--space-5); }
.card__overlay-title a { color: inherit; }

/* ---------- Dịch vụ ---------- */
.pf-services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
.pf-service {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); transition: var(--transition);
}
.pf-service:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.pf-service__title { font-size: 1.1rem; margin: 0; }
.pf-service__desc { color: var(--text-soft); font-size: 0.92rem; margin: 0; flex: 1; }
.pf-service__more { font-size: 0.85rem; font-weight: 600; color: var(--accent); }

/* Khối "Khách hàng của chúng tôi" (about-strip) nền trắng để xen kẽ với Dịch vụ (xám) và Quy trình (xám) */
.about-strip { background: var(--bg); }

/* ---------- Quy trình làm việc: stepper 4 bước, số tròn màu cam nối nhau bằng đường kẻ, không viền thẻ ---------- */
.pf-process__head { margin-bottom: var(--space-5); }
.pf-process__head .eyebrow { margin-bottom: var(--space-2); }
.pf-process__sub { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.pf-process__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  margin: 0; padding: 0; list-style: none; /* theme.css chỉ reset ul, không reset ol */
}
.pf-step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.pf-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: var(--space-2);
  background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: var(--transition);
}
.pf-step:hover .pf-step__num { transform: scale(1.06); }
/* Đường kẻ nối từ số này sang số kế tiếp (chạy qua khoảng gap) */
.pf-step:not(:last-child)::before {
  content: ""; position: absolute; top: 24px; left: 60px; right: calc(-1 * var(--space-5));
  height: 1px; background: var(--border);
}
.pf-step__title { font-size: 1.1rem; margin: 0; }
.pf-step__desc { margin: 0; color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; max-width: 28ch; }

/* ---------- Album ---------- */
.pf-albums__grid.grid--albums { grid-template-columns: repeat(4, 1fr); }

/* ---------- Khách hàng nói gì: băng chuyền chạy ngang ----------
   Hai .pf-feelback__track giống nhau nối đuôi, cùng trượt sang trái đúng 100% chiều rộng của mình rồi lặp lại → liền mạch.
   Tốc độ theo số thẻ (--pf-marquee-n do feelback.php đặt): ~7s mỗi thẻ. */
.pf-feelback__marquee {
  display: flex; gap: var(--space-4); width: 100%; overflow: hidden;
  padding: var(--space-1) 0 var(--space-3); /* chừa chỗ cho bóng/nhích hover */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.pf-feelback__track {
  display: flex; gap: var(--space-4); flex-shrink: 0;
  animation: pf-marquee calc(var(--pf-marquee-n, 6) * 7s) linear infinite;
}
.pf-feelback__marquee:hover .pf-feelback__track,
.pf-feelback__marquee:focus-within .pf-feelback__track { animation-play-state: paused; }
.pf-feelback__track .pf-quote { width: 380px; flex-shrink: 0; }
@keyframes pf-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--space-4))); } }
@media (prefers-reduced-motion: reduce) {
  .pf-feelback__marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; padding-left: var(--space-4); padding-right: var(--space-4); }
  .pf-feelback__track { animation: none; }
  .pf-feelback__track[aria-hidden] { display: none; }
}
.pf-quote {
  margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--space-3);
}
.pf-quote__text { margin: 0; color: var(--text-soft); font-size: 0.95rem; flex: 1; }
.pf-quote__who { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9rem; }
.pf-quote__who span { display: flex; flex-direction: column; line-height: 1.3; }
.pf-quote__who small { color: var(--text-soft); }
.pf-quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* ---------- Bài viết mới ---------- */
.pf-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pf-post { display: flex; flex-direction: column; gap: var(--space-2); }
.pf-post__media { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.pf-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pf-post:hover .pf-post__media img { transform: scale(1.05); }
.pf-post__date { font-size: 0.8rem; color: var(--text-soft); margin-top: var(--space-1); }
.pf-post__title { font-size: 1.05rem; margin: 0; }
.pf-post__excerpt { margin: 0; color: var(--text-soft); font-size: 0.9rem; }

/* ---------- Khối chữ SEO (2 nút Gọi/Zalo đã bỏ 20/10/2026 vì đã có nút nổi ở góc) ---------- */
.pf-seo__text { max-width: 1000px; } /* đo 20/10/2026: H2 cần ~995px để đứng một dòng ở 32px */
.pf-seo .pf-h2 { margin-bottom: var(--space-3); }
.pf-seo__body { color: var(--text-soft); font-size: 0.98rem; }
.pf-seo__body p:last-child { margin-bottom: 0; }

/* ---------- Chân trang: 3 cột (logo · dịch vụ · công ty) + cột menu footer nếu có ---------- */
.pf-footer__grid.footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
.pf-footer__grid.footer__grid:has(.pf-footer__menu) { grid-template-columns: 1.3fr 1fr 1fr auto; }
.pf-footer__services h4 { margin-bottom: var(--space-3); }
.pf-footer__links { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.88rem; }
.footer__grid > div:last-child { align-self: start; justify-self: end; }
.footer__grid > .pf-footer__services { align-self: start; justify-self: start; }
/* Ô tìm kiếm ở dòng cuối chân trang, cạnh nút sáng/tối (chuyển từ thanh menu xuống 20/10/2026) */

/* ---------- Nút nổi Gọi + Zalo ---------- */
.pf-fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.pf-fab__btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 16px 8px 12px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: 0.9rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pf-fab__btn:hover { transform: translateY(-2px); }
.pf-fab__btn--call { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-fab__btn svg { flex-shrink: 0; }
@media (max-width: 560px) {
  .pf-fab { right: 14px; bottom: 16px; }
  .pf-fab__btn { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .pf-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .pf-services__grid, .pf-news__grid { grid-template-columns: repeat(2, 1fr); }
  .pf-process__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .pf-step:nth-child(2)::before { display: none; }
  .pf-process__sub { white-space: normal; }
  .pf-albums__grid.grid--albums { grid-template-columns: repeat(2, 1fr); }
  .pf-footer__grid.footer__grid, .pf-footer__grid.footer__grid:has(.pf-footer__menu) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pf-services, .pf-process, .pf-feelback, .pf-news, .pf-seo { padding-top: 32px; padding-bottom: var(--space-5); }
  .masthead__title br { display: none; } /* màn hẹp: bỏ ngắt dòng cố định, để tự xuống dòng */
}
@media (max-width: 560px) {
  .pf-services__grid, .pf-news__grid { grid-template-columns: 1fr; }
  .pf-process__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pf-step::before { display: none; }
  .pf-step { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-3); row-gap: var(--space-1); }
  .pf-step__num { grid-row: 1 / span 2; margin: 0; }
  .pf-step__desc { max-width: none; }
  .pf-feelback__track .pf-quote { width: min(320px, 82vw); }
  .pf-albums__grid.grid--albums { grid-template-columns: 1fr; }
  .pf-footer__grid.footer__grid, .pf-footer__grid.footer__grid:has(.pf-footer__menu) { grid-template-columns: 1fr; }
  .footer__grid > div:last-child { justify-self: start; }
  .footer__bottom { flex-wrap: wrap; }
    .masthead__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Masthead có ảnh nền (hanoiflycam, 22/10/2026): ảnh flycam phủ tối, chữ trắng ---------- */
.masthead--image {
  position: relative; isolation: isolate; color: #fff;
  background: #141414 var(--pf-hero) center / cover no-repeat;
  padding: calc(var(--space-6) + var(--nav-h)) 0 var(--space-5);
}
.masthead--image .masthead__stats { margin-top: var(--space-4); }
.masthead--image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.35) 50%, rgba(10, 10, 10, 0.75) 100%);
}
.masthead--image .masthead__title, .masthead--image .masthead__sub { color: #fff; }
.masthead--image .masthead__sub { opacity: 0.9; }
.masthead--image .masthead__stats li { color: rgba(255, 255, 255, 0.85); }
.masthead--image .masthead__stats strong { color: #fff; }
.btn--ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 600px) {
  .masthead--image { padding-top: calc(var(--space-5) + var(--nav-h)); }
}

/* ---------- Trang chủ có banner tối: menu trên banner chữ trắng, logo bản trắng; khi cuộn (is-stuck) trở lại bình thường ---------- */
body.home .nav:not(.is-stuck) { color: #fff; }
body.home .nav:not(.is-stuck) .nav__links a,
body.home .nav:not(.is-stuck) .nav__icon-btn,
body.home .nav:not(.is-stuck) .nav__switch a { color: #fff; }
body.home .nav:not(.is-stuck) .nav__switch { border-color: rgba(255, 255, 255, 0.7); }
body.home .nav:not(.is-stuck) .nav__switch a:hover { background: rgba(255, 255, 255, 0.15); }
body.home .nav:not(.is-stuck) .nav__switch a.is-active { background: #fff; color: #141414; }
body.home .nav:not(.is-stuck) .nav__toggle span { background: #fff; }
body.home .nav:not(.is-stuck) .nav__logo--light { display: none; }
body.home .nav:not(.is-stuck) .nav__logo--dark { display: block; }
/* Menu mở trên điện thoại (nav__links hiện thành hộp) vẫn dùng màu chữ thường */
@media (max-width: 992px) {
  body.home .nav:not(.is-stuck) .nav__links a { color: var(--text); }
  body.home .nav:not(.is-stuck) .nav__links a::after { background: var(--accent); }
}