/* ── Hamburger button ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background .2s;
    z-index: 1001;
}
.nav-toggle:hover { background: #f3f4f6; }
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #374151;
    border-radius: 2px;
    transition: all .3s;
}

/* Animate → X khi open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        flex-direction: column;
        padding: 8px 0;
        z-index: 1000;
    }

    .nav.open {
        display: flex;
    }

    .nav-link {
        padding: 12px 20px !important;
        border-radius: 0 !important;
        font-size: 15px;
        border-bottom: 1px solid #f3f4f6;
    }

    .nav-link:last-child { border-bottom: none; }

    /* Header cần position:relative để nav dropdown định vị đúng */
    .header { position: relative; }
}

.input-group {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.input-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  color: #ffffff;
  flex: 0 0 auto;
  border-radius: 10px;
}

.input-group button svg {
  width: 20px;
  height: 20px;
}

.input-url {
  flex: 1 1 auto;
  border: none;
  outline: none;
  padding: 12px;
  font-size: 15px;
  width: 100%;
  min-width: 0; /* ngăn tràn khi co lại */
}

.btn-paste {
  border-right: 1px solid #e5e5e5;
}
.btn-paste:hover{  background: linear-gradient(135deg, var(--primary), #311f44);color: #ffffff;}
.btn-clear {
  border-left: 1px solid #e5e5e5;
  background: linear-gradient(135deg, #ea6666, #a24b4f) !important;
}
.btn-clear:hover{background: linear-gradient(135deg, #ea6666, #522224) !important}

.btn-submit {
  background: #ededed;
  color: white;
  border-radius: 0;
  padding: 10px 18px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.btn-submit:hover {
  background: linear-gradient(135deg, var(--primary), #311f44);
    color: #ffffff;
}

/* Responsive nhỏ gọn */
@media (max-width: 480px) {
  .input-group {
    flex-wrap: nowrap;
  }
  .btn-text {
    display: none;
  }
  .btn-submit {
    padding: 10px;
  }
}

  .faq {
    width:100%;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    background:linear-gradient(180deg,var(--card),#fff);
    padding:20px;
     margin-bottom: var(--spacing-2xl);
  }
  h1{
    margin:0 0 12px 0;
    font-size:1.25rem;
    letter-spacing:0.2px;
  }
  details{
    background:transparent;
    border-radius:10px;
    margin:var(--gap) 0;
    padding:0;
  }
  summary{
list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    background-color: #ccc;
  }
  summary::-webkit-details-marker{ display:none; } /* hide default arrow */
  .q {
    display:flex;
    gap:12px;
    align-items:center;
  }
  .dot{
    width:36px;height:36px;border-radius:8px;
    background:linear-gradient(135deg,var(--accent),#5aa0ff);
    color:white;display:inline-grid;place-items:center;font-weight:600;
    font-size:.9rem;
    flex:0 0 36px;
  }
  .title{
    font-weight:600;
  }
  .chev{
    width:26px;height:26px;display:inline-grid;place-items:center;
    color:var(--accent);transition:transform .18s;
  }
  details[open] .chev{ transform:rotate(180deg); }
  details[open] summary{ background:rgba(15,98,254,0.06); }
  .answer{
padding: 12px 14px 16px 62px;
    color: #000;
    line-height: 1.5;
    font-size: 0.95rem;
    background: #ededed;
    border-radius: 8px;
  }

  /* small screens */
  @media (max-width:420px){
    .dot{ display:none; }
    .answer{ padding-left:16px; }
  }
    :root{
      --accent1: #ff6b00;
      --accent2: #ffcc33;
      --text: #222222;
      --muted: #666666;
      --bg: #ffffff;
      --card:#f7f8fa;
      --accent:#0f62fe;
      --radius:12px;
      --shadow: 0 6px 18px rgba(15,23,32,0.06);
      --gap:12px;
    }


    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 16px;
      border-radius:10px;
      background:#fff;
      border:1px solid #f0f0f0;
      transition:all .25s ease;
      font-family:"Poppins", Arial, sans-serif;
            background:var(--bg);
      color:var(--text);
      text-decoration: none;
    }

    .logo:hover{
      box-shadow:0 4px 12px rgba(255,107,0,0.2);
      transform:translateY(-2px);
    }

    .logo__mark{
      width:56px;
      height:56px;
      flex-shrink:0;
    }

    .logo__title{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }

    .logo__brand{
      font-weight:700;
      font-size:22px;
      letter-spacing:0.5px;
      display:flex;
      align-items:baseline;
      gap:4px;
      color:var(--text);
    }

    .logo__brand .domain{
      color:var(--accent1);
    }

    .logo__tag{
      font-size:12px;
      color:var(--muted);
      margin-top:3px;
      font-weight:500;
    }
    .introduction{
    text-align: center;
    padding: var(--spacing-2xl);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    max-width: 1440px;
    margin: auto;
  }

    .row_content{
    padding: var(--spacing-2xl);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    max-width: 1440px;
    margin: auto;
    }
      .arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s;
  }
  .content {
    display: none;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #ddd;
  }
  .open .arrow {
    transform: rotate(180deg);
  }
  #toggleBtn{
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), #311f44);
    border: 1px solid #ccc;
    padding: 12px 8px;
    border-radius: 11px;
    color: #fff;
  }
  .bak_youtube{
    background: linear-gradient(135deg, #e90e0e, #b91010);
  }
    .bak_tiktok{
        background: linear-gradient(135deg, #0e0f0f, #000000);
  }
    .bak_tw{
        background: linear-gradient(135deg, #0e0f0f, #000000);
  }
    .bak_instagram{
    background: linear-gradient(135deg, #870ee9, #b91010);
  }
    .bak_facebook{
        background: linear-gradient(135deg, #1877F2, #1877F2);
  }
  .bak_pinterest{background: linear-gradient(135deg, #e60023, #e60023);}