/* --- Cài đặt chung & Reset CSS --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}
/* ... CSS Header, Main, Controls ... */
#main-header {background-color: green;color: white;position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;height: 70px;transition: height 0.3s ease-in-out;display: flex;justify-content: center;align-items: center;padding: 0 20px;}
#main-header.scrolled {height: 50px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.header-content {display: flex;align-items: center;gap: 15px;}
.header-content .logo-link img {height: 50px;transition: height 0.3s ease-in-out;}
#main-header.scrolled .logo-link img {height: 40px;}
.header-content h1 {font-size: 1.8rem;font-weight: bold;transition: font-size 0.3s ease-in-out;}
#main-header.scrolled h1 {font-size: 1.5rem;}
main {padding-top: 90px;padding-bottom: 20px;}
.controls-container {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 20px;padding: 20px;margin-bottom: 20px;background-color: #fff;border-bottom: 1px solid #eee;}
.control-item {min-width: 250px;}
#category-filter, #search-input {width: 100%;padding: 12px 15px;border: 1px solid #ccc;border-radius: 5px;font-size: 1rem;background-color: #fff;}
#category-filter {appearance: none;background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat;background-position: right 15px top 50%;background-size: 10px auto;}

/* --- SECTION Sách quan tâm nhất --- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.featured-section-wrapper {
    position: relative;
    padding: 4px;
    background: conic-gradient(from var(--angle), #00FF00, #FFFF00, #FF007F, #00C8FF, #00FF00);
    animation: spin 5s linear infinite;
    margin: 0 0 30px 0;
}
@keyframes spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}
.featured-section-content {
    background: #fff;
    padding: 30px;
}
#featured-title {
    text-align: center;
    margin-bottom: 25px;
    font-size: 2rem;
    color: green;
}
.featured-layout {
    display: flex;
    gap: 25px;
    align-items: flex-start; /* SỬA LỖI: Thay "stretch" thành "flex-start" */
}
.featured-image { flex: 0 0 25%; }
.featured-image img {width: 100%;height: auto;border-radius: 8px;box-shadow: 0 5px 15px rgba(0,0,0,0.15);}
.featured-info { flex: 0 0 50%; }
.featured-info p {font-size: 1.1rem;line-height: 1.7;margin-bottom: 25px;}
.btn-read {display: inline-block;background-color: green;color: white;padding: 12px 25px;border-radius: 5px;text-decoration: none;font-weight: bold;transition: background-color 0.3s;}
.btn-read:hover {background-color: darkgreen;}
.featured-cta {
    flex: 0 0 25%;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.featured-cta h3 {font-size: 1.2rem;color: green;margin-bottom: 10px;}
.featured-cta p {font-size: 0.95rem;line-height: 1.5;margin-bottom: 15px;}
.contact-info p { margin-bottom: 5px; }
.contact-info a { color: #0056b3; text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }

/* ... (CSS lưới sách, footer, toast) ... */
.book-grid-container {display: grid;grid-template-columns: repeat(5, 1fr);gap: 25px;padding: 0 25px;}
.book-item {background-color: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 8px rgba(0,0,0,0.1);transition: transform 0.2s ease, box-shadow 0.2s ease;text-align: center;}
.book-item:hover {transform: translateY(-5px);box-shadow: 0 8px 16px rgba(0,0,0,0.15);}
.book-item a {text-decoration: none;color: inherit;}
.book-item img {width: 100%;height: auto;display: block;aspect-ratio: 2 / 3;object-fit: cover;}
footer {text-align: center;padding: 25px;margin-top: 30px;background-color: #333;color: #f4f4f4;font-size: 0.9rem;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#toast-notification {visibility: hidden;min-width: 250px;background-color: #333;color: #fff;text-align: center;border-radius: 5px;padding: 16px;position: fixed;z-index: 2000;left: 50%;transform: translateX(-50%);bottom: 30px;font-size: 1rem;opacity: 0;transition: opacity 0.5s, visibility 0.5s;}
#toast-notification.show {visibility: visible;opacity: 1;}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .featured-layout { flex-wrap: wrap; }
    .featured-info { flex: 1 1 100%; order: 2; margin-top: 20px; }
    .featured-image { flex: 0 0 40%; order: 1;}
    .featured-cta { flex: 0 0 55%; order: 1; }
    .book-grid-container { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    #featured-title { font-size: 1.5rem; }
    .featured-layout { flex-direction: column; align-items: center; }
    .featured-image, .featured-info, .featured-cta {
        flex-basis: auto; width: 100%; max-width: 500px; order: 0;
    }
    .featured-info { margin-top: 0; }
    .book-grid-container { grid-template-columns: repeat(3, 1fr); }
}