/* Giao diện Portfolio */
.portfolio-body {
    background: #0a192f; color: white;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; text-align: center; font-family: Arial, sans-serif;
}
.profile-centered { max-width: 600px; }
.avatar-circle { width: 160px; height: 160px; border-radius: 50%; border: 3px solid #00f2ff; margin: 0 auto 20px; overflow: hidden; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.link-box { padding: 10px 20px; border: 1px solid #00f2ff; color: #00f2ff; text-decoration: none; border-radius: 20px; font-weight: bold; }
.link-box.highlight { background: #ffd700; color: #b40000; border: none; }

/* Giao diện Bài Tập Tết */
.tet-body { background: #fffaf0; font-family: Arial, sans-serif; }
.tet-header { background: #b40000; color: gold; text-align: center; padding: 40px 20px; }
.back-btn { color: white; text-decoration: none; font-size: 0.8rem; border: 1px solid white; padding: 5px 10px; border-radius: 5px; }

.centered-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.block-title { text-align: center; color: #b40000; margin-bottom: 30px; text-transform: uppercase; }

/* Grid Đặc Sản */
.tet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 60px; }
.item-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; }
.item-card img { width: 100%; height: 130px; object-fit: cover; }
.item-card p { padding: 8px; font-weight: bold; color: #b40000; font-size: 0.9rem; }

/* Nhật ký Nhơn Lý (Dàn hàng ngang trong khung) */
.story-card { display: flex; background: white; padding: 20px; border-radius: 15px; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-left: 8px solid #b40000; }
.red-tag { background: #b40000; color: white; padding: 10px; border-radius: 5px; font-weight: bold; min-width: 90px; height: fit-content; text-align: center; margin-right: 20px; }
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; flex: 1; }
.media-row.single { grid-template-columns: 1fr; }
.media-row video, .media-row img { width: 100%; height: 230px; border-radius: 10px; object-fit: cover; }