*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
    body{background:#0f0f1a;color:#fff}

    /* Header */
    .header{
      position:sticky;
      top:0;
      z-index:1000;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:10px 15px;
      background:#151528;
      border-bottom:1px solid #222;
    }

    .logo{
      font-size:20px;
      font-weight:600;
      color:#ff4d6d;
    }

    .search{
      font-size:20px;
      cursor:pointer;
    }

    .container{padding-bottom:70px}

    /* Banner */
    .banner{
      display:flex;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
    }
    .banner img{
      width:100%;
      height:180px;
      object-fit:cover;
      border-radius:12px;
      margin:10px;
      scroll-snap-align:center;
    }

    /* Section */
    .section{padding:10px}
    .section h2{
      margin-bottom:10px;
      font-size:18px;
      color:#ff4d6d;
    }

    .card-list{
      display:flex;
      overflow-x:auto;
    }

    .card{
      min-width:110px;
      margin-right:10px;
    }

    .card img{
      width:100%;
      height:150px;
      border-radius:10px;
      object-fit:cover;
    }

    .card p{
      font-size:12px;
      margin-top:5px;
    }

    /* Footer */
    .footer{
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
      height:60px;
      background:#151528;
      display:flex;
      justify-content:space-around;
      align-items:center;
      border-top:1px solid #222;
    }

    .footer div{
      text-align:center;
      font-size:12px;
      color:#aaa;
    }

    .footer div.active{
      color:#ff4d6d;
    }

/* Bio */
.author-bio{
  margin-top:10px;
  padding:10px;
  background:#141427;
  border-radius:10px;
  font-size:13px;
  color:#ccc;
}

/* Tabs */
.author-tabs{
  display:flex;
  justify-content:center;
  margin-top:15px;
  gap:10px;
}

.tab-btn{
  padding:6px 14px;
  background:#1f1f35;
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
  transition:0.3s;
}

.tab-btn.active{
  background:#ff4d6d;
}

/* Nội dung tab */
.tab-content{
  display:none;
  margin-top:15px;
}

.tab-content.active{
  display:block;
}
/* Chapter*/
.card{
  position: relative;
}

.chapter-label{
  position:absolute;
  bottom:35px; /* 👈 đổi chỗ này */
  left:6px;
  background:rgba(0,0,0,0.7);
  padding:3px 8px;
  font-size:11px;
  border-radius:6px;
  color:#fff;
}


/* Nút bên */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.section-header h2{
  margin:0;
  font-size:18px;
  color:#ff4d6d;
  flex:1; /* 🔥 cho h2 co lại, không chiếm full ngang */
}

.view-all{
  font-size:13px;
  color:#aaa;
  text-decoration:none;
  white-space:nowrap; /* 🔥 không bị xuống dòng */
}

.view-all:hover{
  color:#ff4d6d;
}
.section-header{
  display:flex !important;
}

/* Author Page */
.author-box{
  margin:20px;
  padding:20px;
  background:#1a1a2e;
  border-radius:16px;
  text-align:center;
  box-shadow:0 0 20px rgba(0,0,0,0.3);
}

.author-avatar{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #ff4d6d;
  margin-bottom:10px;
}

.author-name{
  font-size:18px;
  margin-bottom:10px;
  color:#fff;
}

.author-social{
  display:flex;
  justify-content:center;
  gap:10px;
}

.social{
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  transition:0.3s;
}

.social.tiktok{
  background:#000;
}

.social.facebook{
  background:#1877f2;
}

.social:hover{
  opacity:0.8;
}

/* Grid truyện trong tab */
.tab-content .card-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* 2 truyện 1 hàng */
  gap:12px;
  justify-content:center;
}

/* Card truyện */
.tab-content .card{
  width:100%;
  text-align:center;
}

/* Ảnh bìa dọc */
.tab-content .card img{
  width:100%;
  height:180px; /* 👈 bìa dọc */
  object-fit:cover;
  border-radius:10px;
}

/* Tên truyện */
.tab-content .card p{
  margin-top:6px;
  font-size:13px;
}

.tab-content .card img:hover{
  transform:scale(1.05);
  transition:0.3s;
}
.author-count{
  text-align:center;
  margin-top:10px;
  font-size:13px;
  color:#aaa;
}

.author-count span{
  font-weight:600;
  color:#ff4d6d; /* nổi bật */
}

