/* ============================================================
   Giao diện portfolio — thân bài viết, trang tĩnh và nội dung do
   plugin sinh ra (TOC, Contact Form 7,
   SiteOrigin, kk-star-ratings). Bổ sung cho theme.css + home.css.
   ============================================================ */

/* ---------- Khung bài đơn / trang ---------- */
.pf-single { padding: calc(var(--nav-h) + var(--space-5)) 0 var(--space-6); }
/* Khung ngoài rộng bằng trang chủ (1200px); riêng cột chữ (bài, trang, mô tả chuyên mục,
   mô tả video/album) giới hạn --pf-reading ≈ 65–75 ký tự/dòng cho dễ đọc. Lưới video/album/bài
   liên quan vẫn dùng .container 1200px. Đổi một chỗ ở đây nếu muốn rộng/hẹp hơn. */
:root { --pf-reading: 820px; }
/* Trang nội dung (body.pf-narrow, xem hanoiflycam_pf_is_narrow()): mọi khối trong <main> cùng một cột 880px như
   /gioi-thieu/ — khung .container 928px (880 + 2×24 đệm), cột chữ cũng 880px. Nav/footer nằm ngoài <main> nên
   vẫn 1200px. Trang chủ và phần video/album không có class này. */
.pf-narrow .pf-main { --container: 928px; --pf-reading: 880px; }
.pf-narrow .pf-single { padding-top: calc(var(--nav-h) + var(--space-5)); }
/* Lưới trong cột 880px: 3 cột ≈ 277px/thẻ; album lưới dịch vụ 4 cột → 3 cột cho khỏi chật
   (trang báo giá không dùng cột hẹp, xem hanoiflycam_pf_is_narrow) */
.pf-narrow .pf-news__grid--4 { grid-template-columns: repeat(3, 1fr); }
.pf-narrow .pf-albums__grid.grid--albums { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px) {
  .pf-narrow .pf-news__grid--4, .pf-narrow .pf-albums__grid.grid--albums { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pf-narrow .pf-news__grid--4 { grid-template-columns: 1fr; }
}
.pf-single__inner { max-width: var(--container); }
.pf-single__inner .pf-article,
.pf-single__inner .taxonomy-description { max-width: var(--pf-reading); margin-left: auto; margin-right: auto; }
.pf-article__head { margin-bottom: var(--space-5); }
.pf-article__cats { margin-bottom: var(--space-3); }
.pf-article__cats a:hover { color: var(--accent); }
.pf-article__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 var(--space-3); }
.pf-article__meta { color: var(--text-soft); font-size: 0.88rem; }
.pf-article__footer { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--text-soft); }
.pf-article__footer a { font-weight: 500; color: var(--text); }
.pf-article__footer a:hover { color: var(--accent); }

