* { margin:0; padding:0; box-sizing:border-box; }
        :root { --primary:#6c5ce7; --secondary:#00b894; --dark:#2d3436; --light:#f8f9fa; --accent:#fd79a8; --grad:linear-gradient(135deg,#1e1e2e,#2d2d44); }
        body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:#fff; color:var(--dark); line-height:1.8; }
        .container { width:92%; max-width:1200px; margin:0 auto; }
        img { max-width:100%; height:auto; }
        a { color:var(--primary); text-decoration:none; transition:color .3s; }
        a:hover { color:var(--secondary); }
        header { background:var(--grad); color:#fff; padding:15px 0; position:sticky; top:0; z-index:1000; box-shadow:0 4px 20px rgba(0,0,0,.3); }
        .header-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
        .my-logo { font-size:1.8rem; font-weight:900; color:#fff; text-decoration:none; letter-spacing:1px; display:flex; align-items:center; gap:8px; }
        .my-logo span { color:var(--accent); }
        .my-logo:hover { color:var(--accent); }
        .hamburger { display:none; background:none; border:none; color:#fff; font-size:1.8rem; cursor:pointer; }
        .main-nav ul { display:flex; list-style:none; gap:20px; }
        .main-nav a { color:#fff; font-weight:500; padding:8px 14px; border-radius:20px; transition:background .3s; }
        .main-nav a:hover { background:rgba(255,255,255,.2); color:var(--accent); }
        .mobile-menu { display:none; flex-direction:column; background:var(--dark); padding:10px 0; }
        .mobile-menu a { color:#fff; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.1); }
        .breadcrumb { padding:12px 0; font-size:.9rem; background:var(--light); border-bottom:1px solid #e9ecef; }
        .breadcrumb .container { display:flex; flex-wrap:wrap; gap:8px; }
        .breadcrumb i { color:var(--secondary); }
        .hero { padding:50px 0; background:radial-gradient(circle at 20% 50%,#1e1e2e,#0d0d1a); color:#fff; text-align:center; }
        .hero h1 { font-size:2.8rem; font-weight:900; margin-bottom:15px; background:linear-gradient(45deg,#6c5ce7,#00b894); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .hero p { font-size:1.2rem; max-width:800px; margin:0 auto 20px; opacity:.9; }
        .hero img { border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.5); max-height:450px; object-fit:cover; margin-top:20px; }
        .search-bar { display:flex; justify-content:center; margin-top:25px; }
        .search-bar form { display:flex; width:100%; max-width:500px; background:#fff; border-radius:50px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,.2); }
        .search-bar input { flex:1; border:none; padding:15px 20px; font-size:1rem; outline:none; }
        .search-bar button { background:var(--primary); border:none; color:#fff; padding:0 25px; cursor:pointer; font-size:1.2rem; transition:background .3s; }
        .search-bar button:hover { background:var(--secondary); }
        .content-wrap { display:grid; grid-template-columns:1fr 340px; gap:40px; padding:40px 0; }
        .main-content { min-width:0; }
        .sidebar { position:relative; }
        .sidebar-box { background:var(--light); border-radius:16px; padding:25px; margin-bottom:30px; }
        .sidebar-box h3 { font-size:1.2rem; margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid var(--primary); }
        .sidebar-box ul { list-style:none; }
        .sidebar-box li { margin-bottom:10px; }
        .sidebar-box a { display:block; padding:8px 12px; background:#fff; border-radius:8px; transition:all .3s; }
        .sidebar-box a:hover { background:var(--primary); color:#fff; transform:translateX(5px); }
        .article { background:#fff; border-radius:16px; padding:35px; box-shadow:0 2px 20px rgba(0,0,0,.06); }
        .article h2 { font-size:1.9rem; margin:40px 0 20px; padding-bottom:12px; border-bottom:2px solid var(--primary); position:relative; }
        .article h2::after { content:''; position:absolute; bottom:-2px; left:0; width:60px; height:2px; background:var(--accent); }
        .article h3 { font-size:1.4rem; margin:30px 0 15px; color:var(--primary); }
        .article h4 { font-size:1.15rem; margin:20px 0 10px; color:var(--dark); }
        .article p { margin-bottom:18px; font-size:1rem; }
        .article ul, .article ol { margin:0 0 20px 25px; }
        .article li { margin-bottom:8px; }
        .highlight-box { background:linear-gradient(135deg,#f0f4ff,#e8f8f0); border-left:4px solid var(--primary); padding:20px; margin:25px 0; border-radius:0 12px 12px 0; }
        .info-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.95rem; }
        .info-table th { background:var(--primary); color:#fff; padding:12px; text-align:left; }
        .info-table td { border:1px solid #ddd; padding:10px; }
        .info-table tr:nth-child(even) { background:var(--light); }
        .review-section, .rating-section, .comment-section { background:var(--light); border-radius:16px; padding:30px; margin-top:30px; }
        .review-section h2, .rating-section h2, .comment-section h2 { border-bottom:2px solid var(--primary); padding-bottom:10px; margin-bottom:20px; }
        .star-rating i { font-size:1.8rem; color:#ddd; cursor:pointer; transition:color .3s; margin-right:5px; }
        .star-rating i.active { color:#f1c40f; }
        .btn { display:inline-block; background:var(--primary); color:#fff; padding:12px 28px; border-radius:30px; border:none; font-size:1rem; cursor:pointer; transition:background .3s,transform .2s; }
        .btn:hover { background:var(--secondary); transform:translateY(-3px); }
        .form-group { margin-bottom:18px; }
        .form-group label { display:block; margin-bottom:6px; font-weight:600; }
        .form-group input, .form-group textarea, .form-group select { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:1rem; }
        footer { background:var(--dark); color:#fff; padding:50px 0 20px; margin-top:50px; }
        .footer-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; margin-bottom:30px; }
        .footer-bottom { text-align:center; border-top:1px solid rgba(255,255,255,.1); padding-top:20px; font-size:.9rem; }
        .footer-bottom a { color:var(--accent); }
        friend-link { display:block; background:rgba(255,255,255,.05); padding:15px; border-radius:8px; margin:10px 0; font-style:normal; }
        friend-link a { margin-right:15px; color:#74b9ff; }
        .back-to-top { position:fixed; bottom:30px; right:30px; background:var(--primary); color:#fff; width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:0 5px 20px rgba(0,0,0,.3); z-index:999; opacity:0; visibility:hidden; transition:all .3s; }
        .back-to-top.show { opacity:1; visibility:visible; }
        @media(max-width:992px) {
            .content-wrap { grid-template-columns:1fr; }
            .hamburger { display:block; }
            .main-nav { display:none; }
            .main-nav.open { display:flex; flex-direction:column; position:absolute; top:60px; left:0; right:0; background:var(--dark); padding:10px 20px; }
            .main-nav.open ul { flex-direction:column; }
        }
        @media(max-width:768px) {
            .hero h1 { font-size:2rem; }
            .article { padding:20px; }
            .article h2 { font-size:1.5rem; }
            .info-table { font-size:.85rem; }
            .search-bar form { max-width:90%; }
        }
        @media(max-width:576px) {
            .my-logo { font-size:1.4rem; }
            .hero { padding:30px 0; }
            .hero p { font-size:1rem; }
        }