/* =====================================================================
   TAMLINHAZ — THEME "HUYỀN BÍ TÍM" (Mystic Violet)  v2
   Nạp SAU style.css để đè cascade toàn site. Chỉ CSS, không đụng logic PHP.
   Gỡ = xoá dòng <link huyenhoc.css> trong head(). Font: Playfair Display + Lora
   (đủ dấu tiếng Việt). Tông chủ đạo: tím thạch anh + vàng kim điểm nhấn.
   ===================================================================== */

:root{
  --hh-bg:          #0e0a1d;   /* nền ngân hà tím-đen sâu               */
  --hh-bg-2:        #150f2c;
  --hh-panel:       #1b1440;   /* nền hộp                                */
  --hh-panel-2:     #271a55;   /* nền hộp sáng hơn                       */
  --hh-violet:      #8b5cf6;   /* TÍM chủ đạo                            */
  --hh-violet-br:   #c4a7ff;   /* tím sáng (hover / glow)               */
  --hh-amethyst:    #a855f7;   /* thạch anh tím                          */
  --hh-magenta:     #d946b6;   /* hồng tím nhấn phụ                      */
  --hh-gold:        #d8b863;   /* vàng kim — điểm nhấn                   */
  --hh-gold-br:     #f3dd9a;
  --hh-ink:         #ece8fb;   /* chữ chính: trắng oải hương             */
  --hh-ink-soft:    #a99fce;   /* chữ phụ                                */
  --hh-line:        #3a2c70;   /* viền tím                               */
  --hh-line-soft:   rgba(196,167,255,.18);
  --hh-display:     "Playfair Display",Georgia,"Times New Roman",serif;
  --hh-serif:       "Lora",Georgia,"Times New Roman",serif;
  --hh-radius:      14px;
  --hh-glow:        0 0 24px rgba(139,92,246,.35);
}

