* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body { font-family: 'Poppins', sans-serif; background: #f0f2f5; color: #1a1a2e; line-height: 1.75; overflow-x: hidden; }
        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; transition: all .3s ease; }
        ul, ol { list-style: none; }
        .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
        .site-header { background: #16162a; padding: 12px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
        .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .my-logo { font-family: 'Nunito', sans-serif; font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, #e2231a, #f7a800, #00a2ff, #25d366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; display: inline-flex; align-items: center; gap: 8px; }
        .my-logo i { font-size: 1.6rem; color: #f7a800; -webkit-text-fill-color: #f7a800; }
        .nav-menu { display: flex; align-items: center; gap: 22px; }
        .nav-menu a { color: #cfcfe8; font-weight: 500; font-size: .92rem; padding: 8px 4px; position: relative; text-transform: uppercase; letter-spacing: .5px; }
        .nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #f7a800; transition: width .35s; }
        .nav-menu a:hover::after { width: 100%; }
        .nav-menu a:hover { color: #fff; }
        .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
        .hamburger span { display: block; width: 26px; height: 3px; background: #f7a800; margin: 5px 0; border-radius: 4px; transition: all .3s; }
        .breadcrumb-wrap { background: #fafafa; border-bottom: 1px solid #e8e8e8; padding: 10px 0; font-size: .85rem; }
        .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #666; }
        .breadcrumb a { color: #e2231a; }
        .breadcrumb a:hover { text-decoration: underline; }
        .breadcrumb .sep { color: #aaa; margin: 0 2px; }
        .breadcrumb .current { font-weight: 600; color: #333; }
        .hero-area { background: linear-gradient(135deg, #1a1a3e 0%, #2d2d5e 60%, #3a2d6b 100%); color: #fff; padding: 70px 0 50px; position: relative; overflow: hidden; }
        .hero-area::before { content: ''; position: absolute; top: -60%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(247,168,0,.15) 0%, transparent 60%); border-radius: 50%; }
        .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
        .hero-badge { display: inline-block; background: rgba(247,168,0,.2); border: 1px solid #f7a800; color: #f7a800; font-size: .78rem; padding: 4px 14px; border-radius: 30px; margin-bottom: 18px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
        .hero-area h1 { font-family: 'Nunito', sans-serif; font-size: 3rem; font-weight: 900; line-height: 1.15; margin-bottom: 18px; }
        .hero-area h1 span { color: #f7a800; }
        .hero-desc { font-size: 1.05rem; color: #b8b8d8; margin-bottom: 28px; max-width: 540px; line-height: 1.7; }
        .hero-stats { display: flex; gap: 30px; margin-top: 35px; flex-wrap: wrap; }
        .hero-stat { text-align: center; }
        .hero-stat .num { font-family: 'Nunito', sans-serif; font-size: 2rem; font-weight: 800; color: #f7a800; }
        .hero-stat .label { font-size: .78rem; color: #8888aa; text-transform: uppercase; letter-spacing: .5px; }
        .hero-img-wrap { position: relative; }
        .hero-img-wrap img { border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); transform: rotate(2deg); border: 3px solid rgba(255,255,255,.1); }
        .hero-img-wrap .float-card { position: absolute; bottom: -18px; left: -18px; background: #fff; color: #1a1a2e; border-radius: 14px; padding: 14px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.15); display: flex; align-items: center; gap: 12px; font-size: .85rem; font-weight: 600; }
        .hero-img-wrap .float-card i { color: #25d366; font-size: 1.3rem; }
        .search-section { background: #fff; padding: 30px 0; border-bottom: 1px solid #eee; }
        .search-box { display: flex; gap: 12px; max-width: 650px; margin: 0 auto; }
        .search-box input { flex: 1; padding: 14px 20px; border: 2px solid #e0e0e0; border-radius: 50px; font-size: 1rem; outline: none; transition: border-color .3s; background: #fafafa; }
        .search-box input:focus { border-color: #e2231a; }
        .search-box button { background: linear-gradient(135deg, #e2231a, #ff4d3a); color: #fff; border: none; border-radius: 50px; padding: 14px 32px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform .3s, box-shadow .3s; display: flex; align-items: center; gap: 8px; }
        .search-box button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(226,35,26,.35); }
        .content-section { padding: 60px 0; }
        .content-grid { display: grid; grid-template-columns: 1fr 350px; gap: 50px; }
        .article-body { background: #fff; border-radius: 18px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,.05); }
        .article-title { font-size: 2.2rem; font-family: 'Nunito', sans-serif; font-weight: 800; margin-bottom: 15px; line-height: 1.2; }
        .article-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: .85rem; color: #888; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 30px; }
        .article-meta i { color: #e2231a; margin-right: 5px; }
        .article-body h2 { font-family: 'Nunito', sans-serif; font-size: 1.7rem; font-weight: 800; margin: 45px 0 18px; padding-bottom: 10px; border-bottom: 3px solid #f7a800; color: #1a1a2e; }
        .article-body h3 { font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 35px 0 14px; color: #2d2d5e; }
        .article-body h4 { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 600; margin: 25px 0 10px; color: #444; }
        .article-body p { margin-bottom: 16px; font-size: .97rem; line-height: 1.85; color: #3d3d4a; }
        .article-body ul, .article-body ol { margin: 0 0 18px 22px; }
        .article-body ul li { list-style: disc; margin-bottom: 8px; font-size: .95rem; line-height: 1.7; }
        .article-body ol li { list-style: decimal; margin-bottom: 8px; font-size: .95rem; line-height: 1.7; }
        .highlight-box { background: linear-gradient(135deg, #fff8f0, #ffefd6); border-left: 4px solid #f7a800; padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 25px 0; }
        .info-box { background: #f0f6ff; border-left: 4px solid #00a2ff; padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 20px 0; }
        .tip-box { background: #f0fff4; border-left: 4px solid #25d366; padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 20px 0; }
        .warning-box { background: #fff5f5; border-left: 4px solid #e2231a; padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 20px 0; }
        .table-wrap { overflow-x: auto; margin: 20px 0; }
        .table-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 580px; }
        .table-wrap th { background: #1a1a2e; color: #fff; padding: 14px 16px; text-align: left; font-weight: 600; }
        .table-wrap td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
        .table-wrap tr:hover td { background: #fafafa; }
        .btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #e2231a, #ff4d3a); color: #fff !important; padding: 13px 30px; border-radius: 50px; font-weight: 600; font-size: .95rem; transition: transform .3s, box-shadow .3s; border: none; cursor: pointer; }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(226,35,26,.35); }
        .btn-secondary { background: #1a1a2e; }
        .btn-secondary:hover { box-shadow: 0 8px 25px rgba(26,26,46,.3); }
        .sidebar { display: flex; flex-direction: column; gap: 30px; }
        .widget { background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
        .widget-title { font-family: 'Nunito', sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; color: #1a1a2e; padding-bottom: 12px; border-bottom: 2px solid #f7a800; }
        .widget ul li { margin-bottom: 10px; }
        .widget ul li a { color: #3d3d4a; font-size: .9rem; display: flex; align-items: center; gap: 8px; transition: color .3s, padding-left .3s; }
        .widget ul li a:hover { color: #e2231a; padding-left: 6px; }
        .widget ul li a i { font-size: .7rem; color: #f7a800; width: 16px; }
        .comment-section { margin-top: 50px; padding-top: 40px; border-top: 2px solid #f0f0f0; }
        .comment-list { margin-bottom: 30px; }
        .comment-item { background: #fafafa; border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; border-left: 3px solid #e0e0e0; }
        .comment-item .comment-author { font-weight: 600; color: #1a1a2e; margin-bottom: 4px; font-size: .95rem; }
        .comment-item .comment-date { font-size: .78rem; color: #aaa; margin-bottom: 8px; }
        .comment-item .comment-text { font-size: .9rem; color: #555; }
        .comment-form, .rating-form { background: #fafafa; border-radius: 14px; padding: 24px; margin-bottom: 20px; }
        .comment-form textarea, .comment-form input, .rating-form input, .rating-form select { width: 100%; padding: 12px 16px; border: 2px solid #e8e8e8; border-radius: 10px; font-size: .92rem; margin-bottom: 14px; font-family: inherit; outline: none; transition: border-color .3s; }
        .comment-form textarea { min-height: 100px; resize: vertical; }
        .comment-form input:focus, .comment-form textarea:focus, .rating-form input:focus, .rating-form select:focus { border-color: #e2231a; }
        .rating-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 14px; }
        .rating-stars input { display: none; }
        .rating-stars label { font-size: 1.8rem; color: #ddd; cursor: pointer; transition: color .3s; }
        .rating-stars input:checked~label, .rating-stars label:hover, .rating-stars label:hover~label { color: #f7a800; }
        .site-footer { background: #0f0f1f; color: #aaa; padding: 60px 0 0; margin-top: 80px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #222; }
        .footer-brand .my-logo { font-size: 1.8rem; }
        .footer-brand p { font-size: .9rem; margin-top: 15px; line-height: 1.7; }
        .footer-title { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: #aaa; font-size: .88rem; }
        .footer-links a:hover { color: #f7a800; }
        .footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: .85rem; }
        .footer-bottom a { color: #666; }
        friend-link { display: block; background: #14142a; border-radius: 12px; padding: 24px 30px; margin-top: 30px; border: 1px solid #222; }
        friend-link .link-title { font-family: 'Nunito', sans-serif; color: #f7a800; font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        friend-link .link-list { display: flex; flex-wrap: wrap; gap: 18px; }
        friend-link .link-list a { color: #aaa; font-size: .88rem; }
        friend-link .link-list a:hover { color: #f7a800; }
        @media (max-width: 992px) {
            .content-grid { grid-template-columns: 1fr; }
            .hero-inner { grid-template-columns: 1fr; text-align: center; }
            .hero-desc { margin-left: auto; margin-right: auto; }
            .hero-stats { justify-content: center; }
            .hero-img-wrap { max-width: 450px; margin: 30px auto 0; }
            .hero-img-wrap .float-card { left: 50%; transform: translateX(-50%); bottom: -15px; }
        }
        @media (max-width: 768px) {
            .site-header { padding: 10px 0; }
            .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #16162a; flex-direction: column; padding: 20px; align-items: flex-start; gap: 6px; border-top: 1px solid #222; }
            .nav-menu.active { display: flex; }
            .nav-menu a { font-size: .95rem; padding: 10px 6px; display: block; }
            .hamburger { display: block; }
            .hero-area h1 { font-size: 2rem; }
            .hero-area { padding: 50px 0 40px; }
            .article-body { padding: 25px; }
            .search-box { flex-direction: column; padding: 0 20px; }
            .search-box button { justify-content: center; }
            .footer-bottom { flex-direction: column; text-align: center; }
            .article-body h2 { font-size: 1.35rem; }
            .breadcrumb-wrap { font-size: .78rem; }
        }
        @media (max-width: 480px) {
            .hero-stat .num { font-size: 1.5rem; }
            .hero-stats { gap: 20px; }
            .article-title { font-size: 1.5rem; }
        }