/* ---------- Thân bài: chữ, tiêu đề, danh sách ---------- */
.pf-entry { font-size: 1.0625rem; /* 17px: cột 820px ≈ 75–85 ký tự/dòng */ line-height: 1.75; word-wrap: break-word; overflow-wrap: break-word; }
.pf-entry > :first-child { margin-top: 0; }
.pf-entry p { margin: 0 0 var(--space-3); }
.pf-entry h1, .pf-entry h2, .pf-entry h3, .pf-entry h4, .pf-entry h5, .pf-entry h6 { margin: var(--space-5) 0 var(--space-3); line-height: 1.25; }
.pf-entry h1 { font-size: clamp(1.5rem, 3vw, 2rem); }       /* H1 trong nội dung (vài bài cũ): hiện như H2 */
.pf-entry h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.pf-entry h3 { font-size: 1.2rem; }
.pf-entry h4, .pf-entry h5, .pf-entry h6 { font-size: 1.05rem; }
.pf-entry a:not(.btn) { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pf-entry a:not(.btn):hover { color: var(--accent); }
.pf-entry ul, .pf-entry ol { margin: 0 0 var(--space-3); padding-left: 1.5em; }
.pf-entry ul { list-style: disc; }
.pf-entry ol { list-style: decimal; }
.pf-entry li { margin-bottom: 0.35em; }
.pf-entry li > ul, .pf-entry li > ol { margin: 0.35em 0 0; }
.pf-entry hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
.pf-entry strong, .pf-entry b { font-weight: 600; }
.pf-entry code, .pf-entry pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.pf-entry pre { padding: var(--space-3); background: var(--bg-soft); border-radius: var(--radius-sm); overflow-x: auto; }
.pf-entry .page-links { margin: var(--space-4) 0; font-weight: 600; }
.pf-entry .page-links a { margin-left: 6px; }

/* Chữ có màu/kích thước inline từ Word/Google Docs: không ép, chỉ giữ font của site */
.pf-entry [style*="font-family"] { font-family: var(--font-body) !important; }
.pf-entry span[style*="font-size"] { font-size: inherit !important; }

/* ---------- Ảnh, chú thích, căn lề ---------- */
.pf-entry img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.pf-entry p > img:only-child, .pf-entry .aligncenter, .pf-entry img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.pf-entry .aligncenter { clear: both; text-align: center; }
.pf-entry .alignleft { float: left; margin: 0.3em var(--space-4) var(--space-3) 0; max-width: 50%; }
.pf-entry .alignright { float: right; margin: 0.3em 0 var(--space-3) var(--space-4); max-width: 50%; }
.pf-entry .alignnone { display: inline-block; max-width: 100%; }
.pf-entry figure, .pf-entry .wp-caption { max-width: 100%; margin: 0 auto var(--space-4); text-align: center; }
.pf-entry figure img, .pf-entry .wp-caption img { display: block; margin: 0 auto; }
.pf-entry figcaption, .pf-entry .wp-caption-text { margin-top: var(--space-2); font-size: 0.85rem; color: var(--text-soft); }
.pf-entry .wp-block-image { margin-bottom: var(--space-4); }
.pf-entry .wp-block-gallery { gap: var(--space-2); }
.pf-entry .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.pf-entry .gallery-item { margin: 0; }
.pf-entry .gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pf-entry .has-text-align-center { text-align: center; }
.pf-entry .has-text-align-right { text-align: right; }
@media (max-width: 560px) {
  .pf-entry .alignleft, .pf-entry .alignright { float: none; display: block; max-width: 100%; margin: 0 auto var(--space-3); }
  .pf-entry .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Video YouTube, bản đồ: co theo màn hình ---------- */
.pf-entry iframe { max-width: 100%; border: 0; }
.pf-entry iframe[src*="youtube"], .pf-entry iframe[src*="youtu.be"], .pf-entry iframe[src*="vimeo"], .pf-entry iframe[src*="facebook.com/plugins/video"] {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  margin: 0 auto var(--space-4); border-radius: var(--radius-sm); background: #000;
}
.pf-entry iframe[src*="google.com/maps"] { display: block; width: 100%; min-height: 320px; margin-bottom: var(--space-4); border-radius: var(--radius-sm); }
.pf-entry .wp-block-embed, .pf-entry .wp-block-embed__wrapper, .pf-entry .__youtube_prefs__, .pf-entry .fluid-width-video-wrapper { max-width: 100%; }
.pf-entry .wp-block-embed { margin: 0 0 var(--space-4); }
.pf-entry .wp-block-embed iframe { width: 100%; }
.pf-entry video { max-width: 100%; height: auto; display: block; margin: 0 auto var(--space-4); border-radius: var(--radius-sm); }

/* ---------- Bảng: cuộn ngang trên điện thoại (bọc bằng .pf-table ở inc/portfolio-content.php) ---------- */
.pf-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pf-table table, .pf-entry table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.95rem; margin: 0; }
.pf-entry table:not(.pf-table table) { display: block; overflow-x: auto; margin-bottom: var(--space-4); }
.pf-entry th, .pf-entry td { overflow-wrap: anywhere; } /* URL dài trong ô không làm gãy cột */
/* Bảng rộng (bảng giá nhiều cột) tràn ra khỏi cột chữ 820px tới khung 1200px như lưới */
@media (min-width: 900px) {
  .pf-single__inner .pf-article .pf-table {
    width: min(calc(var(--container) - 2 * var(--space-4)), calc(100vw - 2 * var(--space-4)));
    margin-left: 50%; transform: translateX(-50%);
  }
}
.pf-entry th, .pf-entry td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.pf-entry th, .pf-entry thead td { background: var(--bg-soft); font-weight: 600; }
.pf-entry tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-soft) 50%, transparent); }
.pf-entry td[style*="background"], .pf-entry th[style*="background"] { color: #141414; }

/* ---------- Trích dẫn ---------- */
.pf-entry blockquote, .pf-entry .wp-block-quote {
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--accent); background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--text);
}
.pf-entry blockquote p:last-child { margin-bottom: 0; }
.pf-entry blockquote cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: 0.88rem; color: var(--text-soft); }

