.buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
    }

    .btn {
      position: relative;
      display: inline-block;
      padding: .8em 1.5em;
      background-color: rgba(255,255,255,0.2);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-radius: 25px;
      color: #000;
      text-decoration: none;
      font-weight: 500;
      transition: background-color .3s ease;
    }
    .btn:hover {
      background-color: rgba(255,255,255,0.3);
    }

    /* Tooltip on hover */
    .btn::before {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      padding: .4em .8em;
      background-color: rgba(255,255,255,0.3);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 25px;
      font-size: .9rem;
      color: #000;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }
    .btn:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Toast “IP Copied” */
    .copy-toast {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      padding: .4em .8em;
      background-color: rgba(255,255,255,0.3);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 25px;
      font-size: .9rem;
      color: #000;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }
    .btn.show-toast .copy-toast {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 600px) {
      .hero h1 { font-size: 2rem; }
      .hero p  { font-size: 1rem; }
      .btn     { padding: .6em 1.2em; }
      .btn::before,
      .copy-toast { font-size: .8rem; }
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      position: relative;
      font-family: 'Be Vietnam Pro', sans-serif;
      min-height: 100vh;
      background: url('background.jpeg') no-repeat center/cover fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    /* Nút quay về Trang Chủ */
    .back-button {
      position: absolute;
      top: 20px;
      left: 20px;
      display: flex;
      align-items: center;
      gap: 0.3em;
      padding: 0.6em 1em;
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 25px;
      text-decoration: none;
      color: #000;
      font-weight: 500;
      transition: background-color 0.2s ease;
    }
    .back-button:hover {
      background-color: rgba(255, 255, 255, 0.35);
    }
    .back-button svg {
      width: 1em;
      height: 1em;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* Khung chính */
    .container {
      width: 100%;
      max-width: 600px;
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 25px;
      padding: 2rem;
      text-align: center;
      color: #000;
    }
    .container h1 {
      font-size: 2.2rem;
      margin-bottom: 0.5em;
    }
    .container p.subtitle {
      font-size: 1.1rem;
      margin-bottom: 1.5em;
      color: #333;
    }
    .content {
      line-height: 1.6;
    }
    .content h2 {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      font-size: 1.8rem;
      border-bottom: 2px solid rgba(0,0,0,0.2);
      padding-bottom: 0.2em;
      text-align: left;
    }
    .content p {
      margin-bottom: 1em;
      font-size: 1rem;
    }
    @media (max-width: 600px) {
      .back-button {
        top: 10px;
        left: 10px;
        padding: 0.4em 0.8em;
      }
      .container {
        padding: 1.5rem;
      }
      .container h1 {
        font-size: 1.8rem;
      }
      .container p.subtitle {
        font-size: 1rem;
      }
      .social-list a {
        padding: 0.5em 1em;
        font-size: 0.9rem;
      }
      .content h2 { font-size: 1.5rem; }
      .content p { font-size: 0.9rem; }
    }