:root{
  --accent:#D64545;
  --bg:#f6f7f9;
  --text:#1f2933;
  --muted:#6b7280;
  --container:1100px;
  --radius:12px;
  --gap:1.25rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem;
}

/* Header */
.site-header{
  background:#fff;
  border-bottom:1px solid #e6e9ee;
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
}
.brand .logo{
  font-weight:700;
  font-size:1.25rem;
  color:var(--text);
  text-decoration:none;
}
.brand .logo span{color:var(--accent)}

.main-nav{
  display:flex;
  gap:1rem;
  margin-left:1rem;
}
.main-nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  padding:0.35rem 0.45rem;
  border-radius:8px;
}
.main-nav a:hover{color:var(--text); background:#f2f4f7}

.search-wrap{margin-left:auto}
.search-wrap input{
  padding:0.45rem 0.6rem;
  border-radius:999px;
  border:1px solid #e3e6ea;
  width:220px;
}

/* mobile menu toggle */
.menu-toggle{
  display:none;
  background:transparent;border:0;font-size:1.25rem;
  margin-left:0.5rem;
}

/* Hero */
.hero{margin-top:1rem}
.hero-article{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(12,16,20,0.04);
}
.hero-article img{width:100%; height:320px; object-fit:cover}
.hero-content{padding:1.25rem}
.kicker{
  display:inline-block;
  background:rgba(214,69,69,0.1);
  color:var(--accent);
  padding:0.25rem 0.5rem;
  border-radius:999px;
  font-weight:700;
  font-size:0.85rem;
}
.hero-content h1{margin:0.6rem 0; font-size:1.5rem}
.hero-content h1 a{text-decoration:none; color:var(--text)}
.hero-content .meta{color:var(--muted); font-size:0.9rem}
.hero-content .excerpt{color:#374151; margin-top:0.5rem}

/* Layout: feed + sidebar */
.layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:var(--gap);
  margin-top:1.25rem;
}
.feed{min-width:0}
.sidebar .widget{background:#fff; padding:1rem; border-radius:12px; margin-bottom:1rem; box-shadow:0 6px 14px rgba(12,16,20,0.03)}
.widget h4{margin:0 0 0.6rem 0}

/* Grid of cards */
.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1rem;
}
.card{background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 14px rgba(12,16,20,0.03)}
.card img{width:100%; height:180px; object-fit:cover}
.card-body{padding:0.9rem}
.card .kicker{font-size:0.78rem}
.card h3{margin:0.5rem 0; font-size:1.05rem}
.card h3 a{text-decoration:none; color:var(--text)}
.card .meta{color:var(--muted); font-size:0.85rem}
.card .excerpt{margin-top:0.4rem; color:#374151; font-size:0.95rem}

/* load more */
.load-more{display:flex; justify-content:center; margin:1.25rem 0}
.load-more-a{color: white;}
.load-more button{
  padding:0.6rem 1.1rem; border-radius:10px; border:0;
  background:#7AB730; color:#fff; cursor:pointer; font-weight:700;
}


/* Small screens */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .sidebar{order:2}
  .menu-toggle{display:block}
  .main-nav{display:none}
  .main-nav.open{display:flex; position:absolute; left:0; right:0; top:64px; background:#fff; padding:1rem; flex-direction:column; gap:0.25rem; box-shadow:0 8px 20px rgba(12,16,20,0.08)}
  
}

/* Print styles: ẩn phần không cần in */
@media print{
  body{background:#fff; color:#000}
  .site-header, .menu-toggle, .main-nav, .search-wrap, .load-more, .sidebar, .site-footer{display:none}
  .hero-article img, .card img{max-height:180px; object-fit:cover}
  .container{width:100%; padding:0}
}
 
/*New */
body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
 
}

/* Danh sách tin */
.news-item {
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.news-item:hover {
  background: #e8f2ff;
}
/*new */

/* Hiệu ứng dropdown trượt xuống */
.dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.3s ease;
} 

.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Canh đẹp */
.dropdown-menu {
    border-radius: 8px;
    padding: 10px 0;
}
/* Dropdown mở mượt hơn */
.dropdown-menu {
    margin-top: 0;
    animation: dropDown 0.2s ease;
}

@keyframes dropDown {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}