/* Bố cục trang nội dung: chuyên mục bài viết, liên hệ, trang tĩnh, FAQ, 404 (lib/articleHtml.ts);
   cuối file: chỗ vá markup theme của bài viết chi tiết và trang snapshot (data/pages/*.json).
   Khung, thẻ bài viết và khối dùng chung ở site-layout.css; mốc màn hình ghi ở đầu file đó. */

/* ---------- Ô báo trống (chuyên mục chưa có bài, FAQ chưa có câu hỏi, trang chưa có nội dung) ---------- */
.uni-content-empty {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--uni-text-muted);
  border: 1px dashed var(--uni-line-strong);
  border-radius: var(--uni-radius-md);
}

/* ---------- Chuyên mục bài viết: dải chuyên mục → lưới thẻ → phân trang ---------- */
.uni-blog { padding-top: 36px; }
.uni-blog__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.uni-blog__tab {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--uni-text);
  border: 1px solid var(--uni-line-strong);
  border-radius: var(--uni-radius-full);
  text-decoration: none;
  transition: background-color var(--uni-ease-fast), border-color var(--uni-ease-fast), color var(--uni-ease-fast);
}
.uni-blog__tab:hover { color: var(--mainColor); border-color: var(--mainColor); text-decoration: none; }
.uni-blog__tab.is-active,
.uni-blog__tab.is-active:hover { color: var(--textColor); background: var(--mainColor); border-color: var(--mainColor); }
.uni-blog__pager { margin-top: 40px; }

/* ---------- Liên hệ: thẻ thông tin | thẻ form ---------- */
.uni-contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
.uni-contact__card {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--uni-line);
  border-radius: var(--uni-radius-lg);
}
.uni-contact__card--info { background: var(--uni-band); }
.uni-contact__card--form { background: var(--uni-surface); box-shadow: var(--uni-shadow); }
.uni-contact__title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--uni-text);
}
.uni-contact__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uni-contact__row { display: flex; gap: 14px; align-items: flex-start; }
.uni-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--mainColor);
}
.uni-contact__icon svg { width: 18px; height: 18px; }
.uni-contact__mask {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.uni-contact__label { display: block; font-size: 15px; font-weight: 700; color: var(--uni-text); }
.uni-contact__value {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--uni-text-muted);
  overflow-wrap: anywhere;
}
.uni-contact__value a { color: inherit; }
.uni-contact__value a:hover { color: var(--mainColor); }
.uni-contact__value .uni-contact__hotline { font-size: 19px; font-weight: 800; color: var(--mainColor); }
.uni-contact__map {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--uni-line);
}
.uni-contact__map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  border-radius: var(--uni-radius-md);
}
.uni-contact__form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.uni-contact__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.uni-contact__field-label { font-size: 14px; font-weight: 700; color: var(--uni-text); }
/* Dấu * suy từ thuộc tính required của ô — không gõ tay vào nhãn. */
.uni-contact__field:has(:required) .uni-contact__field-label::after { content: " *"; color: var(--mainColor); }
.uni-contact__form .form-control {
  height: 48px;
  padding: 0 16px;
  /* Dưới 16px thì iOS (cả iPad, cả điện thoại xoay ngang) tự phóng to trang khi chạm vào ô. */
  font-size: 16px;
  color: var(--textColor);
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--uni-radius-md);
  box-shadow: none;
}
.uni-contact__form textarea.form-control { height: auto; padding: 12px 16px; resize: vertical; }
.uni-contact__form .form-control:focus { border-color: var(--mainColor); box-shadow: none; }
.uni-contact__form .uni-btn { margin-top: 4px; }

/* ---------- Trang tĩnh: hộp nội dung soạn từ admin (chữ trình bày ở content_style.css) ---------- */
.uni-page-body.content-page {
  max-width: 900px;
  min-height: 0;
  margin: 0 auto;
  padding: 48px 56px;
  border-radius: var(--uni-radius-lg);
}

/* ---------- FAQ: nhóm câu hỏi → danh sách thẻ mở/đóng ----------
   Class theme (box-category-faqs, faqtitle-*, text-*) giữ cho ThemeJS; style_page.scss.css
   đặt cỡ chữ tiêu đề nhóm bằng !important nên chỗ đó buộc phải !important theo. */
.uni-faq { padding-top: var(--uni-section-y); }
.uni-faq__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 780px;
  margin: 0 auto;
}
.uni-faq .uni-faq__group { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.uni-faq .uni-faq__group .uni-faq__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 4px;
  padding: 0 0 12px;
  font-size: 20px !important;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  color: var(--uni-text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--uni-line);
}
.uni-faq .uni-faq__group-title .category-faqs-fa { position: static; margin: 0; color: var(--mainColor); }
/* Mũi tên theme là mask ảnh /theme/down-navigate.png — ảnh không có trong public/ nên vẽ bằng
   viền. Theme xoay .fa-angle-up 180deg (!important) nên chỉ cần vẽ chiều xuống. */
