/* ═══ ForgeX Blog — nang cap typography & hieu ung ═══
   Nap SAU khoi <style> noi bo de ghi de. Dung chung cho blog.html + blog/*.html */

/* ── TIEU DE BAI: glow vang + thanh gradient ── */
h1{
  text-shadow:0 0 34px rgba(212,168,71,.18),0 2px 6px rgba(0,0,0,.55);
}
h1::after{
  content:"";display:block;width:88px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-warm),#f5d47a 55%,var(--accent-cyber));
  margin-top:.7rem;box-shadow:0 0 16px rgba(212,168,71,.45);
}

/* ── H2 TRONG BAI: gach chan gradient + so thu tu phat sang ── */
.prose h2{position:relative;padding-bottom:.15rem;}
.prose h2::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-warm),var(--accent-cyber));
  margin-top:.5rem;opacity:.85;box-shadow:0 0 10px rgba(212,168,71,.35);
}
.prose h2 .num{
  text-shadow:0 0 14px rgba(212,168,71,.55);
}

/* ── CHU NHAN MANH: hieu ung but da quang vang ── */
.prose strong{
  color:#fdf2d0;
  background:linear-gradient(180deg,transparent 64%,rgba(212,168,71,.26) 64%);
  padding:0 .12em;border-radius:3px;
}
.pros strong,.cons strong,.warn-box strong{background:none;padding:0;color:inherit;}
.prose em{color:#9fdcef;}

/* ── LINK trong bai: muot hon ── */
.prose a{transition:color .2s,border-color .2s,text-shadow .2s;}
.prose a:hover{color:#7ce4ff;border-bottom-style:solid;text-shadow:0 0 12px rgba(0,212,255,.4);}

/* ── DO BONG CAC O: 3 lop tu nhat den dam ── */
.err,.faq,.verdict,.cta-box,.hl-box,.warn-box,.mistakes,.pick-card,.mk,
.duo-card,.flow-card,.gift-img,.cover,.ad-card,.ad-banner,.card,.fit-card,.tip-box{
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.34),
    0 18px 44px rgba(0,0,0,.38);
}
/* Bong mau theo tong chu cua tung loai o */
.cta-box,.verdict{
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.32),
    0 16px 42px rgba(212,168,71,.14);
}
.warn-box,.hl-box{
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.32),
    0 16px 40px rgba(248,113,113,.12);
}
.pros,.tip-box{
  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    0 8px 22px rgba(74,222,128,.1);
}
.cons{
  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    0 8px 22px rgba(248,113,113,.1);
}
.ad-banner{
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.32),
    0 14px 38px rgba(0,212,255,.14);
}

/* ── HOVER: o kho nang nhe len, bong dam hon ── */
.err,.faq,.mk,.pick-card,.duo-card,.fit-card{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;}
.err:hover,.faq:hover,.mk:hover,.pick-card:hover,.duo-card:hover,.fit-card:hover{
  transform:translateY(-3px);
  border-color:rgba(212,168,71,.3);
  box-shadow:
    0 2px 4px rgba(0,0,0,.3),
    0 10px 26px rgba(0,0,0,.4),
    0 26px 60px rgba(212,168,71,.12);
}

/* ── BANG: header gradient + hover dong ── */
th{background:linear-gradient(135deg,#1f1f23,#18181b)!important;}
.tbl-wrap{border-radius:12px;}
.tbl-wrap table{overflow:hidden;}
tbody tr{transition:background .15s;}
tr:hover td{background:rgba(212,168,71,.045);}

/* ── ANH BIA: khung sang + zoom nhe khi hover ── */
.cover{border-color:rgba(212,168,71,.18);}
.cover img{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.cover:hover img{transform:scale(1.015);}

/* ── CHIP: sang len khi hover ── */
.chip{transition:box-shadow .2s,transform .2s;}
.chip:hover{box-shadow:0 0 14px rgba(0,212,255,.25);transform:translateY(-1px);}
.chip.gold:hover{box-shadow:0 0 14px rgba(212,168,71,.3);}

/* ── NUT CTA: glow + day nhe ── */
.btn-gold{transition:transform .2s,box-shadow .2s,filter .2s;box-shadow:0 4px 14px rgba(212,168,71,.25);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(212,168,71,.4);}

/* ── THE MUC LUC (blog.html): tag gradient + bong sau ── */
.card{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;}
.card:hover{
  box-shadow:
    0 2px 4px rgba(0,0,0,.3),
    0 14px 34px rgba(0,0,0,.45),
    0 30px 70px rgba(212,168,71,.12);
}
.card-tag{
  background:linear-gradient(90deg,var(--accent-cyber),#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:600;
}
.card-read{transition:letter-spacing .2s,text-shadow .2s;}
.card:hover .card-read{letter-spacing:.03em;text-shadow:0 0 12px rgba(212,168,71,.5);}

/* ── HIEU UNG HIEN DAN KHI CUON (JS them class .rv) ── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);}
.rv.rv-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .cover img,.card,.err,.faq{transition:none;}
}