* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Nunito", Arial, sans-serif;
  background: #f9f2f8;
  color: #4f4150;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

/* HEADER */

.header {
  display: grid;
  grid-template-columns: 360px 1fr 260px;
  align-items: center;
  gap: 24px;
  padding: 14px 5%;
  background: #fff7fc;
  border-bottom: 1px solid #ead5e4;
  box-shadow: 0 6px 22px rgba(185, 111, 163, .08);
}

.logo {
  font-family: "Great Vibes", cursive;
  font-size: 36px;
  color: #c77fb1;
  white-space: nowrap;
  line-height: 1;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}

.menu a,
.dropbtn {
  color: #6b5268;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  font-family: "Nunito", sans-serif;
}

.menu a:hover,
.dropbtn:hover {
  color: #c975ad;
}

.dropdown {
  position: relative;
}

.dropbtn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  min-width: 210px;
  background: #fffafd;
  border: 1px solid #ead5e4;
  border-radius: 12px;
  overflow: hidden;
  z-index: 999;
  box-shadow: 0 14px 30px rgba(185, 111, 163, .18);
}

.dropdown-content a {
  display: block;
  padding: 12px 15px;
  font-size: 15px;
}

.dropdown-content a:hover {
  background: #f7eaf3;
  color: #b96fa3;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.search-wrap input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid #ead5e4;
  background: #fffafd;
  color: #4f4150;
  font-weight: 700;
}

.search-wrap input::placeholder {
  color: #a88fa1;
}

/* HERO SLIDER */

.hero {
  padding: 34px 5%;
  background: linear-gradient(135deg, #fff8fc, #f3e8f1);
}

.full-slider {
  width: 100%;
  height: 470px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #ead5e4;
  background: #fffafd;
  box-shadow: 0 18px 45px rgba(185, 111, 163, .16);
}

.hero-slider {
  position: relative;
}

.hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .55s ease;
}

.hero-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  display: block;
  color: white;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px) brightness(.76);
  transform: scale(1.08);
  opacity: .95;
  z-index: 0;
}

.hero-poster {
  position: absolute;
  right: 140px;
  bottom: 35px;
  width: 300px;
  height: 410px;
  object-fit: cover;
  border-radius: 18px;
  z-index: 2;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(68, 39, 61, .92),
    rgba(90, 55, 82, .62),
    rgba(185, 111, 163, .18)
  );
}

.hero-slide-info {
  position: absolute;
  left: 60px;
  bottom: 55px;
  z-index: 3;
  max-width: 44%;
}

.hero-slide-info span {
  display: inline-block;
  background: #f4b8d6;
  color: #4f4150;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 12px;
}

.hero-slide-info h2 {
  font-family: "Playfair Display", serif;
  color: white;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 50px;
  line-height: 1.12;
  font-weight: 800;
}

.hero-slide-info p {
  font-size: 22px;
  margin: 0;
  color: #fff3fa;
  font-weight: 700;
}

.hero-dots {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.hero-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d4b7ca;
}

.hero-dots span.active {
  background: #f4b8d6;
}

/* LAYOUT */

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 30px 6%;
}

section {
  margin-bottom: 42px;
}

h2 {
  font-family: "Playfair Display", serif;
  color: #b96fa3;
  border-bottom: 1px solid #ead5e4;
  padding-bottom: 10px;
  margin-bottom: 22px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* CARD TRUYỆN */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 220px);
  gap: 24px;
  align-items: start;
}

.card {
  width: 220px;
  background: #ffffff;
  border: 1px solid #ead5e4;
  border-radius: 16px;
  overflow: hidden;
  transition: .25s ease;
  box-shadow: 0 10px 25px rgba(185, 111, 163, .10);
}

.card:hover {
  transform: translateY(-4px);
  border-color: #d88ac0;
  box-shadow: 0 16px 35px rgba(216, 138, 192, .22);
}