/* Đầu Trang */

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;

  background:#1a1a2a; /* tím đen nhẹ cho hợp Vilyer */
  color:#fff;

  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(10px);
}

.header .title{
  font-weight:800;
  font-size:18px;
  letter-spacing:1px;
  color:#ff4d6d; /* hồng chủ đạo Vilyer */
}

.header .left,
.header .right div{
  cursor:pointer;
  font-size:20px;
}

.header .title{
  font-weight:700;
  font-size:18px;
  letter-spacing:1px;
}

.header .right{
  display:flex;
  gap:12px;
}


/* Nội dung share*/


   .share-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  justify-content:center;
  align-items:center;
}

.share-box{
  background:#1c1c1c;
  padding:20px;
  border-radius:12px;
  width:260px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:center;
}

.share-box button{
  padding:10px;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.share-box .close{
  background:red;
  color:#fff;
}


/* Theo doi */

.author-id{
  font-size:11px;
  color:#888;
  letter-spacing:0.5px;
}

 
   .author-follow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;   /* giảm khoảng cách */
  gap:10px;
}

.author-follow span{
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
}

.author-follow b{
  color:#ff4d6d;
  font-weight:700;
}

.author-follow button{
  padding:6px 12px;
  border:none;
  border-radius:20px; /* bo tròn cho đẹp */
  cursor:pointer;

  background:#ff4d6d;
  color:white;
  font-size:13px;

  transition:0.2s;
}

.author-follow button:hover{
  transform:scale(1.05);
}


.author-follow-wrap{
  margin-top:10px;
  text-align:center;
}

/* số follow nằm giữa */
.follow-center{
  font-size:14px;
  margin-bottom:8px;
}

.follow-center b{
  color:#ff4d6d;
}

/* 2 nút dưới */
.follow-actions{
  display:flex;
  justify-content:center;
  gap:10px;
}

/* nút theo dõi giữ nguyên style cũ */
#followBtn{
  padding:6px 14px;
  border:none;
  border-radius:20px;
  background:#ff4d6d;
  color:#fff;
  cursor:pointer;
}

/* nút tặng quà */
.gift-btn{
  padding:6px 14px;
  border:none;
  border-radius:20px;
  background:#ffcc00;
  color:#000;
  cursor:pointer;
}

/* quà tặng */


   .gift-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  justify-content:center;
  align-items:center;
}

.gift-box{
  width:320px;
  background:#1c1c1c;
  padding:15px;
  border-radius:12px;
  position:relative;
  color:#fff;
}

.gift-close{
  position:absolute;
  top:8px;
  right:10px;
  cursor:pointer;
  font-size:18px;
}

.gift-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:10px;
}

.gift-item{
  text-align:center;
  font-size:12px;
}

.gift-item img{
  width:40px;
  height:40px;
}

/* nút tặng quà */
.send-gift{
  position:absolute;
  bottom:10px;
  right:10px;
  padding:6px 12px;
  border:none;
  border-radius:8px;
  background:#ff4d6d;
  color:#fff;
  cursor:pointer;
}



.gift-box{
  width:340px;      /* dài hơn */
  background:#1c1c1c;
  padding:15px;
  border-radius:12px;
  position:relative;
  color:#fff;
}

/* header trên cùng */
.gift-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.gift-coins{
  font-size:13px;
  color:#ffd700;
}

.gift-close{
  cursor:pointer;
  font-size:18px;
}

/* grid quà */
.gift-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:10px;
  margin-bottom:45px; /* chừa chỗ cho nút tặng */
}

.gift-item{
  text-align:center;
  font-size:12px;
  cursor:pointer;
  padding:6px;
  border-radius:10px;
}

.gift-item:hover{
  background:#2a2a2a;
}

.gift-item img{
  width:40px;
  height:40px;
}

/* nút tặng quà không bị đè chữ */
.send-gift{
  position:absolute;
  bottom:10px;
  right:10px;
  padding:7px 14px;
  border:none;
  border-radius:8px;
  background:#ff4d6d;
  color:#fff;
  cursor:pointer;
}


  .author-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* khối avatar + info */
.author-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin-top:15px;
}

/* avatar to hơn */
.author-avatar{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #ff4d6d;
  box-shadow:0 0 15px rgba(255,77,109,0.4);
}

/* info bên phải avatar */
.author-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.author-name{
  font-size:22px;
  font-weight:800;
  margin:0;
}

.author-id{
  font-size:13px;
  color:#888;
  margin-top:4px;
}