/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.4
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/* ===== Sidebar News (Dark Purple – no var) ===== */
.sidebar, .widget-area, .site-sidebar {
  color: #eee9ff;
}
.post-sidebar {
	border: none !important; 
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.post-sidebar .widget, .widget_block {
  background: linear-gradient(180deg,#161026,#1d1532);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 18px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* Tiêu đề widget */
.widget-title, .widget h2, .widget h3 {
  color: #fff;
  font-size: 16px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  letter-spacing: .2px;
}

/* Danh sách link */
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
  position: relative;
 
  border-bottom: 1px dashed rgba(255,255,255,.2);
 border-top: 0px !important;
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a {
  color: #b7addd;
  text-decoration: none;
  display: block;
  transition: color .2s ease, transform .15s ease;
}
.widget ul li a:hover {
  color: #c084fc;
  transform: translateX(2px);
}

/* Chấm tím nhỏ */
.widget ul li::before {
 
}

/* Category count */
.widget_categories li,
.widget_archive li {
  display: flex; justify-content: space-between; align-items: center;
}
.widget_categories li .count,
.widget_archive li .count {
  background: rgba(139,92,246,.18);
  color: #f7f4ff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 8px;
}

/* Trạng thái current */
.widget_categories .current-cat > a {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(139,92,246,.45);
}

/* Recent posts có thumbnail */
.widget_recent_entries li {
  display: flex; gap: 10px; align-items: center;
}
.widget_recent_entries .post-date {
  font-size: 12px; color: #b7addd;
}
.widget_recent_entries img {
  width: 60px; height: 38px; object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: #100a1f;
}

/* Search */
.widget_search .search-form,
.wp-block-search {
  display:flex; gap:8px; align-items:center;
  background: rgba(22,16,38,.75);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px;
}
.widget_search .search-field,
.wp-block-search__input {
  flex:1; border:0; outline:0;
  background:transparent; color:#eee9ff;
  font-size:14px;
}
.widget_search .search-submit,
.wp-block-search__button {
  border:0; cursor:pointer; border-radius:10px; padding:8px 12px;
  font-weight:600; color:#0c0716;
  background: linear-gradient(90deg,#8b5cf6,#c084fc);
  box-shadow:0 6px 18px rgba(139,92,246,.35);
  transition:filter .2s ease, transform .2s ease;
}
.widget_search .search-submit:hover,
.wp-block-search__button:hover {
  filter:brightness(1.06); transform:translateY(-1px);
}

/* Tag cloud */
.tagcloud a {
  display:inline-block; margin:6px 6px 0 0; padding:6px 10px;
  font-size:13px !important; text-decoration:none;
  color:#f7f4ff;
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(192,132,252,.14));
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  transition:transform .15s ease, background .2s ease;
}
.tagcloud a:hover {
  transform:translateY(-1px);
  background: linear-gradient(90deg,#8b5cf6,#c084fc);
  color:#0c0716;
}

/* Ảnh */
.widget_media_image img {
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* Sticky */
@media(min-width:1025px){
  .site-sidebar, .widget-area{ position:sticky; top:24px; }
}

/* Mobile */
@media(max-width:640px){
  .widget{ padding:12px 14px; border-radius:14px; }
  .widget-title{ font-size:15px; }
}

/* ===== Single Post Dark Purple (no CSS vars) ===== */

/* Nền tổng thể + chữ */
body.single, body.single-post {
  background: radial-gradient(1200px 800px at 15% -10%, #140b26 0%, #0b0712 55%) fixed;
  color: #eee9ff;
}

/* Breadcrumb (nếu có) */
.breadcrumb, .breadcrumbs, .woocommerce-breadcrumb {
  color: #b7addd;
}
.breadcrumb a, .breadcrumbs a { color: #c084fc; text-decoration: none; }
.breadcrumb a:hover, .breadcrumbs a:hover { color: #e9d5ff; }

/* Khung bài viết chính */
.single-post .article-inner,
.single-post .entry,
.single-post .entry-content-wrap {
  background: linear-gradient(180deg, #161026, #1d1532);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Header bài + tiêu đề */
.single-post .entry-header {
  padding: 20px 22px 10px;
  border-bottom: 1px solid rgba(139,92,246,.35);
  background:
    linear-gradient(135deg, rgba(139,92,246,.18), rgba(192,132,252,.12)),
    linear-gradient(90deg, transparent, rgba(255,255,255,.04) 35%, transparent 70%);
}
.single-post .entry-title, .single h1.entry-title, .single-post h1 {
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.25;
  margin: 0 0 6px;
  color: #ffffff;
}

/* Meta (tác giả, ngày, chuyên mục) */
.single-post .entry-meta, .single-post .byline, .single-post .posted-on, .single-post .cat-links {
  color: #b7addd;
  font-size: 13px;
}
.single-post .entry-meta a, .single-post .cat-links a { color: #c084fc; text-decoration: none; }
.single-post .entry-meta a:hover, .single-post .cat-links a:hover { color: #e9d5ff; }

/* Ảnh featured (nếu theme hiển thị riêng) */
.single-post .featured-media, .single-post .post-thumbnail {
  background: #100a1f;
  overflow: hidden;
}
.single-post .featured-media img, .single-post .post-thumbnail img {
  width: 100%; height: auto; display: block; object-fit: cover;
  transform: scale(1);
  transition: transform .5s ease;
  filter: saturate(1.05) contrast(1.02);
}
.single-post .featured-media:hover img,
.single-post .post-thumbnail:hover img { transform: scale(1.03); }

/* Nội dung bài viết */
.single-post .entry-content {
  padding: 20px 22px 24px;
  color: #eee9ff;
  line-height: 1.8;
  font-size: 16px;
}
.single-post .entry-content p { color: #dcd4ff; }
.single-post .entry-content a { color: #c084fc; text-decoration: none; border-bottom: 1px dotted rgba(192,132,252,.45); }
.single-post .entry-content a:hover { color: #ffffff; border-bottom-color: transparent; }

/* Heading trong nội dung */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
  color: #ffffff;
  margin-top: 18px;
  margin-bottom: 10px;
}
.single-post .entry-content h2 { font-size: clamp(20px, 2.6vw, 28px); }
.single-post .entry-content h3 { font-size: clamp(18px, 2.2vw, 24px); }
.single-post .entry-content h4 { font-size: 18px; color: #f5f3ff; }

/* Blockquote */
.single-post blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(192,132,252,.10));
  border-left: 3px solid #a78bfa;       /* tím nhẹ */
  border-right: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  color: #efeafe;
}
.single-post blockquote cite { display:block; margin-top:8px; color:#c4b5fd; font-style:normal; }

/* Danh sách */
.single-post .entry-content ul li,
.single-post .entry-content ol li { margin: 6px 0; }
.single-post .entry-content ul li::marker { color: #c084fc; }

/* Bảng */
.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: #161026;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.single-post .entry-content th,
.single-post .entry-content td {
  padding: 10px 12px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  color: #eee9ff;
}
.single-post .entry-content thead th {
  background: #20173b;
  color: #ffffff;
}

/* Code/Pre */
.single-post .entry-content code {
  background: #1d1532;
  color: #f4f1ff;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
}
.single-post .entry-content pre {
  background: #120c22;
  color: #f4f1ff;
  padding: 14px;
  border-radius: 12px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
}

/* HR & selection */
.single-post .entry-content hr {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #a78bfa, transparent);
  margin: 20px 0;
}
::selection { background: #8b5cf6; color: #0c0716; }

/* Hộp tag + chia sẻ + footer bài viết */
.single-post .article-footer, .single-post .entry-footer {
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(139,92,246,.35);  /* tím nhẹ theo yêu cầu */
  background: #130c22;
}
.single-post .tags-links a, .single-post .post-tags a {
  display: inline-block;
  margin: 6px 6px 0 0; padding: 6px 10px;
  font-size: 13px; text-decoration: none;
  color: #f7f4ff;
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(192,132,252,.14));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  transition: transform .15s ease, background .2s ease;
}
.single-post .tags-links a:hover, .single-post .post-tags a:hover {
  transform: translateY(-1px);
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
  color: #0c0716;
}

/* Tác giả (author box) nếu có */
.single-post .author-box, .single-post .author-info {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  align-items: center;
  background: #161026;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  margin-top: 18px;
}
.single-post .author-box .avatar, .single-post .author-info img {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background: #100a1f;
}
.single-post .author-box .author-name { color:#fff; font-weight:600; }
.single-post .author-box .author-bio { color:#b7addd; font-size:14px; }

/* Bài liên quan / next-prev nav */
.single-post .related-posts, .single-post .post-nav, .single-post .next-prev-nav {
  background: linear-gradient(180deg, #161026, #1d1532);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.single-post .post-nav a { color: #c084fc; text-decoration: none; }
.single-post .post-nav a:hover { color: #e9d5ff; }

/* Comments */
.single-post #comments, .single-post .comments-area {
  background: #161026;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  margin-top: 18px;
}
.single-post .comment-list .comment {
  border-bottom: 1px dashed rgba(255,255,255,.08);
  padding: 12px 0;
}
.single-post .comment-list .comment-author .fn { color: #ffffff; }
.single-post .comment-list .comment-meta a { color: #b7addd; }
.single-post .comment-respond input[type="text"],
.single-post .comment-respond input[type="email"],
.single-post .comment-respond textarea {
  width: 100%;
  background: rgba(22,16,38,.75);
  border: 1px solid rgba(255,255,255,.08);
  color: #eee9ff;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.single-post .comment-respond input[type="submit"] {
  border: 0; cursor: pointer; border-radius: 10px; padding: 10px 14px;
  font-weight: 600; color: #0c0716;
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
  box-shadow: 0 6px 18px rgba(139,92,246,.35);
  transition: filter .2s ease, transform .2s ease;
}
.single-post .comment-respond input[type="submit"]:hover {
  filter: brightness(1.06); transform: translateY(-1px);
}

/* Sidebar bên cạnh trong single */
.single-post .sidebar, .single-post .widget-area, .single-post .site-sidebar {
  color: #eee9ff;
}
.single-post .widget, .single-post .widget_block {
 /*
  background: linear-gradient(180deg,#161026,#1d1532);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 18px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  */
}

/* Responsive */
@media (max-width: 640px) {
  .single-post .entry-content { padding: 16px; font-size: 15.5px; }
  .single-post .entry-header { padding: 16px; }
}