.cover {
  height: 220px;
  background: linear-gradient(135deg, #f7eaf3, #ead5e4);
  overflow: hidden;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  padding: 13px;
  min-height: 150px;
}

.info h3 {
  font-family: "Playfair Display", serif;
  margin: 0 0 9px;
  font-size: 22px;
  line-height: 1.25;
  color: #5b4258;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta {
  color: #8a7686;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

/* ASIDE */

aside {
  background: #ffffff;
  border: 1px solid #ead5e4;
  border-radius: 14px;
  padding: 18px;
  height: fit-content;
  box-shadow: 0 10px 25px rgba(185, 111, 163, .10);
}

aside h3 {
  font-family: "Playfair Display", serif;
  color: #b96fa3;
  font-size: 30px;
  font-weight: 800;
  margin-top: 0;
}

aside ul {
  padding: 0;
  list-style: none;
}

aside li {
  padding: 10px 0;
  border-bottom: 1px solid #ead5e4;
  font-size: 15px;
  line-height: 1.45;
  color: #6b5268;
  font-weight: 700;
}

footer {
  text-align: center;
  padding: 25px;
  border-top: 1px solid #ead5e4;
  color: #8a7686;
  background: #fff7fc;
  font-weight: 700;
}

/* FORM / ADMIN / STORY */

.detail,
.reader,
.admin {
  max-width: 1100px;
  margin: auto;
  padding: 35px 6%;
}

.story-box,
.admin-box {
  background: #ffffff;
  border: 1px solid #ead5e4;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(185, 111, 163, .10);
}

.story-box h1,
.admin-box h1,
.reader h1,
.detail h1 {
  font-family: "Playfair Display", serif;
  color: #5b4258;
  font-weight: 800;
}

.chapter-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #ead5e4;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 10px;
  color: #4f4150;
  font-weight: 800;
}

.chapter-row:hover {
  border-color: #d88ac0;
  box-shadow: 0 8px 22px rgba(216, 138, 192, .15);
}

form {
  display: grid;
  gap: 12px;
}

input,
select,
textarea {
  padding: 12px;
  background: #fffafd;
  border: 1px solid #ead5e4;
  border-radius: 10px;
  color: #4f4150;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
}

textarea {
  min-height: 130px;
}

.admin-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #fffafd;
  border: 1px solid #ead5e4;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 10px;
}

button {
  background: #d88ac0;
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 20px;
  font-weight: 800;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
}

button:hover {
  background: #c975ad;
}

