/* =======================================
MOBILE RESPONSIVE FIX
======================================= */
@media (max-width: 768px) {
/* Ẩn sidebar nếu cần */
.layout {
flex-direction: column;
padding: 0 10px;
}
.sidebar {
width: 100%;
margin-bottom: 20px;
}
/* Book grid - 2 cột trên mobile */
.book-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* Card sách */
.book-item {
padding: 10px !important;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
position: relative;
}
/* Ảnh sách */
.book-title {
font-size: 14px !important;
font-weight: 600;
margin: 6px 0 0 0;
text-align: center;
}
.book-author {
font-size: 12px !important;
opacity: 0.7;
text-align: center;
margin-bottom: 4px;
}
/* Ribbon Tag (Nhãn sách) */
.ribbon-tag {
font-size: 11px !important;
padding: 3px 8px !important;
top: 6px !important;
left: 6px !important;
border-radius: 5px !important;
}
/* Nút bấm */
.btn {
width: 100% !important;
font-size: 13px !important;
padding: 10px !important;
display: block !important;
text-align: center !important;
margin-top: 6px;
}
/* Điều chỉnh phần Tìm kiếm */
.filter-row input,
.filter-row select {
flex: 100% !important;
font-size: 14px;
}
/* Category icon */
.category-icons {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.category-box {
padding: 10px !important;
font-size: 13px !important;
}
/* Slider thu nhỏ */
.slider-container {
height: auto !important;
}
.slider-container img {
width: 100% !important;
height: auto !important;
}
}
/* =======================================
MOBILE SMALL (dưới 480px)
======================================= */
@media (max-width: 480px) {
.book-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
.btn {
font-size: 12px !important;
padding: 8px !important;
}
.book-title {
font-size: 13px !important;
}
}
/* ===================== FIX MOBILE FULL WIDTH CHUẨN ===================== */
/* Bỏ mọi giới hạn chiều rộng */
header, footer, body, html {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* HEADER WRAP phải full width */
.header-wrap {
max-width: 100% !important;
width: 100% !important;
padding: 10px 12px !important;
margin: 0 !important;
}
/* Layout tổng */
.layout {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* SLIDER FULL WIDTH */
.slider-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* FOOTER FULL WIDTH */
footer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 15px 0 !important;
}
/* Tránh container con đẩy lệch */
* {
box-sizing: border-box;
}
/* ===== RESET CƠ BẢN ===== */
body {
margin:0;
font-family:"Segoe UI",Tahoma,Arial,sans-serif;
background:#f3f6fa;
}
/* ===== WRAPPER ===== */
.layout {
max-width:1400px;
margin:25px auto;
display:flex;
gap:20px;
}
/* ===== SIDEBAR ===== */
.sidebar-box {
width:260px;
}
/* ===== CARD ===== */
.card {
background:white;
padding:20px;
border-radius:14px;
margin-bottom:20px;
box-shadow:0 5px 14px rgba(0,0,0,0.12);
}
.section-title {
font-size:18px;
font-weight:700;
text-transform:uppercase;
margin:0 0 12px 0;
}
/* ===== GRID SÁCH ===== */
.book-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.book-item {
position:relative;
background:white;
padding:10px;
border-radius:14px;
text-align:center;
box-shadow:0 5px 12px rgba(0,0,0,0.1);
transition:.25s;
}
.book-item:hover {
transform:translateY(-6px);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
/* LABEL RIBBON */
.ribbon-tag {
position:absolute;
top:12px;
left:12px;
padding:6px 14px;
font-size:13px;
font-weight:600;
color:white;
border-radius:8px;
box-shadow:0 3px 6px rgba(0,0,0,0.2);
}
/* BUTTON */
.btn {
margin-top:6px;
display:inline-block;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:.2s;
font-size:14px;
}
.btn-read { background:#ff6b6b; color:white; }
.btn-download { background:#4a90e2; color:white; }
.btn-read:hover { background:#ff5252; }
.btn-download:hover { background:#2f79d9; }
/* ===== CATEGORY ICONS ===== */
.category-icons {
display:flex;
gap:16px;
margin-bottom:20px;
overflow-x:auto;
}
.category-box {
min-width:100px;
padding:12px;
background:white;
border-radius:14px;
text-align:center;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
transition:.25s;
cursor:pointer;
border:2px solid #ffb3b3;
}
.category-box:hover {
transform:translateY(-4px);
border-color:#ff6b6b;
}
.category-icon { font-size:26px; }
/* ===== FILTER FORM ===== */
.filter-row {
display:flex;
gap:10px;
flex-wrap:wrap;
}
.filter-row input,
.filter-row select {
padding:10px;
border-radius:6px;
border:1px solid #ccc;
font-size:14px;
}
/* ===== VIEW ALL ===== */
.view-all {
color:#ff6b6b;
font-weight:700;
text-decoration:none;
}
/* ===== SLIDER ===== */
.slider-container {
width:100%;
height:320px;
border-radius:14px;
overflow:hidden;
box-shadow:0 6px 14px rgba(0,0,0,0.15);
margin-bottom:25px;
position:relative;
}
.slider-track {
display:flex;
height:100%;
transition:transform .6s ease-in-out;
}
.slide { width:100%; }
.slide img {
width:100%;
height:100%;
object-fit:cover;
}
.slider-btn {
position:absolute;
top:50%;
transform:translateY(-50%);
background:white;
border:none;
font-size:26px;
padding:6px 12px;
border-radius:50%;
cursor:pointer;
}
.prev { left:15px; }
.next { right:15px; }