/* ---------- Nút trong thân bài (.btn) + hotline ---------- */
.pf-entry .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0.7em 1.6em; border-radius: 999px;
  background: var(--accent); color: #fff !important; font-weight: 600; text-decoration: none !important;
  transition: var(--transition);
}

/* ---------- Mục lục (Table of Contents Plus) ---------- */
.pf-entry #toc_container {
  width: 100% !important; max-width: 100%; margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.pf-entry #toc_container .toc_title { font-family: var(--font-head); font-weight: 700; text-align: left; margin-bottom: var(--space-2); }
.pf-entry #toc_container ul { list-style: none; padding: 0; margin: 0; }
.pf-entry #toc_container ul ul { padding-left: var(--space-3); }
.pf-entry #toc_container li { margin: 0.25em 0; }
.pf-entry #toc_container a { color: var(--text); text-decoration: none; }
.pf-entry #toc_container a:hover { color: var(--accent); }
.pf-entry #toc_container .toc_toggle { font-weight: 400; font-size: 0.85em; }

/* ---------- Contact Form 7 ---------- */
.wpcf7 { margin: var(--space-4) 0; }
.wpcf7 form p { margin-bottom: var(--space-3); }
.wpcf7 label { display: block; font-size: 0.92rem; font-weight: 500; margin-bottom: 4px; }
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 textarea, .wpcf7 select, .pf-entry .search-form .search-field {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: none; border-color: var(--accent); }
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input[type="submit"], .wpcf7 .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7em 1.8em;
  border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.wpcf7 input[type="submit"]:hover { background: var(--accent-dark); }
.wpcf7 .wpcf7-spinner { margin-left: 10px; }
.wpcf7 form .wpcf7-response-output { margin: var(--space-3) 0 0; padding: 10px 14px; border-radius: var(--radius-sm); border-width: 1px; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 0.85rem; margin-top: 4px; }

/* ---------- SiteOrigin Page Builder (trang Liên hệ, một số bài) ---------- */
.pf-entry .panel-layout { margin: 0; }
.pf-entry .panel-grid { margin-bottom: var(--space-4); }
.pf-entry .so-panel .widget-title { font-family: var(--font-head); font-size: 1.3rem; margin: 0 0 var(--space-3); }
.pf-entry .textwidget > :first-child { margin-top: 0; }

/* ---------- Đánh giá sao (kk-star-ratings), tag mce ---------- */
.pf-entry .kk-star-ratings { margin: var(--space-4) 0 0; }
.pf-entry .kksr-legend { font-size: 0.85rem; color: var(--text-soft); }
.pf-entry .mce_SELRES_start { display: none; }