.delete-btn {
  background: #e7798f;
  color: white;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
  .header {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px;
  }

  .logo {
    text-align: center;
    font-size: 34px;
  }

  .menu {
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
  }

  .search-wrap input {
    max-width: 520px;
    margin: auto;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  aside {
    display: none;
  }

  .full-slider {
    height: 330px;
  }

  .hero-poster {
    width: 220px;
    height: 320px;
    right: 60px;
    bottom: 20px;
  }

  .hero-slide-info {
    max-width: 50%;
  }

  .hero-slide-info h2 {
    font-size: 36px;
  }
}

@media (max-width:650px) {
  .header {
    padding: 10px 16px;
    gap: 8px;
  }

  .logo {
    font-size: 26px;
    margin-bottom: 2px;
  }

  .menu {
    gap: 10px;
  }

  .menu a,
  .dropbtn {
    font-size: 14px;
  }

  .search-wrap input {
    padding: 10px 14px;
  }

  .dropdown-content {
    left: 50%;
    transform: translateX(-50%);
  }

  .hero {
    padding: 10px 4% 14px;
  }

  .full-slider {
    height: 180px;
    border-radius: 16px;
  }

  .hero-slide-info {
    left: 16px;
    bottom: 14px;
    max-width: 58%;
  }

  .hero-slide-info span {
    font-size: 10px;
    padding: 4px 8px;
    margin-bottom: 6px;
  }

  .hero-slide-info h2 {
    font-size: 20px !important;
    line-height: 1.15;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-slide-info p {
    font-size: 12px !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-poster {
    width: 82px;
    height: 118px;
    right: 12px;
    bottom: 12px;
    border-radius: 10px;
  }

  .layout {
    padding: 20px 4%;
  }

  h2 {
    font-size: 28px;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .card {
    width: 100%;
    border-radius: 14px;
  }

  .cover {
    height: 150px;
  }

  .info {
    min-height: 135px;
    padding: 10px;
  }

  .info h3 {
    font-size: 18px;
  }

  .meta {
    font-size: 12px;
  }
}

@media (max-width:390px) {
  .full-slider {
    height: 170px;
  }

  .hero-slide-info {
    max-width: 55%;
  }

  .hero-slide-info h2 {
    font-size: 18px !important;
  }

  .hero-slide-info p {
    font-size: 11px !important;
  }

  .hero-poster {
    width: 75px;
    height: 108px;
  }
}

/* ===== FIX STORY + CHAPTER PAGE PASTEL ===== */

.reader,
.detail,
.admin {
  background: #f9f2f8;
  color: #4f4150;
}

.reader .story-box,
.reader-box,
.chapter-content,
#chapterContent,
.detail .story-box,
.story-box,
.story-header-layout,
.story-description,
.admin-box {
  background: #ffffff !important;
  color: #4f4150 !important;
  border: 1px solid #ead5e4 !important;
  box-shadow: 0 10px 28px rgba(185,111,163,.12);
}

#chapterTitle,
.reader h1,
.detail h1,
.story-box h1 {
  color: #b96fa3 !important;
}

#storyName {
  color: #8e6b91 !important;
}

#chapterContent p,
.story-description p {
  color: #4f4150 !important;
}

.chapter-row {
  background: #ffffff !important;
  color: #4f4150 !important;
  border: 1px solid #ead5e4 !important;
}

.chapter-row:hover {
  border-color: #d88ac0 !important;
}

.read-first-btn {
  background: #d88ac0 !important;
  color: #fff !important;
}

.header {
  background: #fff7fc !important;
}

body {
  background: #f9f2f8 !important;
}

/* ===== FIX TRANG ĐỌC CHƯƠNG SANG HỒNG PASTEL ===== */

body {
  background: #f9f2f8 !important;
  color: #4f4150 !important;
}

.header {
  background: #fff7fc !important;
  border-bottom: 1px solid #ead5e4 !important;
}

.reader,
.chapter-page,
.chapter-container {
  background: #f9f2f8 !important;
  color: #4f4150 !important;
}

.reader-box,
.chapter-box,
.chapter-content,
#chapterContent,
.reader .story-box {
  background: #ffffff !important;
  color: #4f4150 !important;
  border: 1px solid #ead5e4 !important;
  box-shadow: 0 10px 28px rgba(185,111,163,.12) !important;
}

.reader h1,
#chapterTitle {
  color: #b96fa3 !important;
}

#storyName,
.reader h2,
.reader h3 {
  color: #8e6b91 !important;
}

#chapterContent,
.chapter-content {
  font-family: "Noto Serif", Georgia, serif !important;

  font-size: 25px !important;
  line-height: 2.15 !important;

  color: #2a2130 !important;
  font-weight: 800 !important;

  text-align: justify !important;
  text-justify: inter-word !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

#chapterContent p,
.chapter-content p {
  margin: 0 0 28px !important;

  color: #2a2130 !important;
  font-weight: 800 !important;

  text-align: justify !important;
  text-justify: inter-word !important;

  text-indent: 0 !important;
}

.prev-btn,
.next-btn,
.reader button,
.chapter-nav a {
  background: #d88ac0 !important;
  color: #fff !important;
}

.logo {
  color: #c77fb1 !important;
}

.header a {
  color: #6b5268 !important;
}

/* ===== FIX PHẦN CÓ THỂ BẠN QUAN TÂM ===== */

.recommend-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 170px);
  gap: 22px;
  align-items: start;
}

.recommend-card,
.related-card {
  display: flex;
  flex-direction: column;
  width: 170px;
}

.recommend-card img,
.related-card img {
  width: 170px;
  height: 230px;
  object-fit: cover;
  border-radius: 10px;
  border: 6px solid #1b2b45;
}

.recommend-card h3,
.related-card h3 {
  min-height: 46px;
  margin: 10px 0 4px;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  color: #5b4258 !important;
}

.recommend-card p,
.related-card p,
.recommend-card .meta,
.related-card .meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #8a7686 !important;
}

