/* style.css - cơ bản, dễ chỉnh */
:root{
    --primary:#0a66c2;
    --bg:#f5f7fb;
    --card:#ffffff;
    --muted:#666;
    --radius:8px;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background:var(--bg);
    color:#222;
    line-height:1.4;
  }
  
  .container{
    max-width:1000px;
    margin:0 auto;
    padding:20px;
  }
  
  /* header */
  .site-header{
    background:var(--primary);
    color:white;
    padding:14px 0;
    box-shadow:0 2px 4px rgba(0,0,0,0.06);
  }
  .site-title{ margin:0; display:inline-block; font-size:20px; padding-left:6px;}
  .main-nav{ float:right; margin-top:-28px; }
  .main-nav a{
    color:white;
    text-decoration:none;
    margin-left:16px;
    font-weight:600;
  }
  .main-nav a:hover{ text-decoration:underline; }
  
  /* intro */
  .intro{
    background:var(--card);
    padding:24px;
    border-radius:var(--radius);
    margin:18px 0;
  }
  
  /* highlights */
  .highlights{ display:flex; gap:16px; margin-bottom:18px; }
  .card{
    background:var(--card);
    padding:16px;
    border-radius:var(--radius);
    flex:1;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  
  /* book grid */
  .book-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    margin-bottom:24px;
  }
  .book{
    background:var(--card);
    padding:12px;
    border-radius:8px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.04);
  }
  .book img{
    width:140px;
    height:180px;
    object-fit:cover;
    border-radius:4px;
  }
  .book h3{ margin:10px 0 6px; font-size:16px; }
  .book .author{ color:var(--muted); font-size:14px; }
  
  /* forms */
  .form-section{
    background:var(--card);
    padding:18px;
    border-radius:var(--radius);
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
  }
  .simple-form{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:520px;
  }
  .simple-form label{ font-weight:600; font-size:14px; }
  .simple-form input[type="text"],
  .simple-form input[type="date"]{
    padding:8px;
    border-radius:6px;
    border:1px solid #ddd;
  }
  .simple-form button{
    margin-top:6px;
    background:var(--primary);
    color:white;
    padding:10px;
    border:none;
    border-radius:6px;
    cursor:pointer;
  }
  .simple-form button:hover{ opacity:0.95; }
  
  .note{ color:var(--muted); margin-top:12px; }
  
  /* footer */
  .site-footer{
    background:var(--primary);
    color:white;
    padding:12px 0;
    margin-top:20px;
    text-align:center;
  }
  
  /* responsive */
  @media (max-width:900px){
    .book-grid{ grid-template-columns: repeat(2, 1fr); }
    .main-nav{ float:none; margin-top:10px; }
  }
  @media (max-width:560px){
    .book-grid{ grid-template-columns: 1fr; }
    .highlights{ flex-direction:column; }
  }
  body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
color: #333;
}


.header {
background: linear-gradient(90deg, #0056d2, #2d9bff);
color: white;
text-align: center;
padding: 30px 10px;
}


.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}


.section {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.section h2 {
color: #0056d2;
margin-bottom: 10px;
}


.section ul {
list-style: none;
padding-left: 0;
}


.section li {
margin: 6px 0;
}


.map-container {
border-radius: 10px;
overflow: hidden;
height: 400px;
}


.map-container iframe {
width: 100%;
height: 100%;
border: none;
}


.video-container {
position: relative;
padding-top: 56.25%;
height: 0;
overflow: hidden;
border-radius: 10px;
}


.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}


.footer {
background-color: #f0f0f0;
text-align: center;
padding: 15px 0;
font-size: 0.9em;
color: #555;
}

.logo-sonadezi {
  width: 60px;          
  height: auto;
  vertical-align: middle;
  margin-right: 10px;   
  
}

.site-title {
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: bold;
  color: white;       
  gap: 8px;              
}