/* ---------- Điều hướng bài trước / sau ---------- */
.post-navigation { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.post-navigation .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { display: flex; flex-direction: column; gap: 4px; }
.pf-postnav__label { font-size: 0.8rem; color: var(--text-soft); }
.pf-postnav__title { font-weight: 600; font-size: 0.95rem; line-height: 1.35; transition: var(--transition); }
.post-navigation a:hover .pf-postnav__title { color: var(--accent); }
@media (max-width: 560px) {
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .post-navigation .nav-next { text-align: left; }
}

/* ---------- Bình luận Facebook, bài liên quan ---------- */
.pf-comments { margin-top: var(--space-6); }
.pf-comments__title { margin-bottom: var(--space-3); font-size: 1.3rem; }
.pf-comments .fb-comments, .pf-comments .fb-comments span, .pf-comments .fb-comments iframe { width: 100% !important; }
.pf-news__grid--4 { grid-template-columns: repeat(4, 1fr); }
.pf-post__title a:hover { color: var(--accent); }
@media (max-width: 992px) { .pf-news__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pf-news__grid--4 { grid-template-columns: 1fr; } }

/* ---------- Lưới video/album ghép dưới chữ trang dịch vụ ---------- */
.pf-svc .pf-h2 { margin: 0; }

/* ---------- Bình luận WordPress (khi không dùng Facebook) ---------- */
.comments-area { margin-top: var(--space-6); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.comment-form textarea, .comment-form input:not([type="submit"]) { width: 100%; padding: 12px 14px; font: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.comment-form input[type="submit"] { min-height: 48px; padding: 0.7em 1.8em; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ============================================================
   Trang danh sách: chuyên mục, tìm kiếm, archive, 404
   ============================================================ */
.pf-page-head .rule { margin-top: var(--space-3); }
.pf-page-head__title { white-space: normal; }
.pf-single--archive { padding-top: var(--space-5); padding-bottom: 0; }
.pf-archive { padding-top: var(--space-5); }
.pf-archive__grid { grid-template-columns: repeat(3, 1fr); }
.pf-none { padding: var(--space-5) 0; }
.pf-none .pf-search { margin-top: var(--space-3); }

/* Ô tìm kiếm trong trang */
.pf-search { max-width: 520px; margin: var(--space-3) auto 0; }
.pf-search__form { display: flex; gap: var(--space-2); }
.pf-search__form .ip-form { flex: 1; margin: 0; }
.pf-search__form .search-field {
  width: 100%; min-height: 48px; padding: 0 16px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.pf-search__form .search-field:focus { outline: none; border-color: var(--accent); }
.pf-search__form .search-submit { min-height: 48px; gap: 6px; }

/* 404 */
.pf-404 { padding-bottom: var(--space-6); }
.pf-404__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* Phân trang (paginate_links dạng list) */
.pf-pagination { margin-top: var(--space-6); }
.pf-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pf-pagination li { margin: 0; }
.pf-pagination a.page-numbers, .pf-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 0.92rem;
  transition: var(--transition);
}
.pf-pagination a.page-numbers:hover { border-color: var(--text); }
.pf-pagination span.page-numbers.current { background: var(--text); color: var(--bg); border-color: var(--text); }
.pf-pagination span.page-numbers.dots { border: 0; background: transparent; }

@media (max-width: 992px) { .pf-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .pf-archive__grid { grid-template-columns: 1fr; }
  .pf-search__form .search-submit span { display: none; }
}

/* ============================================================
   Trang đặc thù: báo giá, nhận xét khách hàng
   ============================================================ */
.pf-archive + .pf-archive { padding-top: 0; }
.pf-archive .heading a:hover { color: var(--accent); }
.pf-article--quote .pf-article__head { display: flex; flex-direction: column; align-items: center; }
.pf-article__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-3); }
.pf-entry--quote { font-size: 1.1rem; font-style: italic; text-align: center; max-width: 60ch; margin: 0 auto; }
.pf-archive .pf-feelback__grid .pf-quote__text { font-size: 1rem; }