@media (max-width: 650px) {
  .recommend-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .recommend-card,
  .related-card {
    width: 100%;
  }

  .recommend-card img,
  .related-card img {
    width: 100%;
    height: 210px;
  }
}

/* ===== FIX MOBILE STORY DETAIL ===== */

@media (max-width: 650px) {
  .detail {
    padding: 16px 14px !important;
    max-width: 100% !important;
  }

  .story-box {
    padding: 16px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .story-header-layout,
  .story-detail-layout {
    display: block !important;
  }

  .story-cover,
  .story-cover img,
  .story-box img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
  }

  .story-box h1,
  #storyTitle {
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: #b96fa3 !important;
    font-weight: 800 !important;
    margin: 18px 0 12px !important;
  }

  .story-box .meta,
  #storyAuthor,
  #storyGenre,
  .story-meta {
    color: #5b4258 !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .story-description,
  #storyDescription {
    padding: 0 !important;
    margin-top: 18px !important;
    border: none !important;
  }

  .story-description p,
  #storyDescription p,
  .story-description {
    font-size: 20px !important;
    line-height: 1.8 !important;
    color: #3b2f3f !important;
    font-weight: 700 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* ===== CHƯƠNG ĐỌC DỄ HƠN ===== */

#chapterTitle {
  color: #9d4d87 !important;
  font-weight: 900 !important;
  font-size: 56px !important;
  line-height: 1.2 !important;
}

#storyName {
  color: #6f4c67 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

@media (max-width:650px){

  #chapterTitle{
    font-size:34px !important;
  }

  #storyName{
    font-size:18px !important;
  }

  #chapterContent,
  .chapter-content{
    font-size:22px !important;
    line-height:2.05 !important;
  }
}

/* ===== FIX CHỮ MỜ TRÊN IPHONE ===== */

@media (max-width: 768px) {

  .chapter-content,
  .chapter-content p {

    font-family: Georgia, "Times New Roman", serif !important;

    color: #2f2433 !important;

    font-weight: 700 !important;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    letter-spacing: 0 !important;

    text-shadow:
      0 0 .2px rgba(47,36,51,.35);
  }

  .chapter-title{
    font-weight: 900 !important;
    color:#bc79ad !important;
  }

  .chapter-book{
    font-weight:800 !important;
    color:#7d5f83 !important;
  }

}

.comment-section {
  margin-top: 42px;
  background: #ffffff;
  border: 1px solid #ead5e4;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 28px rgba(185,111,163,.12);
}

.comment-section h2 {
  color: #b96fa3;
  font-weight: 900;
}

.comment-form {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.comment-form input,
.comment-form textarea {
  background: #fffafd;
  border: 1px solid #ead5e4;
  color: #2f2433;
  font-weight: 700;
}

.comment-form textarea {
  min-height: 110px;
}

.comment-item {
  border-top: 1px solid #ead5e4;
  padding: 16px 0;
}

.comment-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #5b4258;
}

.comment-head b {
  font-weight: 900;
}

.comment-head span {
  color: #9a8193;
  font-size: 13px;
}

.comment-item p {
  color: #2f2433;
  font-weight: 700;
  line-height: 1.7;
}

.comment-delete {
  background: #e7798f;
  color: #fff;
  margin-top: 8px;
}

.comment-section{
  margin-top:50px;
}

.comment-section h2{
  color:#c67ab1;
  margin-bottom:20px;
}

.comment-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.comment-form input,
.comment-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #e6c7da;
  border-radius:12px;
  padding:12px;
  font-size:15px;
}

.comment-form textarea{
  min-height:120px;
  resize:vertical;
}

.comment-form button{
  width:180px;
  border:none;
  border-radius:999px;
  background:#d88ac0;
  color:#fff;
  font-weight:800;
  padding:12px;
  cursor:pointer;
}

.comment-item{
  background:#fff;
  border:1px solid #ecd2e1;
  border-radius:12px;
  padding:15px;
  margin-top:15px;
}

.comment-name{
  font-weight:800;
  color:#b96fa3;
}

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

.comment-content{
  margin-top:10px;
  line-height:1.7;
}