@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:wght@300;400;600&display=swap');  :root {     --primary-color: #5b6d5b; /* Màu xanh lá muted tự nhiên */     --accent-color: #d4a373;  /* Màu nâu đất nhẹ */     --text-color: #2c3e50;     --light-bg: #fdfaf5;      /* Màu nền kem nhẹ */     --white: #ffffff;     --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }  * {     margin: 0;     padding: 0;     box-sizing: border-box; }  body {     font-family: 'Source Sans Pro', sans-serif;     background-color: var(--light-bg);     color: var(--text-color);     line-height: 1.8; }  h1, h2, h3, .logo {     font-family: 'Playfair Display', serif;     font-weight: 400; }  a {     text-decoration: none;     color: inherit;     transition: var(--transition); }  /* Header */ header {     padding: 60px 5% 40px;     text-align: center;     background: var(--light-bg); }  .logo-wrapper {     margin-bottom: 40px; }  .logo {     font-size: 48px;     letter-spacing: 3px;     color: var(--text-color);     text-transform: uppercase; }  .logo span {     display: block;     font-size: 14px;     font-family: 'Source Sans Pro', sans-serif;     letter-spacing: 5px;     margin-top: 10px;     color: var(--primary-color); }  nav {     display: flex;     justify-content: center;     gap: 40px;     border-top: 1px solid rgba(0,0,0,0.05);     border-bottom: 1px solid rgba(0,0,0,0.05);     padding: 20px 0; }  nav a {     font-size: 13px;     text-transform: uppercase;     letter-spacing: 2px;     font-weight: 600; }  nav a:hover, nav a.active {     color: var(--primary-color); }  /* Featured Post (Hero) */ .featured-post {     max-width: 1200px;     margin: 40px auto;     padding: 0 5%;     position: relative; }  .featured-image-wrapper {     width: 100%;     height: 600px;     overflow: hidden; }  .featured-image-wrapper img {     width: 100%;     height: 100%;     object-fit: cover; }  .featured-content {     background: var(--white);     padding: 50px;     width: 80%;     margin: -100px auto 0;     position: relative;     text-align: center;     box-shadow: 0 15px 45px rgba(0,0,0,0.05); }  .category {     font-size: 12px;     text-transform: uppercase;     letter-spacing: 2px;     color: var(--accent-color);     margin-bottom: 15px;     display: block; }  .featured-content h2 {     font-size: 36px;     margin-bottom: 20px; }  .read-more {     display: inline-block;     margin-top: 25px;     padding-bottom: 5px;     border-bottom: 1px solid var(--text-color);     font-size: 13px;     text-transform: uppercase;     letter-spacing: 1px;     font-weight: 600; }  /* Blog Feed */ .blog-container {     max-width: 1200px;     margin: 80px auto;     padding: 0 5%;     display: grid;     grid-template-columns: 2fr 1fr;     gap: 60px; }  .post-list {     display: flex;     flex-direction: column;     gap: 80px; }  .post-item {     border-bottom: 1px solid rgba(0,0,0,0.05);     padding-bottom: 60px; }  .post-item img {     width: 100%;     height: 450px;     object-fit: cover;     margin-bottom: 30px; }  .post-item h3 {     font-size: 28px;     margin-bottom: 15px; }  /* Sidebar */ aside {     display: flex;     flex-direction: column;     gap: 60px; }  .widget-title {     font-size: 18px;     text-transform: uppercase;     letter-spacing: 2px;     margin-bottom: 25px;     border-bottom: 1px solid var(--text-color);     padding-bottom: 10px; }  .about-me {     text-align: center; }  .about-me img {     width: 180px;     height: 180px;     border-radius: 50%;     object-fit: cover;     margin-bottom: 20px; }  /* Footer */ footer {     background: var(--white);     padding: 100px 5%;     text-align: center;     border-top: 1px solid rgba(0,0,0,0.05); }  .footer-social {     display: flex;     justify-content: center;     gap: 30px;     margin-bottom: 40px; }  .footer-social i {     font-size: 20px; }  .subscribe-form {     max-width: 500px;     margin: 0 auto; }  .subscribe-form input {     width: 70%;     padding: 15px;     border: 1px solid #ddd;     font-family: inherit; }  .subscribe-form button {     width: 25%;     padding: 15px;     background: var(--text-color);     color: var(--white);     border: none;     cursor: pointer;     font-weight: 600; }  @media (max-width: 900px) {     .blog-container { grid-template-columns: 1fr; }     .featured-content { width: 95%; padding: 30px; } }