/* style.css
   Font: Times New Roman
   Palette: lấy cảm hứng từ rubikvanchuong.edu.vn (tông hồng / be)
*/

:root{
  --nav-bg: #3a2733;        /* dark plum for topbar text (contrast) */
  --accent: #c93a5a;        /* pink/magenta accent like mẫu */
  --banner-from: #fdeef0;   /* light pink */
  --banner-to: #fff8f7;     /* cream */
  --muted: #7a6b6a;
  --text: #2b2b2b;
  --card-bg: rgba(255,255,255,0.85);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Times New Roman", Times, serif;
  color:var(--text);
  background: linear-gradient(180deg,#fbf7f6 0%, #f3efed 100%);
  -webkit-font-smoothing:antialiased;
}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background: linear-gradient(90deg, rgba(58,39,51,0.95), rgba(58,39,51,0.95));
  color:white;
}
.brand{
  color:white;
  font-weight:700;
  text-decoration:none;
  font-size:20px;
  letter-spacing:0.6px;
}

/* Search */
.search-box{
  display:flex;
  gap:8px;
  align-items:center;
}
.search-box input{
  padding:6px 10px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.08);
  min-width:200px;
}
.search-box button{
  padding:6px 10px;
  border-radius:6px;
  border:none;
  background:var(--accent);
  color:white;
  cursor:pointer;
  font-weight:700;
}
.search-box button:hover{ opacity:0.95; transform:translateY(-1px); transition:all .12s; }

/* Navigation */
.main-nav{
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.main-nav ul{
  list-style:none;
  margin:0;
  padding:10px 20px;
  display:flex;
  gap:20px;
}
.main-nav a{
  text-decoration:none;
  color:var(--nav-bg);
  font-weight:600;
  transition:color .15s;
}
.main-nav a:hover{ color:var(--accent); }

/* Hero */
.hero{
  padding:48px 20px;
  background: linear-gradient(180deg,var(--banner-from), var(--banner-to));
  position:relative;
  overflow:hidden;
}
.hero-inner{ max-width:1000px; margin:0 auto; text-align:center; padding:6px; }
.hero h1{
  margin:0;
  font-size:48px;
  color:var(--accent);
  letter-spacing:0.6px;
}
.subtitle{ margin-top:12px; color:var(--muted); font-size:18px; }

/* Main layout */
.container{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
  display:flex;
  gap:28px;
}
.content{ flex:1; background:var(--card-bg); padding:18px; border-radius:8px; box-shadow:0 8px 24px rgba(34,34,34,0.06); }
.sidebar{ width:320px; padding:16px; background:rgba(255,255,255,0.95); border-radius:8px; }

/* Cards */
.cards{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.card{ background:white; padding:12px; border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,0.04); flex:1; min-width:220px; transition:transform .18s; }
.card:hover{ transform:translateY(-6px); }

/* Footer */
.site-footer{ padding:16px 0; text-align:center; color:var(--muted); border-top:1px solid rgba(0,0,0,0.04); margin-top:26px; }

/* Search results style */
.search-list .search-item{ padding:8px 0; border-bottom:1
}
.side-left {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 150px; /* chỉnh kích thước */
    opacity: 0.7; /* làm mờ nhẹ nếu muốn */
  }

  /* Ảnh bên phải */
  .side-right {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 150px;
    opacity: 0.7;
  }

  .content {
    text-align: center;
    padding: 100px;
    margin: 0 170px; /* Đảm bảo không bị che khuất bởi ảnh bên trái và bên phải */}