/* ============================================================
   Hệ thiết kế NRO — nâu / cam / đỏ, khung 1000px + sidebar 300px
   ============================================================ */

:root{
  --brown:#663300;         /* header, footer, chữ chính, tab đang chọn */
  --brown-2:#331a00;       /* màu chữ body */
  --orange:#ff9933;        /* nền trang, nav đang chọn */
  --red:#ff4d4d;           /* nút chính, badge ghim, tiêu đề bài ghim */
  --card:#ffcc99;          /* nền thẻ */
  --card-bd:#e67e22;       /* viền thẻ */
  --dark-orange:#ff6600;   /* dải header thẻ đăng nhập, nút Java */
  --white:#fff;
  --muted:#8a8f98;
  --wrap:1000px;
  --side:300px;
  --r:4px;
  --sh-sm:0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#060412 !important;
  color:#f3f4f6 !important;
  font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;border:0}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px;width:100%}

/* ---------------- Hiệu ứng chữ & Banner ---------------- */
.shine-text {
  background: linear-gradient(90deg, #ff9900 0%, #ffcc33 25%, #ffffff 50%, #ffcc33 75%, #ff9900 100%) !important;
  background-size: 300% auto !important;
  color: #ffcc33 !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 15px rgba(255, 204, 51, 0.7), 0 0 25px rgba(255, 153, 0, 0.5) !important;
  animation: shineTextAnim 2.5s linear infinite !important;
  display: inline-block;
}
@keyframes shineTextAnim {
  0% { background-position: 300% center; }
  100% { background-position: 0% center; }
}

.banner-container {
  position: relative;
  width: 100%;
  max-height: 340px;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgba(255, 204, 51, 0.5);
  background: #080614;
}
.banner-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------------- Header ---------------- */
.site-head{
  position:sticky;
  top:0;
  z-index:50;
  background:#110c2e !important;
  border-bottom:2px solid rgba(255, 204, 51, 0.4) !important;
  box-shadow:var(--sh-md);
}
.site-head .bar{
  max-width:var(--wrap);
  margin:0 auto;
  display:flex;
  align-items:center;
  height:60px;
  padding:0 16px;
  gap:16px;
  width:100%;
}

.site-head .logo{
  margin-right:0;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.site-head .logo img{
  height:40px;
  object-fit:contain;
  display:block;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  flex:1;
  min-width:0;
}
.site-nav a{
  padding:8px 12px;
  border-radius:var(--r);
  transition:background-color .15s;
  flex-shrink:0;
}
.site-nav a:hover{background:rgba(255,204,51,0.15)}

.head-acct{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.head-acct a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  padding:6px 12px;
  border:1px solid rgba(255,204,51,0.35);
  border-radius:var(--r);
  white-space:nowrap;
}
.head-acct a:hover{background:rgba(255,204,51,0.15)}
.head-acct img{
  width:20px;
  height:20px;
  border-radius:var(--r);
  object-fit:cover;
  background:#fff;
}

/* ---------------- Bố cục & Thẻ chung ---------------- */
main{flex:1}
.grid-main{display:grid;grid-template-columns:1fr var(--side);gap:24px}

.card, .post{
  background: rgba(18, 14, 43, 0.9) !important;
  border: 1px solid rgba(255, 204, 51, 0.25) !important;
  border-radius: 12px !important;
  box-shadow:var(--sh-sm);
}
.card:hover, .post:hover{border-color: #ffcc33 !important}
.card.p{padding:16px}
.post.pinned{
  border-left: 4px solid #ffcc33 !important;
  background: rgba(35, 24, 61, 0.95) !important;
}

/* ---------------- Responsive Mobile (Đã sửa đóng ngoặc đầy đủ) ---------------- */
@media (max-width: 860px) {
  .grid-main{grid-template-columns:1fr}
  
  .site-head .bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 8px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  
  .site-head .logo {
    margin-right: 0 !important;
    flex-shrink: 0;
  }
  
  .site-head .logo img {
    height: 32px !important;
  }
  
  .site-nav {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 4px !important;
    padding: 2px 0 !important;
  }
  .site-nav::-webkit-scrollbar {
    display: none !important;
  }
  .site-nav a {
    font-size: 10px !important;
    padding: 4px 6px !important;
    flex-shrink: 0 !important;
  }
  
  .head-acct {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  .head-acct a {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
} /* <--- Dấu đóng ngoặc quan trọng đã được thêm lại đầy đủ ở đây */

@media (min-width:861px){
  .site-foot .in{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ---------------- Footer ---------------- */
.site-foot{
  background:#110c2e;
  border-top:1px solid rgba(255,204,51,0.3);
  padding:32px 0;
  color:#fff;
}
.site-foot .in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.site-foot .muted{font-size:12px;opacity:.7;line-height:1.6}
.site-foot .links{display:flex;gap:16px;font-size:12px;flex-wrap:wrap;justify-content:center}
.site-foot .links a:hover{color:var(--orange)}