/* ---------- NỀN NGÂN HÀ + SAO ---------- */
html{background:var(--hh-bg);}
body{
  background:
    radial-gradient(1.5px 1.5px at 18% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(196,167,255,.7), transparent),
    radial-gradient(1px 1px at 42% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 86% 62%, rgba(243,221,154,.6), transparent),
    radial-gradient(1px 1px at 30% 85%, rgba(196,167,255,.5), transparent),
    radial-gradient(circle at 50% -8%, #3a2170 0%, rgba(58,33,112,0) 45%),
    radial-gradient(circle at 90% 12%, rgba(168,85,247,.22) 0%, transparent 38%),
    linear-gradient(180deg,#140e2b 0%, var(--hh-bg) 60%) fixed,
    var(--hh-bg) !important;
  color:var(--hh-ink) !important;
  font-family:var(--hh-serif) !important;
  font-size:16.5px !important;
  line-height:1.7 !important;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* container dễ đọc trên màn rộng */
body > main{
  background:transparent !important;
  padding:8px 12px 40px !important;
}
.dreamy_body,.box{background:linear-gradient(180deg,var(--hh-bg-2),var(--hh-bg)) !important;}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,.dreamy_head,.dreamy_title,.update{
  font-family:var(--hh-display) !important;
  font-weight:700 !important;
  letter-spacing:.3px;
  color:var(--hh-violet-br) !important;
  text-shadow:0 0 16px rgba(139,92,246,.45),0 1px 0 #000 !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
  animation:none !important;
  line-height:1.3 !important;
}
.update{font-weight:700 !important;}
p{margin:.6em 0;}

a{color:var(--hh-violet-br) !important;text-decoration:none;
  transition:color .25s,text-shadow .25s;}
a:hover{color:#fff !important;text-shadow:0 0 10px rgba(196,167,255,.9);}

hr{border:0;height:1px;margin:14px 0;
  background:linear-gradient(90deg,transparent,var(--hh-violet),var(--hh-gold),transparent) !important;}

/* ---------- THANH MENU (table cũ → trông như nav hiện đại) ---------- */
tr.menu td, tr.menu1 td, tr.menu td#selected, tr.menu1 td#selected{
  background:linear-gradient(180deg,var(--hh-panel-2),var(--hh-panel)) !important;
  border:0 !important;
  border-right:1px solid var(--hh-line-soft) !important;
  padding:0 !important;
}
tr.menu td a, tr.menu1 td a{
  display:block !important;
  padding:11px 4px !important;
  color:var(--hh-ink) !important;
  font-family:var(--hh-display) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.3px;
  transition:background .2s,color .2s,box-shadow .2s;
}
tr.menu td a:hover, tr.menu1 td a:hover{
  color:#fff !important;text-decoration:none !important;
  background:linear-gradient(180deg,var(--hh-amethyst),var(--hh-violet)) !important;
  box-shadow:inset 0 -2px 0 var(--hh-gold), var(--hh-glow);
}
tr.menu td#selected a{
  color:var(--hh-gold-br) !important;
  box-shadow:inset 0 -2px 0 var(--hh-gold);
}

/* ---------- THẺ "dreamy" (card) ---------- */
.dreamy_box{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(180deg,var(--hh-panel),var(--hh-bg-2)) !important;
  border:1px solid var(--hh-line) !important;
  border-radius:var(--hh-radius) !important;
  box-shadow:0 0 0 1px var(--hh-line-soft) inset,
             0 14px 50px rgba(0,0,0,.6),
             var(--hh-glow) !important;
  color:var(--hh-ink) !important;
  margin:16px auto !important;
  overflow:hidden;
}
.dreamy_head{
  background:linear-gradient(180deg,var(--hh-panel-2),var(--hh-panel)) !important;
  border-top:1px solid var(--hh-violet) !important;
  border-bottom:1px solid var(--hh-line) !important;
  padding:12px 14px !important;
}
.dreamy_title{
  position:relative;
  background:linear-gradient(180deg,var(--hh-panel-2),var(--hh-panel)) !important;
  color:var(--hh-gold-br) !important;
  border-left:3px solid var(--hh-gold) !important;
  padding:12px 16px !important;
  font-size:18px !important;
}
.dreamy_title a{color:var(--hh-ink) !important;}
.dreamy_title a:hover{color:#fff !important;}
.dreamy_list{
  background:rgba(39,26,85,.5) !important;
  border:1px dashed var(--hh-violet) !important;
  border-radius:10px;
  padding:10px 12px !important;
  margin:10px auto !important;
  color:var(--hh-ink) !important;
}
.dreamy_foot{
  background:linear-gradient(180deg,var(--hh-panel),var(--hh-bg)) !important;
  color:var(--hh-ink-soft) !important;padding:10px 14px !important;}
.dreamy_foot a{color:var(--hh-gold) !important;}

/* ---------- GMENU / NEWS / QUOTE ---------- */
.gmenu{
  background:linear-gradient(180deg,var(--hh-panel-2),var(--hh-panel)) !important;
  border:1px solid var(--hh-line) !important;
  border-left:3px solid var(--hh-magenta) !important;
  color:var(--hh-ink) !important;border-radius:10px;padding:10px 14px !important;}
.news{
  background:rgba(39,26,85,.55) !important;
  border:1px dashed var(--hh-gold) !important;
  color:var(--hh-ink) !important;border-radius:10px;padding:12px 14px !important;}
.quote{
  background:rgba(27,20,64,.7) !important;
  border:1px solid var(--hh-line) !important;
  color:var(--hh-ink-soft) !important;border-radius:10px;padding:10px 12px !important;}

/* ---------- NÚT ---------- */
input[type="submit"], button, .btn, #nut, a#nut{
  display:inline-block;
  background:linear-gradient(180deg,var(--hh-amethyst),var(--hh-violet)) !important;
  color:#fff !important;
  border:1px solid var(--hh-violet-br) !important;
  border-radius:12px !important;
  padding:9px 22px !important;
  margin:6px 4px !important;
  font-family:var(--hh-display) !important;
  font-weight:600 !important;font-size:15px !important;letter-spacing:.4px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 6px 18px rgba(139,92,246,.4),inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;transition:.22s;
}
input[type="submit"]:hover, button:hover, .btn:hover, #nut:hover, a#nut:hover{
  background:linear-gradient(180deg,var(--hh-magenta),var(--hh-amethyst)) !important;
  color:#fff !important;transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(217,70,182,.5),inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ---------- FORM ---------- */
input[type="text"],input[type="password"],input[type="email"],
input[type="number"],input[type="search"],textarea,select{
  background:#150f30 !important;
  color:var(--hh-ink) !important;
  border:1px solid var(--hh-line) !important;
  border-radius:10px !important;
  padding:9px 12px !important;
  font-family:var(--hh-serif) !important;font-size:15px !important;
}
input::placeholder,textarea::placeholder{color:#7d72a6 !important;}
input:focus,textarea:focus,select:focus{
  outline:none !important;border-color:var(--hh-violet-br) !important;
  box-shadow:0 0 0 3px rgba(139,92,246,.25) !important;}

/* ---------- FORUM / POST ---------- */
td.current-top{background:var(--hh-panel) !important;border:1px solid var(--hh-line) !important;border-radius:10px;}
td.current-post{background:#150f30 !important;border:1px solid #271a55 !important;border-radius:8px;}
td.current-blog{background:rgba(27,20,64,.85) !important;color:var(--hh-ink) !important;
  border:1px solid var(--hh-line) !important;border-radius:10px;}
.post_list,.post_text,.post_baiviet{background:transparent !important;color:var(--hh-ink) !important;}
.post_menu,.post_menu_comment{background:rgba(39,26,85,.45) !important;
  border-top:1px solid var(--hh-line) !important;border-radius:8px;}
.homeforum,.homeforum a{color:var(--hh-gold) !important;background:transparent !important;}

/* phân trang */
a.pagenav{background:var(--hh-panel) !important;color:var(--hh-violet-br) !important;
  border:1px solid var(--hh-line) !important;border-radius:8px;}
a.pagenav:hover,.currentpage{background:var(--hh-violet) !important;color:#fff !important;
  border-color:var(--hh-violet-br) !important;}

/* ---------- HEADER / FOOTER (Tailwind tối sẵn) ---------- */
header a, header p{color:var(--hh-ink) !important;font-family:var(--hh-display) !important;}
.hero-subtitle-text, header .text-white{color:var(--hh-violet-br) !important;}
footer, footer p, footer li a{color:var(--hh-ink-soft) !important;}
footer h5,.text-white{color:var(--hh-gold-br) !important;}
.footer-divider-gradient{background:linear-gradient(90deg,transparent,var(--hh-violet),var(--hh-gold),transparent) !important;}

/* ---------- ẢNH / LÁ BÀI ---------- */
img{border-radius:8px;}
.dreamy_box img,.card img,img[src*="tarot"],img[src*="bai"]{
  box-shadow:0 0 22px rgba(139,92,246,.4);border-radius:10px;}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--hh-bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--hh-violet),var(--hh-amethyst));border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--hh-magenta);}

