* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            color: #e0e0e0;
            background: #0a0a0f;
            background-image: radial-gradient(circle at 15% 50%, rgba(28, 58, 12, 0.1) 0%, transparent 20%), radial-gradient(circle at 85% 30%, rgba(77, 20, 20, 0.1) 0%, transparent 20%);
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
        }
        h1, h2, h3, h4 { color: #4CAF50; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; }
        h1 { font-size: 2.8rem; margin-top: 1.5rem; text-align: center; border-bottom: 3px solid #388E3C; padding-bottom: 15px; }
        h2 { font-size: 2.2rem; margin-top: 2.5rem; padding-left: 10px; border-left: 5px solid #FF9800; }
        h3 { font-size: 1.8rem; margin-top: 2rem; color: #FFC107; }
        h4 { font-size: 1.4rem; margin-top: 1.5rem; color: #8BC34A; }
        p { margin-bottom: 1.5rem; text-align: justify; font-size: 1.1rem; }
        a { color: #4FC3F7; text-decoration: none; transition: color 0.3s ease, border-bottom 0.3s ease; }
        a:hover { color: #81D4FA; border-bottom: 1px dotted #81D4FA; }
        strong { color: #FFCC80; font-weight: 700; }
        em { color: #AED581; font-style: italic; }
        .container { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 15px; }
        .content-main { display: grid; grid-template-columns: 1fr 300px; gap: 40px; margin-top: 30px; }
        @media (max-width: 1024px) { .content-main { grid-template-columns: 1fr; } }
        .site-header { padding: 20px 0; border-bottom: 2px solid #333; }
        .logo-container { display: flex; align-items: center; justify-content: space-between; }
        .my-logo { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 2.8rem; color: #4CAF50; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); letter-spacing: 1.5px; }
        .my-logo a { color: inherit; border: none; }
        .my-logo a:hover { color: #8BC34A; }
        .main-nav { background: linear-gradient(90deg, #1B5E20, #2E7D32); padding: 12px; border-radius: 8px; margin-top: 15px; }
        .nav-list { display: flex; list-style: none; justify-content: center; flex-wrap: wrap; gap: 25px; }
        .nav-list a { color: #C8E6C9; font-weight: bold; padding: 8px 15px; border-radius: 4px; }
        .nav-list a:hover { background: rgba(255, 255, 255, 0.15); color: #FFF; border-bottom: none; }
        .hamburger { display: none; font-size: 1.8rem; background: none; border: none; color: #C8E6C9; cursor: pointer; }
        .breadcrumb { padding: 15px 0; font-size: 0.95rem; color: #BDBDBD; }
        .breadcrumb a { color: #FFCC80; }
        .breadcrumb span { margin: 0 8px; }
        .article-content { background: rgba(25, 25, 35, 0.85); padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
        .article-meta { color: #9E9E9E; font-size: 0.95rem; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #444; }
        .intro-box { background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(255, 152, 0, 0.1)); padding: 25px; border-left: 6px solid #4CAF50; margin: 25px 0; border-radius: 0 8px 8px 0; }
        .image-container { text-align: center; margin: 35px 0; }
        .article-img { max-width: 100%; height: auto; border-radius: 8px; border: 3px solid #555; box-shadow: 0 8px 16px rgba(0,0,0,0.6); }
        .note-box { background: rgba(33, 150, 243, 0.1); border-left: 5px solid #2196F3; padding: 20px; margin: 25px 0; border-radius: 0 5px 5px 0; }
        .sidebar { background: rgba(40, 40, 50, 0.9); padding: 25px; border-radius: 12px; height: fit-content; }
        .widget { margin-bottom: 35px; }
        .widget-title { color: #FF9800; border-bottom: 2px solid #555; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.4rem; }
        .link-list { list-style: none; }
        .link-list li { margin-bottom: 12px; padding-left: 20px; position: relative; }
        .link-list li:before { content: '▸'; position: absolute; left: 0; color: #4CAF50; }
        .search-widget input, .comment-form input, .comment-form textarea, .rating-form select {
            width: 100%;
            padding: 14px;
            margin-bottom: 15px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid #555;
            border-radius: 6px;
            color: #fff;
            font-size: 1rem;
        }
        .search-widget button, .comment-form button, .rating-form button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(90deg, #388E3C, #4CAF50);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }
        .search-widget button:hover, .comment-form button:hover, .rating-form button:hover { background: linear-gradient(90deg, #2E7D32, #388E3C); }
        .rating-stars { font-size: 1.5rem; color: #FFD700; margin: 10px 0; text-align: center; }
        .site-footer { margin-top: 50px; padding: 30px 0; border-top: 2px solid #333; color: #BDBDBD; text-align: center; }
        friend-link { display: block; margin: 20px 0; }
        friend-link a { display: inline-block; margin: 0 10px; color: #FFCC80; }
        .copyright { font-size: 0.9rem; margin-top: 20px; }
        @media (max-width: 768px) {
            h1 { font-size: 2.2rem; }
            h2 { font-size: 1.9rem; }
            .my-logo { font-size: 2.2rem; }
            .nav-list { flex-direction: column; display: none; gap: 10px; }
            .nav-list.active { display: flex; }
            .hamburger { display: block; }
            .main-nav { padding: 10px; }
            .article-content, .sidebar { padding: 20px; }
        }