/*!
 * TVN Editor — CSS hệ trang dự án.
 *
 * Chỉ chứa phần flatsome-child/style.css CHƯA có: nút lọc danh mục, dải thông tin
 * trên hero, thanh điều hướng và 5 icon mới. Toàn bộ thẻ dự án, lưới thông số,
 * hộp điểm nhấn đều tái dùng class có sẵn trong theme.
 */

/* --- Nền tảng icon (lặp lại từ Section 32 để plugin tự đứng được) -------- */
html body .tvn-ico {
  display: inline-block !important;
  flex: none !important;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

html body .tvn-ico-chevron { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><polyline%20points='9%2018%2015%2012%209%206'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><polyline%20points='9%2018%2015%2012%209%206'/></svg>"); }
html body .tvn-ico-arrowleft { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><line%20x1='19'%20y1='12'%20x2='5'%20y2='12'/><polyline%20points='12%2019%205%2012%2012%205'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><line%20x1='19'%20y1='12'%20x2='5'%20y2='12'/><polyline%20points='12%2019%205%2012%2012%205'/></svg>"); }
html body .tvn-ico-check { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'><polyline%20points='20%206%209%2017%204%2012'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'><polyline%20points='20%206%209%2017%204%2012'/></svg>"); }
html body .tvn-ico-layers { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><polygon%20points='12%202%202%207%2012%2012%2022%207%2012%202'/><polyline%20points='2%2017%2012%2022%2022%2017'/><polyline%20points='2%2012%2012%2017%2022%2012'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><polygon%20points='12%202%202%207%2012%2012%2022%207%2012%202'/><polyline%20points='2%2017%2012%2022%2022%2017'/><polyline%20points='2%2012%2012%2017%2022%2012'/></svg>"); }
html body .tvn-ico-doc { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/><polyline%20points='14%202%2014%208%2020%208'/><line%20x1='16'%20y1='13'%20x2='8'%20y2='13'/><line%20x1='16'%20y1='17'%20x2='8'%20y2='17'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/><polyline%20points='14%202%2014%208%2020%208'/><line%20x1='16'%20y1='13'%20x2='8'%20y2='13'/><line%20x1='16'%20y1='17'%20x2='8'%20y2='17'/></svg>"); }

/* --- Kích thước icon theo ngữ cảnh -------------------------------------- */
html body .tvn-card-link .tvn-ico        { width: 14px; height: 14px; }
html body .tvn-back-link .tvn-ico        { width: 18px; height: 18px; }
html body .tvn-spec-card-title .tvn-ico,
html body .tvn-desc-card-title .tvn-ico  { width: 20px; height: 20px; background-color: #E85C04; }
html body .tvn-hl-item .tvn-ico          { width: 18px; height: 18px; background-color: #10B981; }

/* --- Thanh lọc danh mục (theme chưa có CSS cho phần này) ----------------- */
html body .tvn-filter-tabs-bar {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 35px !important;
}
html body button.tvn-filter-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  background: #FFFFFF !important;
  color: #0B1F4B !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.04) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  text-transform: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}
html body button.tvn-filter-btn:hover {
  border-color: #E85C04 !important;
  color: #E85C04 !important;
  transform: translateY(-1px) !important;
}
html body button.tvn-filter-btn.is-active {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(232, 92, 4, 0.25) !important;
}
@media (max-width: 549px) {
  html body button.tvn-filter-btn { padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* --- Dải thông tin nhanh trên hero -------------------------------------- */
html body .tvn-hero-meta-strip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  padding: 10px 24px !important;
  margin: 4px auto 0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 30px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #FFFFFF !important;
  max-width: 100% !important;
}
html body .tvn-hero-meta-strip strong { color: #FFFFFF !important; font-weight: 700 !important; }
html body .tvn-hero-meta-sep { opacity: 0.4 !important; }
@media (max-width: 767px) {
  html body .tvn-hero-meta-strip { border-radius: 14px !important; padding: 12px 16px !important; font-size: 12.5px !important; }
  html body .tvn-hero-meta-sep { display: none !important; }
  html body .tvn-hero-meta-strip > span { flex: 0 0 100% !important; text-align: center !important; }
}

/* --- Hero trang chi tiết ------------------------------------------------ */
html body .tvn-proj-hero { min-height: 460px !important; padding-top: 460px !important; position: relative !important; background: #071533 !important; }
html body .tvn-proj-hero-overlay { background: linear-gradient(180deg, rgba(7,21,51,0.76) 0%, rgba(7,21,51,0.88) 100%) !important; }
html body .tvn-proj-hero-box { width: 92% !important; }
@media (max-width: 549px) {
  html body .tvn-proj-hero { min-height: 380px !important; padding-top: 380px !important; }
  html body .tvn-proj-hero-box { width: 95% !important; }
}

/* --- Thanh điều hướng trên trang chi tiết ------------------------------- */
html body .tvn-proj-nav-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 24px !important;
}
html body a.tvn-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
html body a.tvn-back-link:hover { color: #E85C04 !important; }
html body .tvn-breadcrumb-badge {
  background: rgba(232, 92, 4, 0.1) !important;
  color: #E85C04 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 14px !important;
  line-height: 1.4 !important;
}

/* --- Thư viện ảnh ------------------------------------------------------- */
html body .tvn-proj-slider-full {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(11, 31, 75, 0.08) !important;
  background: transparent !important;
}
html body .tvn-proj-thumbs { margin-top: 12px !important; }
html body .tvn-proj-thumbs + .tvn-proj-info-grid,
html body .tvn-proj-slider-full + .tvn-proj-info-grid { margin-top: 30px !important; }