/* ---------- CTA PHỄU HỌC ---------- */
.hh-cta{
  position:relative;display:block;margin:18px auto;max-width:600px;text-align:center;
  padding:20px 18px;border-radius:18px;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(168,85,247,.28), transparent 60%),
    linear-gradient(180deg,var(--hh-panel-2),var(--hh-panel));
  border:1px solid var(--hh-violet);
  box-shadow:0 0 36px rgba(139,92,246,.35),inset 0 0 0 1px var(--hh-line-soft);
}
.hh-cta .hh-tag{display:block;color:var(--hh-gold-br);font-size:14px;
  font-family:var(--hh-display);letter-spacing:.4px;margin-bottom:14px;}
.hh-cta a.hh-primary{
  display:inline-block;margin:5px 6px;padding:13px 28px;border-radius:14px;
  font-family:var(--hh-display);font-weight:700;font-size:16px;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--hh-gold-br),var(--hh-gold));
  color:#241046 !important;text-shadow:none;
  box-shadow:0 8px 22px rgba(216,184,99,.5);transition:.22s;
}
.hh-cta a.hh-primary:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 30px rgba(243,221,154,.6);color:#1a0c33 !important;}
.hh-cta a.hh-ghost{
  display:inline-block;margin:5px 6px;padding:12px 24px;border-radius:14px;
  font-family:var(--hh-display);font-weight:600;
  border:1px solid var(--hh-violet-br);color:var(--hh-violet-br) !important;
  transition:.22s;
}
.hh-cta a.hh-ghost:hover{background:rgba(139,92,246,.2);color:#fff !important;
  box-shadow:var(--hh-glow);}