.container{
      width: 100%;
      max-width: 1200px;
      margin:10px auto;
      padding:0 5px;
    }
    
    .container .header{
      padding:10px;
      background:var(--card-bg);
      border-radius:12px;
      box-shadow:0 4px 20px rgba(0,0,0,0.05);
      margin-bottom:20px;
    }
    
    .container .header h1{
      margin:0;
      font-size:clamp(22px,3vw,32px);
      color:var(--accent-dark);
      display: inline;
    }
    .container .header h3{
      margin:0;
      font-size:clamp(14px,3vw,22px);
      color:#d70000;
      display: inline;
      padding-left: 5px;
    }
    .container .header .meta{
      color:var(--muted);
      font-size:0.95rem;
    }
    .container .grid{
      width: 100%;
    }
    .container article{
      display: inline-block;
      width: calc(66%);
      background:var(--card-bg);
      padding:10px;
      border-radius:12px;
      box-shadow:0 4px 20px rgba(0,0,0,0.05);
    }
    .container aside{
      display: inline-block;
      margin-left: 10px;
      width: calc(34% - 15px);
      vertical-align: top;
      user-select:none;
    }
    .container aside > div{
      background:var(--card-bg);
      padding:8px;
      border-radius:12px;
      box-shadow:0 4px 20px rgba(0,0,0,0.05);
      margin-bottom:10px;
    }
    .container .content{
      width: 100%;
    }
    .container .content p{
      margin:0 0 12px;
    }
    .container .content h3{
      margin: 15px 0 5px 0;
      padding: 0;
      font-size: 20px;
    }
    .container .content ul{
      margin: 0;
    }
    .container .content img{
      width:100%;
    }
    .container .content a{
      user-select:none;
      text-decoration: none;
      border-bottom: 1px dashed #9e9e9e70;
      font-weight: 500;
      padding: 0 2px;
      border-radius: 1px;
    }
    .container .content a:hover{
      border-bottom: 1px solid #000000;
      color: #ff00b7;
      background: #fff;
    }
    .container .content a:active{
      color: #006c71;
    }
    .container .content a:visited{
      color: #8600ab;
    }
    .container .content .youtubelink{
        text-decoration: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: none;
    }
    .container .content .youtubelink:hover{
        border-bottom: none;
    }
    .container .content .youtubelink img{
        max-width: 250px;
    }
    .container .tags{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:12px;
      user-select:none;
    }
    .container .tag{
      background:var(--accent);
      color:#fff;
      padding:6px 12px;
      border-radius:999px;
      font-size:0.85rem;
    }
    .container .comments{
      margin-top:20px;
    }
    .container .comment{
      border-top:1px solid #eee;
      padding:12px 0;
    }
    .container .comment strong{
      display:block;
      color:var(--accent-dark);
    }
    .container .related h3{
      padding:0;
      margin:0;
      text-align: center;
      font-size: 22px;
    }
    .container .related .trending{
      color: #a60000;
    }
    .container .related .active{
      color: #008b02;
    }
    .container .related h3::after{
      content:''; width:100px; height:3px; background:#ffcc00; display:block; margin:12px auto 0; border-radius:2px;
    }
    .container .related ul{
      list-style:none;
      padding:0;
      margin:0;
    }
    .container .related li{
      padding:8px 0;
      border-bottom:1px solid #e2e2e2;
    }
    .container .related li a{
      padding:2px 0;
      border-bottom:0;
      color: #0003c5;
      text-decoration: none;
      line-height: 1.4;
    }
    .container .related li a:hover{
      color: var(--accent);
    }
    .container .related li:last-child{
      border-bottom:0;
    }
    .container .small{
      font-size:0.85rem;
      color:var(--muted);
    }
    .container .comment-form textarea{
      width:calc(100% - 2px);
      min-height:80px;
      padding:8px;
      border-radius:8px;
      border:1px solid #ddd;
      outline:none;
      resize: none;
    }
    .container .comment-form input{
      margin-top:8px;
      padding:8px;
      border-radius:8px;
      border:1px solid #ddd;
      width: calc(100% - 100px);
      max-width: 250px;
      outline:none;
    }
    .container .btn{
      background:var(--accent);
      color:#fff;
      padding:8px 14px;
      border-radius:8px;
      border:0;
      cursor:pointer;
      transition:background 0.2s ease;
      user-select:none;
    }
    .container .btn:hover{
      background:var(--accent-dark);
    }
    .table{
      width: 100%;
      overflow-x: auto;
      border: 2px solid #000;
      scrollbar-width: none; 
    }
    .container table{
      width: 100%;
      border-collapse: collapse;
    }
    .container th, .container td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    .container th {
      background-color: #000000;
      color: #ffffff;
    }
    
    .container tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    
    .container tr:hover {
      background-color: #e0e0e0;
    }
    
    .container .content .contentUp{
      text-align:center;
    }
    .container .content .contentUp h3{
      margin:0;
      padding:0;
      font-size: 18px;
      color: #008578;
    }
    .container .content .contentUp div{
      color: #ff0000;
      font-weight: 600;
    }
    .container .content .contentUp label{
      padding:0;margin:0;
      color: #005001;
      font-weight: 600;
    }
    .container .content .contentUp .thumbnail{
        display: flex;
        justify-content: center;
        margin-top: 5px;
    }
    .container .content .contentUp .thumbnail img{
        max-width: 100%;
        max-height: 250px;
        border-radius: 10px;
        width: auto;
    }
    
    @media only screen and (max-width:800px){
      .container article{
        display: block;
        width: 100%;
      }
      .container aside{
        display: block;
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
      }
    }