/*
 * ci4-category.css — Scoped .ci4-category
 * Không sửa CSS gốc. Không dùng selector global.
 */

/* ── Child category tabs ── */
.ci4-category .child-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 20px;
  padding: 0;
  list-style: none;
}

.ci4-category .child-cat-tabs a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 22px;
  border: 1px solid #27ae60;
  color: #1a5c2e;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s;
  line-height: 1.3;
}

.ci4-category .child-cat-tabs a:hover,
.ci4-category .child-cat-tabs a.active {
  background: #27ae60;
  color: #fff;
  border-color: #27ae60;
  text-decoration: none;
}

/* Mobile: cho phép scroll ngang nếu quá nhiều tab */
@media (max-width: 600px) {
  .ci4-category .child-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
  }

  .ci4-category .child-cat-tabs::-webkit-scrollbar { height: 4px; }
  .ci4-category .child-cat-tabs::-webkit-scrollbar-thumb {
    background: #cce5d0;
    border-radius: 4px;
  }

  .ci4-category .child-cat-tabs a {
    font-size: 12px;
    padding: 7px 13px;
    flex-shrink: 0;
  }
}

/* ── Breadcrumb ── */
.ci4-category .cat-breadcrumb ul {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
}

.ci4-category .cat-breadcrumb li + li::before {
  content: ' › ';
  color: #aaa;
  margin-right: 4px;
}

.ci4-category .cat-breadcrumb a { color: #27ae60; text-decoration: none; }
.ci4-category .cat-breadcrumb li.active { color: #555; }

/* ── Heading ── */
.ci4-category .cat-h1 {
  font-size: 22px;
  font-weight: 700;
  color: #0e5c2e;
  margin: 12px 0 6px;
  text-align: center;
}

.ci4-category .cat-count {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-bottom: 14px;
}

.ci4-category .cat-empty {
  text-align: center;
  padding: 40px 0;
  color: #888;
}

/* ── Pagination ── */
.ci4-category .cat-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 30px;
}

.ci4-category .cat-page-btn {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 6px;
  border: 1px solid #ddd;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
}

.ci4-category .cat-page-btn:hover {
  background: #27ae60;
  color: #fff;
  border-color: #27ae60;
  text-decoration: none;
}

.ci4-category .cat-page-btn.active {
  background: #0e5c2e;
  color: #fff;
  border-color: #0e5c2e;
  font-weight: 700;
  cursor: default;
}

.ci4-category .cat-page-dots { color: #aaa; padding: 0 4px; }

/* ── Description ── */
.ci4-category .cat-description {
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

/* ── FAQ ── */
.ci4-category .cat-faq { margin: 24px 0 30px; }

.ci4-category .cat-faq-title {
  font-size: 18px;
  font-weight: 700;
  color: #0e5c2e;
  margin-bottom: 14px;
}

.ci4-category .cat-faq-item {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.ci4-category .cat-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  background: #f9f9f9;
  font-weight: 600;
  font-size: 14px;
  gap: 10px;
  user-select: none;
}

.ci4-category .cat-faq-q:hover { background: #f0fff4; }

.ci4-category .cat-faq-a {
  display: none;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}

.ci4-category .cat-faq-a.open { display: block; }

/* A53  Remove black focus/icon artifact on travel experience subcategory tabs */
.ci4-category .news-sub-tabs .fa-ban,
.ci4-category .experience-tabs .fa-ban,
.ci4-category .project-tab.news-sub-tabs .fa-ban {
  display: none !important;
}

.ci4-category .news-sub-tabs a::before,
.ci4-category .news-sub-tabs a::after,
.ci4-category .news-sub-tabs h2::before,
.ci4-category .news-sub-tabs h2::after,
.ci4-category .experience-tabs a::before,
.ci4-category .experience-tabs a::after,
.ci4-category .experience-tabs h2::before,
.ci4-category .experience-tabs h2::after,
.ci4-category .project-tab.news-sub-tabs a::before,
.ci4-category .project-tab.news-sub-tabs a::after,
.ci4-category .project-tab.news-sub-tabs h2::before,
.ci4-category .project-tab.news-sub-tabs h2::after {
  content: none !important;
  display: none !important;
}

.ci4-category .news-sub-tabs a,
.ci4-category .news-sub-tabs h2,
.ci4-category .experience-tabs a,
.ci4-category .experience-tabs h2,
.ci4-category .project-tab.news-sub-tabs a,
.ci4-category .project-tab.news-sub-tabs h2 {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ci4-category .news-sub-tabs a:focus,
.ci4-category .news-sub-tabs a:active,
.ci4-category .news-sub-tabs h2:focus,
.ci4-category .news-sub-tabs h2:active,
.ci4-category .experience-tabs a:focus,
.ci4-category .experience-tabs a:active,
.ci4-category .experience-tabs h2:focus,
.ci4-category .experience-tabs h2:active,
.ci4-category .project-tab.news-sub-tabs a:focus,
.ci4-category .project-tab.news-sub-tabs a:active,
.ci4-category .project-tab.news-sub-tabs h2:focus,
.ci4-category .project-tab.news-sub-tabs h2:active {
  outline: none !important;
  box-shadow: none !important;
}

/* A53.1  Fix black outline on travel subcategory tabs */
.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #1e9bff !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
}

.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal::before,
.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal::after,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal::before,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal::after {
  content: none !important;
  display: none !important;
}

.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal:focus,
.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal:active,
.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal:hover,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal:focus,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal:active,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal:hover {
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.ci4-category .wrapp_list_desc .hvr-shutter-out-horizontal.active,
.ci4-category .wrapp_list_desc .btn-success,
.ci4-category .wrapp_list_desc .active,
.ci4-category .travel-sub-tabs .hvr-shutter-out-horizontal.active,
.ci4-category .travel-sub-tabs .btn-success,
.ci4-category .travel-sub-tabs .active {
  background: #4cae22 !important;
  border-color: #4cae22 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.ci4-category .wrapp_list_desc h2.hvr-shutter-out-horizontal,
.ci4-category .wrapp_list_desc h2.btn,
.ci4-category .travel-sub-tabs h2.hvr-shutter-out-horizontal,
.ci4-category .travel-sub-tabs h2.btn {
  margin: 0 3px 6px !important;
  font-size: 14px !important;
  line-height: 1.42857143 !important;
  font-weight: 700 !important;
}

.ci4-category .wrapp_list_desc *:focus,
.ci4-category .wrapp_list_desc *:active,
.ci4-category .travel-sub-tabs *:focus,
.ci4-category .travel-sub-tabs *:active {
  outline: 0 !important;
  box-shadow: none !important;
}