#main {
  background-image: url('../media/background-pc-789club-e47bc73dc209.webp');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 768px) {
    ;
        background-size: cover;
        background-attachment: scroll;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
h2, h3, h4 {font-weight:700;}
/* Ẩn toàn bộ dividers trong Flatsome */
.hr,
.divider,
.divider-line,
.hr-custom,
.sep,
.separator,
.hr-short,
.divider-short {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.rank-math-breadcrumb .separator{
    display: unset !important;
}

/* color css */
#footer a, p a ,h1,h2,h3
{background: linear-gradient( 0deg, #fede5e 13%, #fdbd44 10%, #fdffc9 70% ); -webkit-background-clip: text; color: transparent !important; text-shadow: 0 0.2px 0 rgba(255, 255, 255, 0.4);}

/* =========================
   789CLUB — Header/Menu (compact)
   ========================= */
:root{
  --h-grad: linear-gradient(180deg, rgba(34,18,66,.96) 0%, rgba(18,10,36,.96) 100%);
  --h-grad-stuck: linear-gradient(180deg, rgba(28,14,55,.97) 0%, rgba(14,7,28,.97) 100%);
  --gold-uline: linear-gradient(90deg,#fff6be,#ffd95e,#ffc400,#ffd95e,#fff6be);
  --text-dim: #ede7ff;
}

/* BG thật của Flatsome header */
#header .header-bg-color,
#header .header-bg-container{
  background: var(--h-grad) !important;
  box-shadow: inset 0 -2px 18px rgba(0,0,0,.55);
  backdrop-filter: saturate(1.15) blur(3px);
}
.stuck #header .header-bg-color{ background: var(--h-grad-stuck) !important; }

/* Đảm bảo lớp con không đè nền */
.header-main,.header-bottom{ background: transparent !important; }

/* Kích thước/transition chung */
#header{ background: transparent; }
.header-wrapper{ transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
.header-main{ min-height: 66px; }
.stuck .header-main{ min-height: 58px; }
.header-main .logo img{ max-height: 42px; }
.stuck .header-main .logo img{ max-height: 38px; }

/* ===== Menu ===== */
.header-bottom .nav > li > a{
  position: relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px;
  font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color: var(--text-dim) !important;
  text-shadow: 0 0 6px rgba(120,90,200,.18);
  transition: color .18s, transform .18s;
}

/* Tắt “pill trắng” mặc định */
.header-bottom .nav > li > a:before{ content:none !important; }

/* Underline vàng có glow */
.header-bottom .nav > li > a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:6px;
  height:2px; border-radius:2px;
  background: var(--gold-uline);
  box-shadow: 0 0 10px rgba(255,215,0,.45);
  transform: scaleX(0); transform-origin:center;
  transition: transform .22s ease-out;
}
.header-bottom .nav > li > a:hover{ color:#fff !important; transform: translateY(-1px); }
.header-bottom .nav > li > a:hover::after{ transform: scaleX(1); }
.header-bottom .nav > li.current-menu-item > a,
.header-bottom .nav > li.current_page_item > a{ color:#fff !important; }
.header-bottom .nav > li.current-menu-item > a::after,
.header-bottom .nav > li.current_page_item > a::after{ transform:scaleX(1); height:3px; }

/* Dropdown */
.header-bottom .nav-dropdown{
  background: radial-gradient(120% 160% at 50% 0%, rgba(36,22,70,.98), rgba(18,10,36,.98));
  border:1px solid rgba(255,215,0,.12);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  border-radius:12px; overflow:hidden;
}
.nav-dropdown > li > a{ padding:12px 16px; color:#efe8ff !important; }
.nav-dropdown > li > a:hover{ color:#fff !important; background: linear-gradient(90deg, rgba(123,92,255,.18), rgba(123,92,255,.08)); }
.header-bottom .nav-dropdown > li > a::after{ content:none !important; }

/* Mobile */
@media (max-width: 849.98px){
  .header-main .logo img{ max-height:36px; }
  .header-bottom .nav > li > a{ padding:12px 14px; }
}
.nav-vertical > li > a{ font-weight:800; text-transform:uppercase; color:#efe8ff !important; }
.nav-vertical > li > a:hover{ color:#fff !important; background: linear-gradient(90deg, rgba(123,92,255,.18), rgba(123,92,255,.06)); border-radius:8px; }
/* ========== KILL NAV PILL (Flatsome) — keep our underline ========== */
/* Xoá mọi pseudo pill của Flatsome trên mục menu */
.header-bottom .nav > li::before,
.header-bottom .nav > li::after,
.header-bottom .nav > li > a::before,
.header-bottom .nav > li.active > a::before,
.header-bottom .nav > li.selected > a::before,
.header-bottom .nav > li:hover > a::before,
.header-bottom .nav > li.current-menu-item > a::before,
.header-bottom .nav > li.current_page_item > a::before,
.header-bottom .nav > li > a[aria-current="page"]::before,
.header-bottom .nav > li > a > span::before,
.header-bottom .nav > li > a > span::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Đảm bảo anchor không có nền/đổ bóng mặc định */
.header-bottom .nav > li,
.header-bottom .nav > li > a{
  background: transparent !important;
  box-shadow: none !important;
}

/* Giữ underline vàng tùy biến (đặt SAU đoạn “kill pill”) */
.header-bottom .nav > li > a{
  position: relative; z-index: 1;
}
.header-bottom .nav > li > a::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:6px;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg,#fff6be,#ffd95e,#ffc400,#ffd95e,#fff6be);
  box-shadow: 0 0 10px rgba(255,215,0,.45);
  transform: scaleX(0); transform-origin:center;
  transition: transform .22s ease-out;
  z-index: 0; /* nằm dưới chữ */
}
.header-bottom .nav > li > a:hover::after{ transform: scaleX(1); }
.header-bottom .nav > li.current-menu-item > a::after,
.header-bottom .nav > li.current_page_item > a::after{ transform: scaleX(1); height:3px; }


/* =========================
   789CLUB — BUTTONS (keep class names)
   Tone: Deep Purple + Gold
   ========================= */

/* Base cho tất cả nút Flatsome */
a.button, .button{
  --btn-r: 12px;
  --btn-py: 10px;
  --btn-px: 18px;

  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-r);
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1.1;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .28s ease, border-color .18s ease, color .18s ease;
  border: none !important;                 /* ghi đè rule cũ: border:1px solid #fff */
}

/* Kích cỡ nhanh (tuỳ dùng) */
.button.is-small{ --btn-py:8px; --btn-px:14px; font-size:12px; border-radius:10px; }
.button.is-large{ --btn-py:14px; --btn-px:26px; font-size:16px; border-radius:14px; }
/* CTA vàng (primary): giữ nguyên vì đang chuẩn */
a.button.primary, .button.primary{
  color:#2b0f3d !important;
  background: linear-gradient(180deg,#ffe68a 0%,#f7c948 58%,#efa72f 100%);
  border:2px solid rgba(255,215,0,.9) !important;
  box-shadow:0 6px 16px rgba(255,200,60,.35), inset 0 2px 6px rgba(255,255,255,.28);
}
a.button.primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(255,200,60,.45), inset 0 2px 10px rgba(255,255,255,.35);
}

/* SECONDARY — tím sáng hơn để không chìm */
a.button.secondary, .button.secondary{
  color:#f4f2ff !important;
  background: linear-gradient(180deg, #7c5cff 0%, #452a90 85%);
  border:2px solid rgba(200,160,255,.55) !important;
  box-shadow:
    0 0 14px rgba(123,92,255,.25),
    inset 0 0 8px rgba(255,255,255,.1);
}
a.button.secondary:hover{
  background: linear-gradient(180deg, #9b7aff 0%, #5833a8 85%);
  border-color: rgba(255,215,0,.5) !important;
  transform:translateY(-1px);
  box-shadow:
    0 0 18px rgba(150,120,255,.35),
    inset 0 0 10px rgba(255,255,255,.15);
}

/* SUCCESS — ánh tím + cyan nhẹ để tách nền */
a.button.success, .button.success{
  color:#fff !important;
  background: linear-gradient(145deg, #5f3bca 0%, #3a1c6d 60%, #251046 100%);
  border:2px solid rgba(140,100,255,.45) !important;
  box-shadow:
    0 6px 20px rgba(80,50,150,.5),
    inset 0 0 10px rgba(90,220,255,.15);
}
a.button.success:hover{
  background: linear-gradient(145deg, #7e57ff 0%, #4b2595 70%, #2a0c50 100%);
  box-shadow:
    0 10px 26px rgba(120,80,255,.55),
    inset 0 0 14px rgba(90,220,255,.25);
  transform:translateY(-1px);
}

/* ALERT — đỏ ruby vẫn nổi bật */
a.button.alert, .button.alert{
  color:#fff !important;
  background: linear-gradient(145deg, #a30000 10%, #ff1a1a 45%, #ff6347 100%);
  border:2.5px solid rgba(255,215,0,.8) !important;
  text-shadow:0 0 6px rgba(255,223,186,.7);
  box-shadow:
    0 6px 16px rgba(255,0,0,.4),
    inset 3px 3px 8px rgba(255,255,255,.2);
}
a.button.alert:hover{
  background: linear-gradient(145deg, #ff4500, #ff0000, #8b0000);
  border-color: rgba(255,223,0,.9) !important;
  text-shadow: 0 0 8px rgba(255,215,0,.9);
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 8px 20px rgba(255,69,0,.6);
}

/* ========== 789CLUB — Deep Purple Scrollbar (Luxury Theme) ========== */
:root{
  --sb-track: rgba(20, 10, 30, .5);       /* nền rãnh */
  --sb-track-edge: rgba(100, 70, 200, .15);
  --sb-thumb-1: #7b5cff;                  /* tím chủ đạo */
  --sb-thumb-2: #4e2c9b;                  /* tím than đậm */
  --sb-glow: rgba(140, 100, 255, .45);    /* phát sáng nhẹ */
}

/* Firefox */
body,
.j-scrollbox{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb-1) var(--sb-track);
}

/* WebKit (Chrome, Edge, Safari) — toàn trang */
::-webkit-scrollbar{
  width: 10px; height: 10px;
}
::-webkit-scrollbar-track{
  background: linear-gradient(180deg, var(--sb-track), rgba(10, 6, 20, .65));
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--sb-track-edge);
}
::-webkit-scrollbar-thumb{
  border-radius: 14px;
  background: linear-gradient(180deg, var(--sb-thumb-1), var(--sb-thumb-2));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 0 10px var(--sb-glow),
    0 0 18px var(--sb-glow);
}
::-webkit-scrollbar-thumb:hover{
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 0 14px var(--sb-glow),
    0 0 24px var(--sb-glow);
}
::-webkit-scrollbar-corner{ background: transparent; }

/* WebKit — cho vùng cuộn nội bộ (ví dụ .j-scrollbox) */
.j-scrollbox{
  overflow-x: hidden;
  max-height: 1000px;
}
.j-scrollbox::-webkit-scrollbar{ width: 8px; }
.j-scrollbox::-webkit-scrollbar-track{
  background: linear-gradient(180deg, var(--sb-track), transparent 85%);
  border-radius: 12px;
}
.j-scrollbox::-webkit-scrollbar-thumb{
  border-radius: 12px;
  background: linear-gradient(180deg, var(--sb-thumb-1), var(--sb-thumb-2));
  box-shadow: 0 0 6px var(--sb-glow);
}

/* Giảm hiệu ứng sáng nếu người dùng hạn chế chuyển động */
@media (prefers-reduced-motion: reduce){
  ::-webkit-scrollbar-thumb, .j-scrollbox::-webkit-scrollbar-thumb{
    box-shadow: none;
  }
}
/* ===== BASE ===== */
.game-card{
  position: relative;
  display: inline-block;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  cursor: pointer;
}
.game-card img{ display:block; width:100%; height:auto; }
.game-card:hover{ filter: brightness(1.03); }

/* ===== 1) Rung dọc nhẹ — thêm .gc-shakeY ===== */
.gc-shakeY:hover{
  animation: gc-shakeY .6s ease-in-out;
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(123,92,255,.35);
}
@keyframes gc-shakeY{
  0%,100%{ transform: translateY(0) rotate(0) scale(1.05); }
  15%{ transform: translateY(-2px) rotate(-1deg) scale(1.05); }
  30%{ transform: translateY(2px) rotate(1deg) scale(1.05); }
  45%{ transform: translateY(-1px) rotate(-1deg) scale(1.05); }
  60%{ transform: translateY(1px) rotate(1deg) scale(1.05); }
  75%{ transform: translateY(-1px) rotate(0) scale(1.05); }
}

/* ===== 2) Lắc quỹ đạo — thêm .gc-orbit (hover) ===== */
.gc-orbit:hover{
  animation: gc-orbit .8s ease-in-out;
  transform-origin: 50% 110%; /* điểm tựa phía dưới thẻ */
  box-shadow: 0 12px 28px rgba(140,100,255,.35);
}
@keyframes gc-orbit{
  0%{ transform: rotate(0) translateX(0) translateY(0); }
  25%{ transform: rotate(-3deg) translateX(-4px) translateY(-2px); }
  50%{ transform: rotate(3deg) translateX(4px) translateY(2px); }
  75%{ transform: rotate(-2deg) translateX(-3px) translateY(-1px); }
  100%{ transform: rotate(0) translateX(0) translateY(0); }
}

/* ===== 3) Lắc nghiêng 3D — thêm .gc-rock (hover) ===== */
.gc-rock{
  transform-style: preserve-3d;
}
.gc-rock:hover{
  animation: gc-rock .7s ease-in-out;
  box-shadow: 0 14px 30px rgba(20,0,60,.45);
}
@keyframes gc-rock{
  0%{ transform: perspective(700px) rotateX(0) rotateY(0) translateY(0); }
  25%{ transform: perspective(700px) rotateX(6deg) rotateY(-6deg) translateY(-2px); }
  50%{ transform: perspective(700px) rotateX(-5deg) rotateY(6deg) translateY(2px); }
  75%{ transform: perspective(700px) rotateX(4deg) rotateY(-4deg) translateY(-1px); }
  100%{ transform: perspective(700px) rotateX(0) rotateY(0) translateY(0); }
}

/* ===== 4) HOT — ánh sáng quét + pulse glow — thêm .gc-hot ===== */
/* Auto loop, không cần hover */
.gc-hot{
  box-shadow: 0 10px 26px rgba(255,180,60,.25), 0 0 0 1px rgba(255,215,0,.25) inset;
  animation: gc-hot-pulse 2.2s ease-in-out infinite;
}
.gc-hot::after{ /* vệt sáng quét */
  content:"";
  position:absolute;
  top:-20%; left:-60%;
  width:50%; height:140%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.25) 70%, transparent 100%);
  transform: skewX(-20deg);
  filter: blur(1px);
  animation: gc-hot-sweep 2.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes gc-hot-pulse{
  0%,100%{ box-shadow: 0 10px 26px rgba(255,180,60,.22), 0 0 0 1px rgba(255,215,0,.22) inset; }
  50%{    box-shadow: 0 16px 34px rgba(255,210,90,.38), 0 0 0 1px rgba(255,235,120,.35) inset; }
}
@keyframes gc-hot-sweep{
  0%{ left:-60%; opacity:.0; }
  10%{ opacity:.9; }
  50%{ left:120%; opacity:.6; }
  60%{ opacity:0; }
  100%{ left:120%; opacity:0; }
}

/* ===== Accessiblity: tắt hiệu ứng mạnh nếu người dùng hạn chế chuyển động ===== */
@media (prefers-reduced-motion: reduce){
  .gc-shakeY:hover, .gc-orbit:hover, .gc-rock:hover,
  .gc-hot, .gc-hot::after{ animation: none !important; }
}
/* ==========================================
   Scroll Hint — Pulse Up-Down (789Club)
   ========================================== */
.scroll-hint {
  display: inline-block;
  animation: scrollPulse 2.4s ease-in-out infinite;
  cursor: pointer;
  transition: transform .3s ease, filter .3s ease;
  will-change: transform;
}

/* Hiệu ứng rung nhịp lên xuống + mờ sáng nhẹ */
@keyframes scrollPulse {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-8px);
    filter: brightness(1.4);
  }
}

/* Khi hover thì tăng biên độ một chút cho hấp dẫn */
.scroll-hint:hover {
  animation: scrollPulseHover 1.8s ease-in-out infinite;
}
@keyframes scrollPulseHover {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-10px);
    filter: brightness(1.6);
  }
}
html{ scroll-behavior:smooth; }
#gioi_thieu_789club{ scroll-margin-top: 84px; } /* chỉnh 72–100px tuỳ header cao */

/* =======================================
   789CLUB BLOG / ARCHIVE — PURPLE THEME
   (giữ nguyên cấu trúc, đổi màu cho hợp giao diện)
======================================= */

/* ===== 1) ARCHIVE GRID / BLOG PAGE ===== */
.archive .page-title, .blog .page-title{
  letter-spacing:.6px;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
  margin-bottom:18px;
}
.archive .page-title:after, .blog .page-title:after{
  content:""; display:block; width:120px; margin:10px auto 0;
  background:linear-gradient(90deg,#ffe8ff,#ff8cf5,#ff4fdc,#ff8cf5,#ffe8ff);
  box-shadow:0 0 12px rgba(255,122,255,.35);
  border-radius:3px;
}

/* Card khung + nền tím */
.blog-archive .box-blog-post, 
.archive .box-blog-post, 
.search-results .box-blog-post{
  border-radius:16px; overflow:hidden; position:relative;
  box-shadow:
    0 6px 20px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,140,245,.16);
  background:radial-gradient(120% 130% at 50% 0,
              rgba(86,48,148,.95),
              rgba(18,10,46,.98));
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.blog-archive .box-blog-post:hover{
  transform:translateY(-4px);
  box-shadow:
    0 12px 32px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,140,245,.30);
}

/* Ảnh bài viết */
.box-blog-post .box-image{
  border-bottom:1px solid rgba(255,140,245,.18);
}
.box-blog-post .box-image img{
  border-radius:14px; margin:10px; width:calc(100% - 20px);
  box-shadow:0 6px 18px rgba(0,0,0,.65);
}
.box-blog-post:hover .box-image img{ 
  filter:brightness(1.06); 
}

/* Category pill */
.box-blog-post .badge{
  left:16px; top:16px; border-radius:999px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.55);
}
.box-blog-post .badge-inner{
  background:linear-gradient(180deg,#ffe8ff,#ff8cf5,#ff4fdc);
  font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:6px 10px;
  color:#320b3a !important;
}

/* Body card */
.box-blog-post .box-text{ padding:16px 18px 18px; }

/* Titles & excerpts — để inherit màu chữ của theme */
.box-blog-post .post-title{
  font-weight:900; font-size:18px;
  letter-spacing:.4px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.box-blog-post .from_the_blog_excerpt{
  font-size:14px; line-height:1.6; margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Meta + Read more */
.box-blog-post .is-divider{ display:none; }
.box-blog-post .post-meta{ font-size:12.5px; margin-top:8px; opacity:.9; }
.box-blog-post .button{ margin-top:12px; }

.box-blog-post .button.more-link{
  border-radius:12px; padding:9px 14px; font-weight:800; text-transform:uppercase;
  border:2px solid rgba(255,140,245,.85);
  background:transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 12px rgba(255,140,245,.25);
}
.box-blog-post .button.more-link:hover{
  background:linear-gradient(180deg,
              rgba(255,140,245,.18),
              rgba(132,75,255,.10));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(255,140,245,.40);
}

/* Pagination */
.nav-pagination > li > a, 
.nav-pagination > li > span{
  background:transparent;  border-radius:10px;
  border:2px solid rgba(132,75,255,.26);
  padding:8px 12px; font-weight:800;
}
.nav-pagination > li > a:hover{
  border-color:rgba(255,140,245,.40);
  box-shadow:0 0 14px rgba(255,140,245,.30);
}
.nav-pagination > li.active > span{
  border-color:rgba(255,140,245,.70);
  background:linear-gradient(180deg,
              rgba(255,140,245,.22),
              rgba(92,52,196,.60));
}

/* ===== 2) SINGLE POST ===== */
.single-post .entry-header{
  padding:14px 0 8px;
  border-bottom:1px solid rgba(132,75,255,.32);
}
.single-post .entry-title{
  letter-spacing:.6px;
  text-transform:uppercase; 
  line-height:1.15; margin-bottom:6px;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.single-post .entry-meta{ font-size:10px; opacity:.95; }

/* Featured image */
.single-post .entry-image{
  margin:16px 0 12px; border-radius:16px; overflow:hidden;
  box-shadow:
    0 8px 26px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(132,75,255,.35);
}

/* Typography — KHÔNG ép color để theo theme */
.single-post .entry-content{
  line-height:1.5;
}
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4{
  letter-spacing:.4px;
  margin:22px 0 10px; line-height:1.25;
}

/* Blockquote */
.single-post blockquote{
  position:relative; padding:16px 18px; margin:16px 0;
  background:rgba(22,12,52,.75);
  border:1px solid rgba(255,140,245,.40);
  border-left:4px solid #ff4fdc;
  border-radius:12px; 
  box-shadow:0 6px 18px rgba(0,0,0,.55) inset;
}

/* Tables */
.single-post table{
  width:100%; border-collapse:separate; border-spacing:0; margin:14px 0;
  background:rgba(18,10,46,.85);
  border:1px solid rgba(132,75,255,.30);
  border-radius:12px; overflow:hidden;
}
.single-post th, .single-post td{
  padding:10px 12px;
  color:#fff;
  border-bottom:1px solid rgba(132,75,255,.35);
}
.single-post thead th{
  background:linear-gradient(180deg,
              rgba(132,75,255,.55),
              rgba(65,32,140,.95)); 
  font-weight:800; text-transform:uppercase;
}

/* Code */
.single-post pre{
  background:#0e071f; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(132,75,255,.40); overflow:auto;
}

/* Tag list */
.single-post .entry-meta .cat-links a, 
.single-post .entry-meta .tags-links a,
.tagcloud a{
  display:inline-block; margin:6px 6px 0 0; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,140,245,.45); font-weight:700;
  background:rgba(26,10,64,.75);
}

/* Prev / Next */
.single-post .post-nav{
  border-top:1px solid rgba(132,75,255,.32);
  margin-top:20px; padding-top:16px;
}
.single-post .post-nav a{
  display:block; border-radius:12px; padding:12px; 
  border:1px solid rgba(132,75,255,.32);
  background:radial-gradient(120% 140% at 0 0,
              rgba(255,140,245,.12),
              rgba(18,10,46,.95));
}
.single-post .post-nav a:hover{
  border-color:rgba(255,140,245,.55);
  background:radial-gradient(120% 140% at 0 0,
              rgba(255,140,245,.22),
              rgba(18,10,46,.98));
}

/* ===== 3) SIDEBAR ===== */
.widget-area .widget{
  border-radius:14px; padding:14px; margin-bottom:16px;
  background:radial-gradient(120% 130% at 50% 0,
              rgba(86,48,148,.95),
              rgba(15,7,40,.98));
  border:1px solid rgba(132,75,255,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}
.widget-area .widget .widget-title{
  font-weight:900; text-transform:uppercase; 
  line-height:1.5;
  letter-spacing:.4px; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.widget-area .widget .widget-title:after{
  content:""; flex:1; height:2px;
  background:linear-gradient(90deg,#ffe8ff,#ff8cf5,#ff4fdc,#ff8cf5,#ffe8ff);
  box-shadow:0 0 8px rgba(255,140,245,.35); border-radius:2px;
}

/* LOẠI TOÀN BỘ DIVIDER MẶC ĐỊNH CỦA FLATSOME TRONG SIDEBAR */
.widget-area .widget .is-divider,
.widget-area .widget .is-divider.small,
.widget-area .widget .is-divider-w,
.widget-area .widget .is-divider-x,
.widget-area .widget .widget-title + .is-divider,
.widget-area .widget .title + .is-divider {
    display:none !important;
}
.widget-area .widget .widget-title:before {
    content:none !important;
    display:none !important;
}
.widget-area .widget .title-wrapper:after,
.widget-area .widget .section-title:after {
    display:none !important;
    content:none !important;
}

/* ===== 4) TOC ===== */
.toc-box{
  position:sticky; top:90px; z-index:1;
  border-radius:14px; padding:12px; margin:12px 0;
  background:rgba(18,10,46,.78);
  border:1px solid rgba(255,140,245,.40);
  box-shadow:0 4px 16px rgba(0,0,0,.55);
}
.toc-box .toc-title{
  font-weight:900; text-transform:uppercase;
}
.toc-box a{
  display:block; padding:6px 10px; border-radius:10px; font-weight:700;
}
.toc-box a:hover{
  background:rgba(255,140,245,.18);
}

/* Spacing */
.blog .large-9 .row-small>.col, 
.archive .large-9 .row-small>.col{ 
  padding-bottom:22px; 
}