
/* Giao diện hoàn chỉnh - nền trang chủ + khung tối + banner trang con */
body.home-page{
  background:url('../img/hero-banner.jpg') center top / cover fixed no-repeat;
}
.home-page main,.home-page .section,.home-page .section-soft{background:transparent!important}
.home-page .hero:before{background-image:url('../img/hero-banner.jpg')!important}
.home-page .intro-grid,.home-page .card,.home-page .feature-card,.home-page .quick-panel,.home-page .guide-wrap{
  background:rgba(12,10,14,.78)!important;
  border:1px solid rgba(230,180,120,.30)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  color:#f3e7dc;
}
.home-page .topbar{
  background:rgba(12,10,14,.86)!important;
  border-bottom:1px solid rgba(230,180,120,.25)!important;
}
.home-page .main-nav a{color:#f3e7dc!important}
.home-page .main-nav a:hover,.home-page .main-nav a.active{color:#ffcc98!important}
.home-page .section-heading h1,.home-page .section-heading h2,.home-page .news-copy h3,.home-page .mini-news b,.home-page .feature-card h3,.home-page .guide-copy b{color:#fff1e6!important}
.home-page .section-heading p,.home-page .news-copy p,.home-page .mini-news small,.home-page .feature-card p,.home-page .guide-copy li span{color:#cfbeb5!important}
.home-page .intro-grid b{color:#f0c98e!important}.home-page .intro-grid span{color:#d8c7bb!important}
.home-page .quick-inner>a{color:#f5e7dc!important;border-bottom-color:rgba(230,180,120,.18)!important}
.home-page .feature-card .icon,.home-page .quick-inner>a span{background:linear-gradient(135deg,#a51746,#d23b70)!important}
.home-page .download-section{background:linear-gradient(135deg,rgba(60,12,28,.92),rgba(105,20,50,.86))!important}

.page-hero{
  position:relative;
  overflow:hidden;
  background:#25151b!important;
  color:white;
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--page-banner);
  background-position:center;
  background-size:cover;
  opacity:.72;
}
.page-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(12,8,10,.75),rgba(12,8,10,.25));
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff!important;text-shadow:0 3px 15px rgba(0,0,0,.65)}
.page-hero .breadcrumbs,.page-hero .breadcrumbs a{color:#f1d8c8!important}


/* =========================================================
   V2 - NỀN RIÊNG CHO TOÀN BỘ TRANG
   ========================================================= */
body.page-themed{
  background-color:#150e12!important;
  background-image:
    linear-gradient(rgba(16,10,14,.34),rgba(16,10,14,.52)),
    var(--page-background)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
  color:#f7eee8;
}

body.page-themed .topbar{
  background:rgba(14,10,13,.88)!important;
  border-bottom:1px solid rgba(224,174,111,.25)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.page-themed .main-nav a{color:#f7eee8!important}
body.page-themed .main-nav a:hover,
body.page-themed .main-nav a.active{color:#ffd09a!important}

body.page-themed .page-hero{
  min-height:300px;
  display:flex;
  align-items:center;
  background:#171015!important;
  border-bottom:1px solid rgba(224,174,111,.22)!important;
}

body.page-themed .page-hero:before{
  opacity:1!important;
  background-image:var(--page-banner)!important;
  background-size:cover!important;
  background-position:center!important;
}

body.page-themed .page-hero:after{
  background:linear-gradient(90deg,rgba(10,7,9,.72),rgba(10,7,9,.18) 65%,rgba(10,7,9,.42))!important;
}

body.page-themed .section,
body.page-themed .page-content-section{
  background:rgba(11,8,10,.42)!important;
}

body.page-themed .section-heading h1,
body.page-themed .section-heading h2,
body.page-themed h1,
body.page-themed h2,
body.page-themed h3{
  color:#fff1e6!important;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

body.page-themed .section-heading>span{color:#ff5f91!important}
body.page-themed .section-heading p,
body.page-themed .article-meta,
body.page-themed p,
body.page-themed small{color:#d9c8be!important}

body.page-themed .card,
body.page-themed .form-shell,
body.page-themed .prose,
body.page-themed .wheel-panel,
body.page-themed .stat-card,
body.page-themed .sidebar-box{
  background:rgba(16,12,15,.82)!important;
  border:1px solid rgba(224,174,111,.26)!important;
  color:#f7eee8!important;
  box-shadow:0 18px 50px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

body.page-themed .field label{color:#f7eee8!important}
body.page-themed .field input,
body.page-themed .field select,
body.page-themed .field textarea{
  background:rgba(255,255,255,.92)!important;
  color:#301a25!important;
}

body.page-themed .sidebar-box a{
  color:#f7eee8!important;
  border-bottom-color:rgba(224,174,111,.18)!important;
}

body.page-themed .article-card{
  grid-template-columns:220px minmax(0,1fr)!important;
  overflow:hidden;
}

body.page-themed .article-thumb{
  min-height:160px!important;
  border-radius:14px!important;
}

body.page-themed .article-card p{color:#cfbeb5!important}
body.page-themed .read-more{color:#ff6595!important}

body.page-themed .auth-note,
body.page-themed .auth-note a{color:#f2d3bf!important}

body.page-themed .notice-box{
  background:rgba(72,36,52,.75)!important;
  border-color:rgba(224,174,111,.25)!important;
  color:#f7eee8!important;
}

body.page-themed .empty{
  background:rgba(16,12,15,.78);
  border-color:rgba(224,174,111,.28);
  color:#eee0d7;
}

body.page-themed .site-footer{
  background:rgba(18,10,14,.94)!important;
}

/* Trang chi tiết: ảnh bài được dùng làm nền, card đọc bài nổi rõ */
body.page-themed .article-cover{
  box-shadow:0 12px 35px rgba(0,0,0,.35);
}

/* Mobile */
@media(max-width:820px){
  body.page-themed{
    background-attachment:scroll!important;
  }
  body.page-themed .article-card{
    grid-template-columns:130px minmax(0,1fr)!important;
  }
}
@media(max-width:540px){
  body.page-themed .article-card{
    grid-template-columns:1fr!important;
  }
  body.page-themed .article-thumb{
    min-height:210px!important;
  }
}

.home-page .hero:before{
  background-image:var(--hero-admin,url('../img/hero-banner.jpg'))!important;
}
