/* Bố cục trang chủ web. Màu/chữ/bo góc lấy từ brand.css, không đặt mã màu mới ở đây. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--body)}
a{color:inherit}
img{display:block;max-width:100%}

/* thanh đầu */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:var(--s5);padding:12px 20px}
.nav{display:flex;gap:var(--s4);font:600 14px var(--head);color:var(--mute)}
.nav a{text-decoration:none}
.nav a.on{color:var(--ink)}
.top .sp{flex:1}
.credit{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--card);font:700 14px var(--head)}
.gem{width:12px;height:12px;transform:rotate(45deg);background:var(--sys);border-radius:3px}
.top .btn{min-height:40px;padding:9px 16px;font-size:14px}

main{max-width:1280px;margin:0 auto;padding:0 20px 64px}

/* hero: truyện nổi bật */
.hero{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s5);padding:var(--s5);border-radius:24px;background:var(--bg2);border:1px solid var(--line);align-items:center}
.hero .cv{width:220px;aspect-ratio:640/935;border-radius:var(--r-card);overflow:hidden;justify-self:center;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.hero .cv img{width:100%;height:100%;object-fit:cover}
.hero .kick{font:700 12px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--green-d)}
.hero h1{font:400 44px/1.02 var(--logo-title);letter-spacing:.01em;text-transform:uppercase;margin:8px 0 12px}
.hero p{color:var(--mute);font-size:16px;line-height:1.55;max-width:56ch}
.hero .tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.pill{font:700 11px var(--body);padding:4px 9px;border-radius:999px;background:var(--card);color:var(--mute)}
.hero .acts{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:820px){
  .hero{grid-template-columns:1fr 280px;padding:40px 48px}
  .hero .cv{width:280px;order:2}
  .hero h1{font-size:64px}
}

/* hàng chip thể loại */
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:28px -20px 8px;padding:0 20px}
.cats::-webkit-scrollbar{display:none}

/* kệ truyện */
.shelf{margin-top:32px}
.shelf .hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.shelf h2{font:700 20px var(--head);letter-spacing:-.01em}
.shelf .note{color:var(--mute);font-size:13px;margin-top:2px}
.shelf .all{font:600 13px var(--head);color:var(--mute);text-decoration:none;white-space:nowrap}
.row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px}
.row::-webkit-scrollbar{display:none}
.card{flex:none;width:150px;scroll-snap-align:start;text-decoration:none}
@media (min-width:820px){.card{width:180px}}
.card .cover{position:relative;aspect-ratio:640/935;border-radius:var(--r-card);overflow:hidden;background:var(--card)}
.card .cover img{width:100%;height:100%;object-fit:cover}
.card .cover .tag{position:absolute;left:8px;top:8px}
.card .cover .num{position:absolute;left:8px;bottom:6px;font:400 40px/1 var(--logo-title);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
/* bìa chữ khi truyện chưa có ảnh: chỉ dùng màu brand */
.card .cover.txt{display:flex;align-items:flex-end;padding:12px;background:linear-gradient(160deg,var(--ink) 0%,#2a2d31 100%)}
.card .cover.txt span{font:400 21px/1.05 var(--logo-title);color:#fff;text-transform:uppercase}
.card .cover.txt::after{content:"";position:absolute;right:10px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--green)}
.card h3{font:600 14px/1.3 var(--head);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{color:var(--dim);font-size:12px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* dải quảng bá giữa kệ */
.promo{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-radius:var(--r-panel);background:var(--ink);color:var(--bg)}
.promo b{font:700 16px var(--head)}
.promo span{display:block;color:var(--dim);font-size:13px;margin-top:3px}

/* tải app */
.get{margin-top:56px;padding:40px 24px;border-radius:24px;background:var(--bg2);border:1px solid var(--line);text-align:center}
.get h2{font:700 28px/1.2 var(--head);letter-spacing:-.02em}
.get p{color:var(--mute);margin:10px auto 22px;max-width:46ch;line-height:1.5}
.stores{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.store{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px;border-radius:12px;background:var(--ink);color:var(--bg);text-decoration:none;text-align:left}
.store svg{width:22px;height:22px;fill:currentColor}
.store small{display:block;font-size:10px;opacity:.75}
.store b{font:700 16px var(--head)}
.fake{font-size:11px;color:var(--dim);margin-top:12px}

footer{border-top:1px solid var(--line);margin-top:48px}
footer .in{max-width:1280px;margin:0 auto;padding:24px 20px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:var(--dim);font-size:13px}

@media (max-width:640px){
  .nav{display:none}
  .hero h1{font-size:40px}
  .top .credit{display:none}
}

/* chống tràn ngang trên điện thoại */
html,body{overflow-x:clip}
.hero>*,.shelf .hd>div{min-width:0}
.promo{flex-wrap:wrap}
.hero p{overflow-wrap:anywhere}