.uni-faq .uni-faq__group .fa-angle-up,
.uni-faq .uni-faq__group .fa-angle-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
}
.uni-faq .uni-faq__group .fa-angle-up::before,
.uni-faq .uni-faq__group .fa-angle-down::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.uni-faq .uni-faq__item {
  overflow: hidden;
  background: var(--uni-surface);
  border: 1px solid var(--uni-line);
  border-radius: var(--uni-radius-md);
}
.uni-faq .uni-faq__heading { margin: 0; font-size: inherit; }
.uni-faq .uni-faq__item .uni-faq__q {
  display: flex;
  gap: 16px;
  width: 100%;
  min-height: 0;
  padding: 20px 24px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* ThemeJS gắn faqtitle-show khi mở: cả thẻ chuyển nền trắng, chữ tối (đúng hành vi theme). */
.uni-faq .uni-faq__item .uni-faq__q.faqtitle-show,
.uni-faq .uni-faq__a { background: #fff; }
.uni-faq .uni-faq__q-text { font-size: 16px; font-weight: 700; line-height: 1.5; }
.uni-faq .uni-faq__q .fa { flex-shrink: 0; margin: 0; }
.uni-faq .uni-faq__a { padding: 0 24px 20px; font-size: 15px; line-height: 1.65; }
.uni-faq .uni-faq__a.tts-content-faq p { margin: 0 0 10px; padding: 0; }
.uni-faq .uni-faq__a.tts-content-faq p:last-child { margin-bottom: 0; }

/* ---------- 404: mã lỗi → nút về trang chủ (dưới page hero) ---------- */
.uni-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.uni-not-found__code {
  margin: 0;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--mainColor);
}

@media (max-width: 768px) {
  .uni-content-empty { padding: 32px 16px; font-size: 15px; }
  .uni-blog { padding-top: 24px; }
  .uni-blog__tabs { gap: 6px; margin-bottom: 20px; }
  .uni-blog__tab { padding: 7px 14px; font-size: 13px; }
  .uni-blog__pager { margin-top: 28px; }
  .uni-contact { grid-template-columns: 1fr; gap: 24px; }
  .uni-contact__card { padding: 24px 20px; }
  .uni-contact__title { font-size: 21px; }
  .uni-page-body.content-page { padding: 28px 20px; }
  .uni-faq__list { gap: 32px; }
  .uni-faq .uni-faq__group .uni-faq__group-title { font-size: 18px !important; }
  .uni-faq .uni-faq__item .uni-faq__q { padding: 16px 18px; }
  .uni-faq .uni-faq__q-text { font-size: 15px; }
  .uni-faq .uni-faq__a { padding: 0 18px 16px; }
  .uni-not-found__code { font-size: 72px; }
}

/* ---------- Bài viết chi tiết + trang snapshot: vá markup theme ---------- */
/* Cột nội dung (flex item, không có class col): theme để overflow:hidden → thanh tab sticky của bảng giá
   không dính; clip cắt như cũ mà không tạo khung cuộn, min-width: 0 giữ cột co được như hidden vốn cho.
   Cột vốn rộng theo nội dung: trang snapshot hẹp tới khi script dựng xong lưới rồi mới bung (layout shift). */
.article-main .box_max_full_width { width: 100%; min-width: 0; overflow: clip; }
/* search_style.scss.css dời mọi `.item-blog .block-thumb .thumb img` bằng translate(-50%,-50%) + ép
   width/height auto !important → khung chỉ hiện một góc ảnh; !important ở đây chỉ để thắng rule đó. */
.blog_lienquan .item-blog .thumb img {
  transform: none;
  width: 100% !important;
  height: 100% !important;
}

/* ---------- Vùng chạm ≥44px trên màn chạm (cùng mốc với khối cuối site-layout.css) ---------- */
@media (max-width: 1024px), (hover: none) {
  .uni-blog__tab { display: inline-flex; align-items: center; min-height: var(--uni-tap); }
  .uni-contact__value a { display: inline-flex; align-items: center; min-height: var(--uni-tap); }
  /* Mục lục bài viết (markup theme): thanh mở/đóng và từng link mục. */
  .title-goto-wrapper { min-height: var(--uni-tap); }
  .evo-toc .toc-list .toc-list-item { margin-bottom: 0; }
  .evo-toc .toc-list .toc-list-item a { display: flex; align-items: center; min-height: var(--uni-tap); }
}