/* Theme Name: HuyDev Theme - TruyenChu Theme URI: https://huydev.com Author: HuyDev Description: Theme WordPress đọc truyện chữ, viết thuần tay theo convention HuyDev (PHP thuần + ACF + CSS float + jQuery). Version: 1.0 Text Domain: huydev */ @media screen{ /* * RESET & BASE. */ *{margin: 0px; padding: 0px;} img{max-width: 100%; display: block; border: 0px; height: auto;} a{text-decoration: none; color: inherit; transition: color .2s;} ul,li{list-style: none;} /* line-height vốn kế thừa, nhưng khai báo tường minh cho h1-h6 để tiêu đề không bao giờ * rơi về "normal" của UA stylesheet. Muốn tiêu đề bó sát thì override riêng ở từng block. */ h1,h2,h3,h4,h5,h6{line-height: var(--th-lh-base);} input,button,textarea,select{font-family: inherit; outline: none; border: 0px; background: none;} button{cursor: pointer;} ::-webkit-scrollbar{height: 8px; width: 8px;} ::-webkit-scrollbar-thumb{background: var(--th-color-line); border-radius: 8px;} :root{ --th-color-bg: #0f0e15; --th-color-surface: #17151f; --th-color-surface-2: #211e2c; --th-color-line: #322e40; --th-color-text: #efecf5; --th-color-text-2: #a29bb2; --th-color-main: #f5b942; --th-color-main-2: #ff8a3d; --th-color-full: #35c39a; --th-grad: linear-gradient(135deg, #f7c24a 0%, #ff7a2d 100%); /* BADGE trên bìa. Quầng sáng ĐÚNG MÀU của chip (thay bóng đen trung tính) để chip nhấc hẳn khỏi * ảnh bìa — cùng cách diễn tả độ cao mà --th-card-glow đang dùng. Vẫn giữ một tầng bóng đen mỏng * làm chân đế, vì bìa truyện có thể sáng trắng và lúc đó quầng màu một mình là không đủ. */ --th-full-grad: linear-gradient(135deg, #7df3cb 0%, #23cd99 46%, #0b9a78 100%); --th-full-txt: #04241a; --th-full-glow: 0px 7px 20px rgba(20,190,140,.52), 0px 2px 6px rgba(0,0,0,.40); --th-hot-glow: 0px 7px 20px rgba(255,122,45,.50), 0px 2px 6px rgba(0,0,0,.40); /* Tick vẽ bằng mask + currentColor: không phụ thuộc font có glyph ✓ hay không, và tự đổi màu * theo chữ của chip nên chỉ cần khai một lần cho cả 2 tông. */ --th-ico-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 3.9 11.95l1.75-1.75 3.9 3.9 8.8-8.8 1.75 1.75z'/%3E%3C/svg%3E"); --th-header-bg: rgba(15,14,21,.72); --th-shadow: 0px 18px 50px rgba(0,0,0,.45); --th-font-main: 'Open Sans', sans-serif; --th-font-serif: 'Lora', serif; --th-lh-base: 1.5; --th-cover-ratio: 142%; /* CHẤT LIỆU DÙNG CHUNG. Hero là nơi dùng đầu tiên nhưng cả trang chủ đi theo bộ này: * glass = mặt kính của thẻ/pill, accent = cụm màu nhấn, r = thang bo góc. */ --th-glass: rgba(255,255,255,.05); --th-glass-2: rgba(255,255,255,.11); --th-glass-line: rgba(255,255,255,.14); --th-accent-bg: rgba(245,185,66,.14); --th-accent-line: rgba(245,185,66,.34); --th-accent-txt: var(--th-color-main); --th-accent-shadow: 0px 12px 26px rgba(245,150,50,.22); /* Nền tối thì bóng đen vô hình → dùng quầng sáng màu thương hiệu để diễn tả độ cao. */ --th-card-glow: 0px 14px 30px rgba(255,122,45,.30); --th-r-lg: 16px; --th-r-md: 14px; --th-r-sm: 10px; --th-r-xs: 7px; /* HERO — gom riêng để 2 tông tự đổi, KHÔNG hardcode màu trong block .hero. */ --th-hero-bg-op: .58; --th-hero-aurora-op: .5; --th-hero-aurora-blend: screen; --th-hero-scrim: linear-gradient(100deg, rgba(12,11,18,.95) 0%, rgba(12,11,18,.86) 42%, rgba(12,11,18,.38) 74%, rgba(12,11,18,.68) 100%); --th-hero-fade: linear-gradient(180deg, rgba(12,11,18,.82) 0%, rgba(12,11,18,.15) 38%, var(--th-color-bg) 99%); /* Trỏ về bộ dùng chung ở trên — giữ tên cũ để toàn bộ block .hero không phải viết lại. */ --th-hero-line: var(--th-glass-line); --th-hero-pill-bg: var(--th-accent-bg); --th-hero-pill-line: var(--th-accent-line); --th-hero-surface: var(--th-glass); --th-hero-surface-2: var(--th-glass-2); --th-hero-accent-txt: var(--th-accent-txt); --th-hero-tag-bg: rgba(255,255,255,.08); --th-title-grad: linear-gradient(105deg, #f7c24a 0%, #ff8a3d 58%, #ff6a35 100%); --th-hero-title-shadow: 0px 3px 30px rgba(0,0,0,.6); --th-hero-cover-shadow: 0px 34px 74px rgba(0,0,0,.62), 0px 0px 0px 1px rgba(255,255,255,.1); } html.light-mode{ --th-color-bg: #f5f4fa; --th-color-surface: #ffffff; --th-color-surface-2: #eeecf6; --th-color-line: #e4e0ee; --th-color-text: #1a1726; --th-color-text-2: #6b6480; --th-color-main: #e08600; --th-color-main-2: #ff7a2d; --th-header-bg: rgba(255,255,255,.78); --th-shadow: 0px 18px 45px rgba(30,20,60,.12); /* HERO tông sáng: hạ opacity ảnh nền + scrim trắng để chữ đậm luôn đủ tương phản. */ --th-hero-bg-op: .40; --th-hero-aurora-op: .34; --th-hero-aurora-blend: multiply; --th-hero-scrim: linear-gradient(100deg, rgba(250,249,253,.96) 0%, rgba(250,249,253,.90) 42%, rgba(250,249,253,.52) 74%, rgba(250,249,253,.76) 100%); --th-hero-fade: linear-gradient(180deg, rgba(250,249,253,.62) 0%, rgba(250,249,253,.18) 38%, var(--th-color-bg) 99%); --th-glass: rgba(255,255,255,.62); --th-glass-2: rgba(255,255,255,.96); --th-glass-line: rgba(26,23,38,.13); --th-accent-bg: rgba(224,134,0,.13); --th-accent-line: rgba(224,134,0,.32); --th-accent-shadow: 0px 12px 26px rgba(224,134,0,.18); /* Nền sáng thì ngược lại: bóng tối trung tính đọc ra "nhấc lên" rõ hơn quầng màu. */ --th-card-glow: 0px 14px 28px rgba(40,26,80,.26); /* Chip vẫn nằm trên ảnh bìa nên gradient giữ nguyên; chỉ hạ quầng màu và tăng phần bóng trung * tính, vì trên nền trang sáng quầng màu mạnh đọc ra như vệt loang chứ không ra độ cao. */ --th-full-glow: 0px 6px 16px rgba(11,154,120,.40), 0px 2px 6px rgba(30,20,60,.32); --th-hot-glow: 0px 6px 16px rgba(224,90,0,.38), 0px 2px 6px rgba(30,20,60,.32); --th-hero-tag-bg: rgba(255,255,255,.74); /* Chữ nhỏ in đậm màu nhấn: #e08600 trên nền sáng chỉ ~3.3:1, chưa đạt 4.5:1 → dùng bản đậm hơn. */ --th-accent-txt: #9c5b00; /* Tông sáng phải dùng dải đậm riêng: #f7c24a của --th-grad trên nền trắng chỉ ~1.9:1, chữ mất hút. * Dải này cho 4.5:1 trở lên ở cả 3 điểm dừng nên tiêu đề hover vẫn đọc rõ. */ --th-title-grad: linear-gradient(105deg, #b06a00 0%, #c9500f 58%, #c0390c 100%); --th-hero-title-shadow: 0px 2px 22px rgba(255,255,255,.7); --th-hero-cover-shadow: 0px 30px 66px rgba(40,26,80,.26), 0px 0px 0px 1px rgba(255,255,255,.9); } body{ font-family: var(--th-font-main); font-size: 15px; font-weight: 400; line-height: var(--th-lh-base); letter-spacing: .1px; color: var(--th-color-text); background: var(--th-color-bg); transition: background .3s, color .3s; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* * UTILITY. */ .fleft{float: left;} .fright{float: right;} .cboth{clear: both;} .bsize{box-sizing: border-box;} .center{text-align: center;} .container{width: 1240px; max-width: 100%; margin: 0px auto; padding: 0px 20px; box-sizing: border-box;} .thumb-cover{position: relative; overflow: hidden; display: block; background: var(--th-color-surface-2);} .thumb-cover img{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover;} .thumb-zoom img{transition: transform .6s cubic-bezier(.2,.7,.3,1);} /* Zoom kích hoạt từ cả THẺ, không chỉ khi trỏ trúng bìa — rê vào tên truyện vẫn phản hồi. */ .thumb-zoom:hover img, .shelf-item:hover .thumb-zoom img, .truyen-col:hover .thumb-zoom img{transform: scale(1.07);} .empty-content{padding: 40px 0px; text-align: center; color: var(--th-color-text-2); font-size: 15px;} /* padding-top = chiều cao header cố định. * padding-bottom gom khoảng cách trước footer về MỘT chỗ: trước đây footer tự đeo margin-top 30px, * cộng thêm padding-bottom 48px của section cuối trên trang chủ thành 78px, trong khi trang archive * (không có .sec) chỉ được 30px. Nay mọi trang đều đúng 48px. */ .main{padding-top: 70px; padding-bottom: 48px;} /* Section cuối đã có padding-bottom riêng rồi nên bỏ đi, tránh cộng dồn thành 96px. */ .main > .sec:last-child{padding-bottom: 0px;} /* Trang đọc: .reader đã tự chừa 60px ở đáy. */ body.reading .main{padding-bottom: 0px;} /* * SECTION HEAD. */ .sec{padding: 48px 0px;} .sec-head{margin-bottom: 26px;} /* .sec-title phải float: là block chiếm trọn hàng thì mọi thứ float sau nó rơi xuống dòng dưới, * nên "Xem tất cả" / view-toggle / nút kệ đang thấp hơn tiêu đề. Chỉ dùng trong .sec-head. */ .sec-title{float: left; font-size: 30px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15;} /* MỘT font cho cả dòng: bỏ Lora nghiêng, phần nhấn phân biệt bằng màu gradient thay vì đổi kiểu chữ. * Fallback màu đặc cho trình duyệt không có background-clip: text (cùng khuôn với .brand-word em). */ .sec-title em{font-style: normal; font-weight: 800; color: var(--th-color-main);} @supports ((-webkit-background-clip: text) or (background-clip: text)){ .sec-title em{background: var(--th-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;} } /* Vạch chạy hết bề ngang tiêu đề rồi nhạt dần. Vạch cụt 52px cũ nằm lửng dưới chữ đầu, nhìn như * gạch chân hụt; .sec-title đang float nên width:100% chính là bề ngang chữ thật. */ .sec-title:after{content: ""; display: block; width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--th-color-main-2) 0%, rgba(255,122,45,0) 100%); margin-top: 10px;} .sec-more{float: right; margin-top: 13px; font-size: 14px; font-weight: 600; color: var(--th-color-text-2);} .sec-more:hover{color: var(--th-color-main);} .sec-more i{font-size: 11px; margin-left: 6px; transition: transform .2s;} .sec-more:hover i{transform: translateX(3px);} /* * BRAND / LOGO (truyenhh). * Markup sinh ở inc/brand.php. Không dùng flex (theo convention): .brand đặt font-size 0px * để triệt strut của dòng, nhờ đó vertical-align middle canh giữa mark + chữ chính xác tuyệt đối. */ .brand{display: block; font-size: 0px; color: var(--th-color-text);} .brand-mark{display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 13px; background: var(--th-grad); color: #17110a; box-shadow: 0px 8px 20px rgba(255,122,45,.30), inset 0px 0px 0px 1px rgba(255,255,255,.18); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;} .brand-glyph{display: block; width: 100%; height: 100%;} .brand-word{display: inline-block; vertical-align: middle; margin-left: 11px; font-size: 25px; font-weight: 800; line-height: 1.05; letter-spacing: -.7px;} .brand-word em{display: inline-block; font-style: normal; font-weight: 800; color: var(--th-color-main);} .brand-tag{display: block; margin-top: 4px; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 2.4px; text-transform: uppercase; color: var(--th-color-text-2);} .brand-img{display: inline-block; vertical-align: middle; max-height: 40px;} a.brand:hover .brand-mark{transform: translateY(-2px) rotate(-6deg); box-shadow: 0px 12px 26px rgba(255,122,45,.45), inset 0px 0px 0px 1px rgba(255,255,255,.28);} html.light-mode .brand-mark{box-shadow: 0px 8px 18px rgba(255,122,45,.24), inset 0px 0px 0px 1px rgba(255,255,255,.32);} html.light-mode a.brand:hover .brand-mark{box-shadow: 0px 12px 24px rgba(255,122,45,.34), inset 0px 0px 0px 1px rgba(255,255,255,.4);} /* "hh" tô gradient — trình duyệt cũ không hỗ trợ background-clip thì giữ nguyên màu main ở trên. */ @supports ((-webkit-background-clip: text) or (background-clip: text)){ .brand-word em{background: var(--th-grad); -webkit-background-clip: text; background-clip: text; color: transparent;} } /* * HEADER. */ /* THANH QUẢN TRỊ WORDPRESS. * WP đẩy xuống 32px để chừa chỗ cho #wpadminbar, nhưng phần tử position:fixed KHÔNG ăn theo * margin đó — nên header dán trên bị thanh quản trị đè lên, logo bị cắt mất nửa. Ai đăng nhập cũng * thấy thanh này (mặc định của WP, không riêng admin) nên lỗi chạm mọi thành viên. * Gom thành token để mấy khối fixed khác (menu mobile, thanh tìm kiếm) chỉ việc cộng vào. */ :root{--th-adminbar: 0px;} body.admin-bar{--th-adminbar: 32px;} .header{position: fixed; top: var(--th-adminbar); left: 0px; width: 100%; z-index: 100; background: var(--th-header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;} .header.is-stuck{border-bottom-color: var(--th-color-line);} .header-inner{height: 70px;} .header-logo{float: left; height: 70px; margin-right: 34px;} .header-logo .brand{line-height: 70px;} .header-nav{float: left; height: 70px;} .header-nav > ul > li{float: left; position: relative;} .header-nav > ul > li > a{display: block; height: 70px; line-height: 70px; padding: 0px 16px; font-weight: 600; color: var(--th-color-text);} .header-nav > ul > li > a i{font-size: 11px; margin-left: 6px; color: var(--th-color-text-2);} .header-nav > ul > li:hover > a{color: var(--th-color-main);} .header-nav .sub-menu{position: absolute; top: 78%; left: -10px; width: 470px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 14px; box-shadow: var(--th-shadow); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .22s; z-index: 60;} .header-nav > ul > li:hover .sub-menu{opacity: 1; visibility: visible; transform: translateY(0px);} .header-nav .sub-menu a{float: left; width: calc((100% - 20px) / 3); box-sizing: border-box; padding: 9px 12px; margin: 0px 10px 4px 0px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--th-color-text-2);} .header-nav .sub-menu a:nth-child(3n+3){margin-right: 0px;} .header-nav .sub-menu a:hover{background: var(--th-color-surface-2); color: var(--th-color-main);} .header-right{float: right; height: 70px;} .header-search{float: left; position: relative; margin: 17px 12px 0px 0px;} .header-search input{width: 210px; height: 38px; background: var(--th-color-surface-2); border: 1px solid transparent; border-radius: 20px; padding: 0px 42px 0px 18px; color: var(--th-color-text); font-size: 14px; box-sizing: border-box; transition: border-color .2s, width .25s;} .header-search input:focus{border-color: var(--th-color-main); width: 250px;} .header-search input::placeholder{color: var(--th-color-text-2);} .header-search button{position: absolute; top: 0px; right: 0px; width: 42px; height: 38px; color: var(--th-color-text-2);} .header-search button:hover{color: var(--th-color-main);} .header-tool{float: left; margin: 17px 8px 0px 0px;} .theme-toggle{width: 38px; height: 38px; border-radius: 50%; background: var(--th-color-surface-2); color: var(--th-color-text); font-size: 15px;} .theme-toggle:hover{color: var(--th-color-main);} .theme-toggle .fa-sun{display: none;} html.light-mode .theme-toggle .fa-sun{display: inline-block;} html.light-mode .theme-toggle .fa-moon{display: none;} .header-user{float: left; margin-top: 17px;} .btn-login{display: inline-block; height: 38px; line-height: 38px; padding: 0px 12px; font-weight: 600; font-size: 14px; color: var(--th-color-text);} .btn-login:hover{color: var(--th-color-main);} .btn-register{display: inline-block; height: 38px; line-height: 38px; padding: 0px 20px; font-weight: 700; font-size: 14px; color: #1a1206; background: var(--th-grad); border-radius: 20px; box-shadow: 0px 6px 18px rgba(245,150,50,.30);} .btn-register:hover{filter: brightness(1.06);} .header-account{float: left; position: relative; margin-top: 15px;} .header-account > a{display: block; height: 40px; line-height: 40px; padding-left: 44px; position: relative; font-weight: 600; font-size: 14px; color: var(--th-color-text);} .header-account > a .avatar{position: absolute; top: 0px; left: 0px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;} .header-account > a .avatar img{width: 100%; height: 100%; object-fit: cover;} .header-account .account-menu{position: absolute; top: 100%; right: 0px; width: 190px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 12px; box-shadow: var(--th-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s; z-index: 60;} .header-account:hover .account-menu{opacity: 1; visibility: visible; transform: translateY(0px);} .header-account .account-menu a{display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--th-color-text-2);} .header-account .account-menu a i{width: 20px; color: var(--th-color-main);} .header-account .account-menu a:hover{background: var(--th-color-surface-2); color: var(--th-color-main);} .header-toggle{display: none; width: 40px; height: 70px; color: var(--th-color-text); font-size: 20px;} /* * HERO. */ /* Kéo hero lên dưới header kính (margin âm = đúng chiều cao header) để ảnh bìa chạy full màn. */ .hero{position: relative; margin-top: -70px; padding-top: 70px; overflow: hidden; isolation: isolate;} .hero:after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--th-color-main), transparent); opacity: .45; z-index: 3;} /* NỀN: ảnh bìa blur + 3 quầng sáng aurora + scrim. */ .hero-bg{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0;} .hero-bg-img{position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background-size: cover; background-position: center; filter: blur(44px) saturate(1.45); opacity: var(--th-hero-bg-op); transform: scale(1.04); transition: opacity .45s, transform 1.4s cubic-bezier(.2,.7,.3,1);} /* Aurora nằm TRÊN scrim + blend mode: nhờ vậy hero vẫn có màu sống kể cả truyện chưa có ảnh bìa, * mà chữ không bị giảm tương phản (aurora đứng trước .container nên chữ luôn vẽ đè lên). */ .hero-aurora{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 2; mix-blend-mode: var(--th-hero-aurora-blend);} .hero-aurora i{position: absolute; display: block; border-radius: 50%; filter: blur(72px); opacity: var(--th-hero-aurora-op); will-change: transform;} .hero-aurora .a1{width: 520px; height: 520px; top: -190px; left: -130px; background: radial-gradient(circle, #ff7a2d 0%, rgba(255,122,45,0) 70%);} .hero-aurora .a2{width: 470px; height: 470px; bottom: -240px; left: 36%; background: radial-gradient(circle, #f7c24a 0%, rgba(247,194,74,0) 70%);} .hero-aurora .a3{width: 580px; height: 580px; top: -170px; right: -180px; background: radial-gradient(circle, #7b5bff 0%, rgba(123,91,255,0) 70%);} .hero-scrim{position: absolute; inset: 0px; z-index: 1; background: var(--th-hero-scrim), var(--th-hero-fade);} .hero-inner{position: relative; z-index: 2; padding: 62px 0px 44px;} /* Bìa đứng TRƯỚC trong DOM + float right → chữ tự ăn theo, và trên mobile bìa nằm sẵn phía trên. */ .hero-content{float: left; width: calc(100% - 344px); box-sizing: border-box;} /* EYEBROW: pill + chấm nhấp nháy + bộ đếm slide. */ .hero-eyebrow{display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.9px; text-transform: uppercase; color: var(--th-hero-accent-txt); background: var(--th-hero-pill-bg); border: 1px solid var(--th-hero-pill-line); padding: 5px 5px 5px 14px; border-radius: 22px; margin-bottom: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} .hero-eyebrow-dot{display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: var(--th-color-main-2); margin: -2px 9px 0px 0px;} .hero-eyebrow-txt{display: inline-block; vertical-align: middle;} .hero-eyebrow-num{display: inline-block; vertical-align: middle; margin-left: 11px; padding: 3px 10px; border-radius: 20px; background: var(--th-hero-pill-line); color: var(--th-color-text); font-size: 11px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums;} .hero-eyebrow-num b{font-weight: 800;} .hero-title{font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -1.4px; color: var(--th-color-text); text-shadow: var(--th-hero-title-shadow);} /* Hover = tô gradient thương hiệu vào chính chữ, không gạch chân, không kẻ nền. * Lý do bỏ cách cũ (background-image + background-size): nền của inline box vẽ lại trên từng dòng * nhưng tính kích thước theo bề rộng gộp, nên tiêu đề 2 dòng bị kẻ thừa hết chiều ngang dòng dưới. * Cách này chỉ đụng tới màu chữ nên tiêu đề bao nhiêu dòng cũng sạch. * Chuyển động: gradient nằm sẵn dưới lớp chữ đặc, hover chỉ hạ alpha của color về transparent — * transition color nội suy theo alpha nên gradient hiện lên mượt, không giật. */ .hero-title a{color: inherit; transition: color .32s cubic-bezier(.2,.7,.3,1), text-shadow .32s;} /* Phải tắt text-shadow khi hover: bóng chữ được vẽ ĐÈ LÊN nền đã clip vào chữ, nên quầng trắng * của tông sáng làm gradient bạc hết màu. Chữ lúc này đã có màu nên cũng không cần bóng để nổi nữa. * Fallback cho trình duyệt không có background-clip: text — đổi màu đặc, KHÔNG để chữ tàng hình. */ .hero-title a:hover{color: var(--th-color-main); text-shadow: none;} @supports ((-webkit-background-clip: text) or (background-clip: text)){ .hero-title a{background-image: var(--th-title-grad); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;} .hero-title a:hover{color: transparent;} } .hero-tagline{font-family: var(--th-font-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--th-color-text-2); margin-top: 14px;} .hero-tagline:empty{display: none;} .hero-meta{margin-top: 18px;} .hero-tag{display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--th-color-text); background: var(--th-hero-tag-bg); border: 1px solid var(--th-hero-line); padding: 6px 14px; border-radius: 8px; margin: 0px 8px 8px 0px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, color .2s, transform .2s;} .hero-tag i{color: var(--th-color-main); margin-right: 7px;} .hero-tag:hover{border-color: var(--th-hero-pill-line); color: var(--th-hero-accent-txt); transform: translateY(-2px);} /* Không có link thể loại/tác giả thì trả về span thường, đừng cho con trỏ tay. */ .hero-tag[href=""]{pointer-events: none;} /* PANEL: gom số liệu + chương mới vào 1 khối kính. Bỏ đoạn mô tả nên cột trái cần * một mảng đặc để không bị loãng, đồng thời mắt có 1 điểm dừng thay vì 2 gạch ngang rời. */ .hero-panel{max-width: 580px; margin-top: 24px; border: 1px solid var(--th-hero-line); border-radius: 14px; background: var(--th-hero-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden;} .hero-stats{padding: 15px 20px;} .hero-stat{float: left; width: 33.333%; box-sizing: border-box; padding-right: 12px;} .hero-stat b{display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--th-color-text); font-variant-numeric: tabular-nums;} .hero-stat b i{font-size: 15px; color: var(--th-color-main); margin-right: 7px; vertical-align: 1px;} .hero-stat > span{display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--th-color-text-2); margin-top: 4px;} /* Chương mới nhất — cả dòng là 1 link (vùng bấm rộng), không chỉ mỗi tên chương. */ .hero-latest{display: block; position: relative; padding: 11px 40px 11px 20px; border-top: 1px solid var(--th-hero-line); font-size: 13.5px; color: var(--th-color-text-2); white-space: nowrap; overflow: hidden; transition: background .2s;} .hero-latest:hover{background: var(--th-hero-tag-bg);} .hero-latest-dot{display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: var(--th-color-full); margin: -1px 9px 0px 0px; box-shadow: 0px 0px 0px 3px rgba(53,195,154,.18);} .hero-latest-lb, .hero-latest-link, .hero-latest-time{vertical-align: middle;} .hero-latest-lb{font-weight: 700; color: var(--th-color-text); margin-right: 8px;} /* Cắt ở TÊN CHƯƠNG chứ không cắt cả dòng — nếu để dòng tự cắt thì mốc thời gian (nằm cuối) mất trước. */ .hero-latest-link{display: inline-block; max-width: calc(100% - 205px); font-weight: 600; color: var(--th-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .hero-latest:hover .hero-latest-link{color: var(--th-hero-accent-txt);} .hero-latest-time{margin-left: 8px; opacity: .75;} .hero-latest-time:empty{display: none;} .hero-latest-go{position: absolute; top: 50%; right: 18px; margin-top: -6px; font-size: 11px; color: var(--th-color-text-2); transition: transform .2s, color .2s;} .hero-latest:hover .hero-latest-go{color: var(--th-hero-accent-txt); transform: translateX(3px);} .hero-actions{margin-top: 26px;} /* BẮT BUỘC vertical-align: top. .btn-read có overflow:hidden (để cắt vệt sáng), mà theo CSS 2.1 §10.8.1 * inline-block có overflow khác visible thì baseline của nó là MÉP MARGIN DƯỚI, không phải baseline chữ * → nút "Theo dõi" bị đẩy tụt xuống ~27px. Canh theo mép trên thì hết lệch. */ .hero-actions .btn-read, .hero-actions .btn-follow{vertical-align: top;} .hero-actions .btn-read{position: relative; overflow: hidden; display: inline-block; height: 54px; line-height: 54px; padding: 0px 34px; font-weight: 700; font-size: 16px; color: #1a1206; background: var(--th-grad); border-radius: 27px; box-shadow: 0px 12px 32px rgba(245,150,50,.38); margin: 0px 12px 10px 0px; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .2s;} .hero-actions .btn-read i, .hero-actions .btn-read span{position: relative; z-index: 2;} .hero-actions .btn-read i{margin-right: 9px;} /* Vệt sáng quét ngang: chạy vòng lặp chậm, nhanh hơn khi hover. */ .hero-actions .btn-read:before{content: ""; position: absolute; top: 0px; left: -60%; width: 45%; height: 100%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-22deg);} .hero-actions .btn-read:hover{filter: brightness(1.07); transform: translateY(-3px); box-shadow: 0px 18px 40px rgba(245,150,50,.5);} .hero-actions .btn-follow{display: inline-block; height: 54px; line-height: 52px; margin-bottom: 10px; padding: 0px 28px; font-weight: 600; font-size: 15px; color: var(--th-color-text); border: 1px solid var(--th-hero-line); background: var(--th-hero-surface); border-radius: 27px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .22s;} .hero-actions .btn-follow:hover{border-color: var(--th-color-main); color: var(--th-hero-accent-txt); transform: translateY(-3px);} .hero-actions .btn-follow.followed{color: var(--th-hero-accent-txt); border-color: var(--th-hero-pill-line); background: var(--th-hero-pill-bg);} .hero-actions .btn-follow i{margin-right: 9px;} /* BÌA: card nghiêng 3D, có quầng sáng dưới đáy + gáy sách + vệt bóng kính. */ .hero-cover{float: right; width: 288px; margin-left: 56px;} .hero-cover-card{position: relative; transform: perspective(1300px) rotateY(-9deg) rotateX(2.5deg); transition: transform .55s cubic-bezier(.2,.7,.3,1);} .hero-cover-card:hover{transform: perspective(1300px) rotateY(0deg) rotateX(0deg) translateY(-8px);} .hero-cover-card:before{content: ""; position: absolute; left: 10%; right: 10%; bottom: -22px; height: 56px; border-radius: 50%; background: var(--th-grad); filter: blur(34px); opacity: .55; z-index: 0;} .hero-cover-inner{position: relative; z-index: 1; border-radius: 18px; overflow: hidden; box-shadow: var(--th-hero-cover-shadow);} .hero-cover-inner .truyen-item-thumb{padding-top: var(--th-cover-ratio); border-radius: 18px;} .hero-cover-img{transition: opacity .3s;} .hero-cover-spine{position: absolute; top: 0px; left: 0px; width: 15px; height: 100%; z-index: 3; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.16) 62%, rgba(0,0,0,0) 100%);} .hero-cover-gloss{position: absolute; top: 0px; left: -70%; width: 55%; height: 100%; z-index: 4; background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-20deg); pointer-events: none;} .hero-cover-state{position: absolute; top: 14px; left: 14px; z-index: 5; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 5px 11px; border-radius: 7px; color: #1a1206; background: var(--th-grad); box-shadow: 0px 6px 16px rgba(0,0,0,.3);} .hero-cover-state.is-full{background: var(--th-color-full); color: #052018;} .hero-cover-rate{position: absolute; top: 14px; right: 14px; z-index: 5; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--th-color-main); font-size: 12px; padding: 5px 11px; border-radius: 20px; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,.14);} .hero-cover-rate i{margin-right: 5px;} .hero-cover-rate b{font-weight: 800; color: #fff;} /* PICKER: thẻ có tên truyện + số thứ tự + thanh tiến trình autoplay. */ .hero-picker{position: relative; z-index: 2; clear: both; padding-top: 34px;} .hero-picker-top{margin-bottom: 14px;} .hero-picker-label{float: left; font-size: 11.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--th-color-text-2); line-height: 48px;} /* Cụm điều khiển gộp thành 1 pill (cùng lối với .view-toggle) — trước đây 3 nút rời trôi lơ lửng. */ .hero-nav{float: right; font-size: 0px; padding: 4px; border-radius: 26px; background: var(--th-hero-surface); border: 1px solid var(--th-hero-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} .hero-nav button{display: inline-block; vertical-align: middle; width: 38px; height: 38px; border-radius: 50%; color: var(--th-color-text); font-size: 13px; transition: background .2s, color .2s;} .hero-nav button:hover{background: var(--th-hero-surface-2); color: var(--th-hero-accent-txt);} .hero-nav button:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 1px;} .hero-nav .hero-play{margin: 0px 2px; color: #1a1206; background: var(--th-grad);} .hero-nav .hero-play:hover{color: #1a1206; filter: brightness(1.08);} /* Rail có overflow-x:auto → trục dọc cũng thành scroll container và XÉN box-shadow của thẻ. * Chừa padding đúng bằng tầm đổ bóng rồi kéo lại bằng margin âm để bố cục không bị hở. */ .hero-rail{position: relative; font-size: 0px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 10px 14px 30px; margin: 0px -14px -18px; -ms-overflow-style: none; scrollbar-width: none;} .hero-rail::-webkit-scrollbar{display: none;} .hero-pick{position: relative; display: inline-block; white-space: normal; vertical-align: top; width: 178px; box-sizing: border-box; padding: 9px; margin-right: 12px; text-align: left; cursor: pointer; font-size: 12.5px; border-radius: 14px; background: var(--th-hero-surface); border: 1px solid transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; transition: background .25s, border-color .25s, box-shadow .25s, transform .28s cubic-bezier(.2,.7,.3,1);} /* Giãn kín bề ngang container theo số truyện (ACF giới hạn tối đa 6). Khoảng cách giữa thẻ = 12px. */ .hero-rail-3 .hero-pick{width: calc((100% - 24px) / 3);} .hero-rail-4 .hero-pick{width: calc((100% - 36px) / 4);} .hero-rail-5 .hero-pick{width: calc((100% - 48px) / 5);} .hero-rail-6 .hero-pick{width: calc((100% - 60px) / 6);} .hero-pick:last-child{margin-right: 0px;} .hero-pick:hover{background: var(--th-hero-surface-2); transform: translateY(-4px);} .hero-pick:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 2px;} .hero-pick.active{background: var(--th-hero-surface-2); border-color: var(--th-hero-pill-line); box-shadow: 0px 12px 26px rgba(245,150,50,.22);} .hero-pick-thumb{position: relative; float: left; width: 42px; margin-right: 11px;} .hero-pick-thumb .truyen-item-thumb{padding-top: 60px; border-radius: 7px;} /* Số thứ tự nằm góc TRÊN-TRÁI, đè lên bìa như .cover .badge cho đồng bộ với grid truyện. */ .hero-pick-num{position: absolute; top: 0px; left: 0px; z-index: 3; min-width: 19px; height: 19px; line-height: 19px; padding: 0px 5px; box-sizing: border-box; text-align: center; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); border-radius: 7px 0px 8px 0px; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .25s, color .25s;} .hero-pick.active .hero-pick-num{color: #1a1206; background: var(--th-grad);} .hero-pick-info{display: block; overflow: hidden;} .hero-pick-title{display: -webkit-box; font-size: 12.5px; font-weight: 700; line-height: 1.32; color: var(--th-color-text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .hero-pick-meta{display: block; font-size: 11px; color: var(--th-color-text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .hero-pick-bar{position: absolute; left: 0px; right: 0px; bottom: 0px; height: 3px; background: var(--th-hero-line); opacity: 0; transition: opacity .2s;} .hero-pick.active .hero-pick-bar{opacity: 1;} .hero-pick-bar i{display: block; width: 0%; height: 100%; background: var(--th-grad); transition: width .12s linear;} /* Trạng thái đổi slide: mọi lớp cùng mờ đi rồi hiện lại (JS bật/tắt .is-swap). */ .hero.is-swap .hero-content, .hero.is-swap .hero-cover-card{opacity: 0; transform: translateY(10px);} .hero.is-swap .hero-cover-card{transform: perspective(1300px) rotateY(-16deg) scale(.96);} .hero.is-swap .hero-bg-img{opacity: 0; transform: scale(1.12);} .hero-content, .hero-cover-card{transition: opacity .3s, transform .45s cubic-bezier(.2,.7,.3,1);} /* * COVER (reusable). */ .cover{position: relative; display: block; border-radius: var(--th-r-md); overflow: hidden;} .cover .truyen-item-thumb{padding-top: var(--th-cover-ratio); border-radius: var(--th-r-md);} /* Badge sát góc, góc ngoài bằng bo của bìa — cùng quy tắc với .hero-pick-num, thay vì thụt vào 10px. * Quầng sáng cùng màu + bóng đen mỏng để tách khỏi ảnh bìa (bìa truyện màu gì cũng có), viền và vệt * sáng inset cho khối nổi lên như một con chip, text-shadow để chữ không chìm khi nền badge sáng. */ .cover .badge{position: absolute; top: 0px; left: 0px; z-index: 4; overflow: hidden; height: 26px; line-height: 26px; padding: 0px 13px; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; border-radius: var(--th-r-md) 0px var(--th-r-md) 0px; color: #2a1400; background: var(--th-grad); text-shadow: 0px 1px 0px rgba(255,255,255,.28); box-shadow: var(--th-hot-glow), inset 0px 1px 0px rgba(255,255,255,.55), inset 0px 0px 0px 1px rgba(255,255,255,.16);} /* FULL = đã hoàn thành, tách hẳn khỏi HOT bằng cụm ngọc lục bảo có sẵn trong bảng màu * (--th-color-full). Thêm tick để quét mắt nhận ra trạng thái trước cả khi đọc chữ. */ .cover .badge.full{padding-left: 10px; color: var(--th-full-txt); background: var(--th-full-grad); box-shadow: var(--th-full-glow), inset 0px 1px 0px rgba(255,255,255,.6), inset 0px 0px 0px 1px rgba(255,255,255,.18);} .cover .badge.full:before{content: ""; display: inline-block; vertical-align: middle; width: 11px; height: 11px; margin: -2px 5px 0px 0px; background: currentColor; -webkit-mask: var(--th-ico-check) center/contain no-repeat; mask: var(--th-ico-check) center/contain no-repeat;} /* Vệt sáng quét qua chip khi hover thẻ — chỉ chạy lúc hover nên cả lưới truyện vẫn đứng yên. */ .cover .badge:after{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(114deg, transparent 34%, rgba(255,255,255,.6) 50%, transparent 66%); transform: translateX(-130%); pointer-events: none;} .shelf-item:hover .cover .badge:after, .truyen-col:hover .cover .badge:after{transform: translateX(130%); transition: transform .75s cubic-bezier(.3,.6,.3,1);} .cover .cover-chap{position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 3; padding: 24px 12px 10px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.88) 10%, transparent 100%); opacity: 0; transform: translateY(6px); transition: all .25s;} .cover:hover .cover-chap{opacity: 1; transform: translateY(0px);} /* Hairline TĨNH để tách mép bìa khỏi nền (bìa tối trên nền tối sẽ mất viền). Cố ý không đổi khi * hover: hiệu ứng viền chạy quanh bìa là thứ cần bỏ. */ .cover:after{content: ""; position: absolute; inset: 0px; border-radius: var(--th-r-md); box-shadow: inset 0px 0px 0px 1px var(--th-glass-line); pointer-events: none; z-index: 5;} /* * THẺ TRUYỆN (shelf + grid) — hover bằng ĐỘ CAO, không dùng viền/khung. * Bìa nhấc lên + quầng sáng dưới đáy + ảnh zoom nhẹ + tên truyện lên màu nhấn. Bỏ quầng kính có * border của bản trước: vừa là "hiệu ứng viền", vừa buộc .shelf phải bleed 12px mỗi bên để không bị * overflow xén — chính là chỗ kệ chìa ra so với lưới bên dưới. Bỏ quầng thì hết cả hai. */ .shelf-item, .truyen-col{transition: transform .3s cubic-bezier(.2,.7,.3,1);} .shelf-item:hover, .truyen-col:hover{transform: translateY(-6px);} .shelf-item .cover, .truyen-col .cover{transition: box-shadow .3s cubic-bezier(.2,.7,.3,1);} .shelf-item:hover .cover, .truyen-col:hover .cover{box-shadow: var(--th-card-glow);} .shelf-item:hover .shelf-title a, .truyen-col:hover .truyen-col-title a{color: var(--th-accent-txt);} /* * SHELF (horizontal scroll). */ .shelf-wrap{position: relative;} /* CHỈ chừa padding dọc cho cú nhấc + quầng sáng. KHÔNG bleed ngang: bleed làm vùng cuộn rộng hơn * container nên kệ chìa ra so với lưới bên dưới. Đổi lại, quầng của thẻ đầu/cuối bị xén nhẹ khi * hover — chấp nhận được so với việc cả khối lệch mép. */ /* Margin âm phải TRIỆT TIÊU ĐÚNG BẰNG padding: padding chỉ là chỗ trống chừa cho cú nhấc + quầng * hover khỏi bị overflow xén, nó không được tính vào khoảng cách bố cục. Trên là -12 ↔ 12 (đúng), * dưới trước đây là -4 ↔ 10 nên dư 6px: khoảng cách từ đáy thẻ xuống tiêu đề section sau thành 54px * trong khi mọi chỗ khác là 48px. */ .shelf{white-space: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 12px 0px 10px; margin: -12px 0px -10px; -ms-overflow-style: none; scrollbar-width: none;} .shelf::-webkit-scrollbar{display: none;} .shelf-item{display: inline-block; white-space: normal; vertical-align: top; width: 168px; margin-right: 18px;} .shelf-item:last-child{margin-right: 0px;} .shelf-item .shelf-title{font-size: 15px; font-weight: 600; margin-top: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} .shelf-item .shelf-title a:hover{color: var(--th-color-main);} .shelf-item .shelf-meta{font-size: 12px; color: var(--th-color-text-2); margin-top: 3px;} /* Trước đây absolute top:-58px so với .shelf-wrap → 2 nút bị đẩy lên TRÊN cả section, trôi vào * vùng hero. Nay float trong .sec-head và gộp thành pill y như .hero-nav (cùng chức năng, cùng dáng). */ .shelf-nav{float: right; font-size: 0px; margin: -1px 0px 0px 14px; padding: 4px; border-radius: 26px; background: var(--th-glass); border: 1px solid var(--th-glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} .shelf-nav button{display: inline-block; vertical-align: middle; width: 38px; height: 38px; border-radius: 50%; color: var(--th-color-text); font-size: 13px; transition: background .2s, color .2s;} .shelf-nav button:hover{background: var(--th-glass-2); color: var(--th-accent-txt);} .shelf-nav button:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 1px;} /* * HOME MAIN + SIDEBAR. */ .home-main-left{float: left; width: 65%;} .home-main-right{float: right; width: 32%;} /* * CAP NHAT. */ /* padding NGANG 12px + box-sizing: bề ngang hộp không đổi (vẫn nửa cột), nhưng nội dung thụt vào * 12px nên quầng hover có đệm quanh ảnh bìa mà KHÔNG cần nở ra ngoài mép khối. Đây là cách duy nhất * thoả cả hai: quầng phủ hết hộp (= đúng mép căn 140/894, không tràn) và ảnh không dính mép quầng. */ .capnhat-item{position: relative; float: left; width: calc((100% - 34px) / 2); margin-right: 34px; padding: 13px 12px; box-sizing: border-box;} .capnhat-item:nth-child(2n+2){float: right; margin-right: 0px;} /* Vạch phân cách chuyển từ border-bottom sang :after để thụt theo nội dung — border chạy hết hộp * thì nó sẽ chìa ra 12px hai bên so với chữ. */ .capnhat-item:after{content: ""; position: absolute; left: 12px; right: 12px; bottom: 0px; height: 1px; background: var(--th-color-line);} /* Quầng hover bám ĐÚNG mép nội dung (inset ngang = 0). * * Bản cũ dùng -12px để có đệm quanh chữ. Nhưng ba thứ sau không thể cùng đúng một lúc: * (a) quầng có đệm ngang quanh chữ, * (b) chữ thẳng mép với tiêu đề "Mới cập nhật", * (c) quầng không vượt qua mép căn đó. * Có đệm nghĩa là quầng rộng hơn chữ, mà chữ đã nằm sát mép căn rồi → phần đệm chắc chắn tràn ra. * Cột NGOÀI CÙNG vì thế luôn lòi 12px ra khỏi khối, nhìn như dòng bị lệch (ở dạng danh sách thì * lòi cả hai bên). Bỏ (a), giữ (b)+(c) — cùng lối với .suggest-item và .chuong-row trong hộp nhảy * chương, hai chỗ hover cũng bám sát mép. Đệm dọc giữ nguyên nên dòng vẫn có khoảng thở. */ .capnhat-item:before{content: ""; position: absolute; inset: 3px 0px; z-index: 0; border-radius: var(--th-r-sm); background: var(--th-glass); opacity: 0; transition: opacity .2s;} .capnhat-item:hover:before{opacity: 1;} .capnhat-item > *{position: relative; z-index: 1;} .capnhat-thumb{float: left; width: 46px; margin-right: 13px;} .capnhat-thumb .truyen-item-thumb{padding-top: 65px; border-radius: 7px;} .capnhat-info{overflow: hidden;} .capnhat-info h3{font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} .capnhat-info h3 a:hover{color: var(--th-color-main);} .capnhat-chap{display: block; font-size: 13px; color: var(--th-color-text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .capnhat-chap:hover{color: var(--th-color-main);} .capnhat-time{display: block; font-size: 12px; color: var(--th-color-text-2); margin-top: 2px; opacity: .8;} .view-toggle{float: right; font-size: 0px; margin: 5px 20px 0px 0px; background: var(--th-glass); border: 1px solid var(--th-glass-line); border-radius: var(--th-r-sm); padding: 3px;} .view-toggle button{display: inline-block; vertical-align: middle; width: 32px; height: 30px; border-radius: var(--th-r-xs); color: var(--th-color-text-2); font-size: 13px; transition: background .2s, color .2s;} .view-toggle button:hover{color: var(--th-accent-txt);} .view-toggle button.active{background: var(--th-grad); color: #1a1206;} .capnhat-list.is-list .capnhat-item{float: none; width: 100%; margin-right: 0px; padding: 14px 12px;} .capnhat-list.is-list .capnhat-item:nth-child(2n+2){float: none;} /* DẠNG DANH SÁCH: tên chương và mốc thời gian về CHUNG một dòng, thời gian dồn sang phải. * Hàng ở dạng này rộng gấp đôi dạng lưới nên thừa chỗ ngang, mà lại đang phí một dòng cho mỗi mục; * dồn thời gian sang phải vừa rút ngắn hàng vừa tạo một cột thời gian thẳng để mắt quét dọc. * Cả hai đều float nên không phụ thuộc thứ tự trong HTML (thời gian đứng sau tên chương); * .capnhat-info đã có overflow:hidden nên tự ôm hai float, không cần thêm .cboth. * max-width chừa đúng chỗ cho cụm thời gian dài nhất ("khoảng 17 giờ trước") để tên chương dài * bị cắt bằng ellipsis thay vì đẩy thời gian xuống dòng. */ .capnhat-list.is-list .capnhat-chap{float: left; max-width: calc(100% - 120px); margin-top: 5px;} .capnhat-list.is-list .capnhat-time{float: right; margin-top: 6px; white-space: nowrap;} .capnhat-list.is-list .capnhat-thumb{width: 42px; margin-right: 14px;} .capnhat-list.is-list .capnhat-thumb .truyen-item-thumb{padding-top: 60px;} .capnhat-list.is-list .capnhat-info h3{font-size: 15px;} /* * SIDEBAR. */ .sidebar-box{background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-lg); padding: 22px; margin-bottom: 24px;} /* Hộp cuối vẫn ôm margin-bottom 24px thì cột phải cao hơn cột trái đúng 24px, và vì .home-main lấy * chiều cao theo cột cao nhất nên khoảng cách xuống section kế tiếp thành 72px trong khi mọi chỗ * khác là 48px. Đo thật ở 1440px: "Truyện hot" bị đẩy xuống 2220 thay vì 2196. */ .sidebar-box:last-child{margin-bottom: 0px;} .sidebar-title{font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 8px;} .sidebar-tabs{margin: 14px 0px 6px;} .sidebar-tabs button{color: var(--th-color-text-2); font-size: 13px; font-weight: 700; padding: 6px 4px; margin-right: 18px; position: relative;} .sidebar-tabs button.active{color: var(--th-color-text);} .sidebar-tabs button.active:after{content: ""; position: absolute; left: 0px; bottom: -2px; width: 100%; height: 3px; border-radius: 3px; background: var(--th-grad);} .xephang-item{padding: 13px 0px; border-bottom: 1px solid var(--th-color-line);} .xephang-item:last-child{border-bottom: 0px; padding-bottom: 0px;} .xephang-num{float: left; width: 32px; font-weight: 800; font-size: 24px; letter-spacing: -1px; color: var(--th-color-line); line-height: 1; margin: 2px 14px 0px 0px; font-variant-numeric: tabular-nums;} .xephang-item.top .xephang-num{background: var(--th-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;} .xephang-info{overflow: hidden;} .xephang-info h3{font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} .xephang-info h3 a:hover{color: var(--th-color-main);} .xephang-meta{font-size: 12px; color: var(--th-color-text-2); margin-top: 3px;} .xephang-meta i{color: var(--th-color-main); margin-right: 5px;} /* Hover đổ gradient đặc trước đây là ngôn ngữ thứ 3 trên cùng 1 trang; đổi sang viền nhấn + nhấc * giống .hero-tag để thẻ thể loại ở hero và ở sidebar phản hồi như nhau. */ .theloai-list a{display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 13px; background: var(--th-color-surface-2); border: 1px solid transparent; border-radius: var(--th-r-xs); color: var(--th-color-text-2); margin: 0px 7px 8px 0px; transition: background .2s, border-color .2s, color .2s, transform .2s;} .theloai-list a:hover{background: var(--th-accent-bg); border-color: var(--th-accent-line); color: var(--th-accent-txt); transform: translateY(-2px);} /* * GRID TRUYEN (6 col). */ .truyen-grid .truyen-col{float: left; width: calc((100% - 100px) / 6); margin-right: 20px;} .truyen-grid .truyen-col:nth-child(6n+6){float: right; margin-right: 0px;} .truyen-grid .truyen-col:nth-child(n+7){margin-top: 26px;} .truyen-col .truyen-col-title{font-size: 14px; font-weight: 600; margin-top: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;} .truyen-col .truyen-col-title a:hover{color: var(--th-color-main);} .truyen-col .truyen-col-meta{font-size: 12px; color: var(--th-color-text-2); margin-top: 3px;} /* * BREADCRUMB + PAGE HEAD. */ .breadcrumb{padding: 18px 0px 0px; font-size: 13px; color: var(--th-color-text-2);} .breadcrumb a:hover{color: var(--th-color-main);} .breadcrumb .sep{margin: 0px 8px; opacity: .5;} .page-head{padding: 26px 0px 6px;} .page-head h1{font-size: 30px; font-weight: 800; letter-spacing: -.6px;} .page-head .page-desc{color: var(--th-color-text-2); margin-top: 8px; max-width: 760px;} /* * PAGINATION. */ .pagination{margin-top: 34px; text-align: center;} .pagination a, .pagination span{display: inline-block; min-width: 40px; height: 40px; line-height: 40px; padding: 0px 6px; margin: 0px 3px; border-radius: 10px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); font-weight: 600; font-size: 14px; color: var(--th-color-text-2);} .pagination a:hover{border-color: var(--th-color-main); color: var(--th-color-main);} .pagination .current{background: var(--th-grad); color: #1a1206; border-color: transparent;} /* * SINGLE TRUYEN. */ .truyen-detail{padding: 30px 0px;} .truyen-detail-head{background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 26px; overflow: hidden;} .truyen-detail-cover{float: left; width: 220px; margin-right: 30px;} .truyen-detail-cover .truyen-item-thumb{padding-top: var(--th-cover-ratio); border-radius: 14px; box-shadow: var(--th-shadow);} .truyen-detail-info{overflow: hidden;} .truyen-detail-info h1{font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.6px;} .truyen-detail-alt{font-family: var(--th-font-serif); font-style: italic; color: var(--th-color-text-2); margin-top: 6px;} .truyen-detail-meta{margin-top: 16px;} .truyen-detail-meta .row{font-size: 14px; color: var(--th-color-text-2); margin-bottom: 8px;} .truyen-detail-meta .row i{width: 20px; color: var(--th-color-main);} .truyen-detail-meta .row a{color: var(--th-color-text); font-weight: 600;} .truyen-detail-meta .row a:hover{color: var(--th-color-main);} .truyen-detail-genre{margin-top: 14px;} .truyen-detail-genre a{display: inline-block; font-size: 13px; padding: 5px 12px; background: var(--th-color-surface-2); border-radius: 8px; color: var(--th-color-text-2); margin: 0px 6px 6px 0px;} .truyen-detail-genre a:hover{background: var(--th-grad); color: #1a1206;} .truyen-detail-stats{margin-top: 16px;} /* min-width: bề ngang mỗi ô vốn ăn theo NHÃN dài nhất bên trong ("Chương" 44.7px, "Lượt đọc" 50.1px, * "Đánh giá" 50.2px) nên 3 cột lệch nhau tới 5.4px — nhìn ra ngay vì các con số không thẳng cột. * Ghim 54px (đủ chứa nhãn dài nhất) để 3 ô rộng bằng nhau. */ .truyen-detail-stats .stat{float: left; min-width: 54px; padding-right: 32px;} .truyen-detail-stats .stat b{display: block; font-size: 20px; font-weight: 800;} .truyen-detail-stats .stat span{font-size: 12px; color: var(--th-color-text-2);} .truyen-detail-actions{clear: both; padding-top: 22px;} .truyen-detail-actions .btn-read{display: inline-block; height: 50px; line-height: 50px; padding: 0px 30px; font-weight: 700; color: #1a1206; background: var(--th-grad); border-radius: 25px; margin-right: 12px; box-shadow: 0px 10px 28px rgba(245,150,50,.32);} .truyen-detail-actions .btn-read i{margin-right: 8px;} .truyen-detail-actions .btn-follow{display: inline-block; height: 50px; line-height: 48px; padding: 0px 26px; font-weight: 600; color: var(--th-color-text); border: 1px solid var(--th-color-line); border-radius: 25px; transition: all .2s;} .truyen-detail-actions .btn-follow i{margin-right: 8px;} .truyen-detail-actions .btn-follow:hover, .truyen-detail-actions .btn-follow.followed{border-color: var(--th-color-main); color: var(--th-color-main);} .single-content{margin-top: 30px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 26px;} .single-content h2.box-title{font-size: 20px; font-weight: 800; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--th-color-line);} .single-content p{margin-bottom: 14px; color: var(--th-color-text); line-height: 1.8;} /* * CHAPTER LIST. */ .chuong-list-box{margin-top: 30px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 26px;} .chuong-list-head{margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--th-color-line);} .chuong-list-head h2{float: left; font-size: 20px; font-weight: 800;} .chuong-list-head .count{float: right; color: var(--th-color-text-2); font-size: 14px; margin-top: 4px;} .chuong-row{float: left; width: 50%; box-sizing: border-box; padding: 10px 14px 10px 0px;} .chuong-row:nth-child(2n+2){padding-right: 0px; padding-left: 14px;} .chuong-row a{display: block; font-size: 14px; color: var(--th-color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .chuong-row a:hover{color: var(--th-color-main);} .chuong-row a i{color: var(--th-color-line); margin-right: 8px; font-size: 12px;} /* * READER (single chuong). */ .reader{max-width: 800px; margin: 0px auto; padding: 30px 20px 60px;} .reader-crumb{font-size: 13px; color: var(--th-color-text-2); margin-bottom: 12px;} .reader-crumb a:hover{color: var(--th-color-main);} .reader-head{text-align: center; margin-bottom: 26px;} .reader-head .r-truyen{font-size: 15px; color: var(--th-color-main); font-weight: 600;} .reader-head h1{font-size: 26px; font-weight: 800; margin-top: 6px; line-height: 1.25;} .reader-nav{text-align: center; margin: 20px 0px;} .reader-nav a, .reader-nav .r-list{display: inline-block; height: 44px; line-height: 44px; padding: 0px 20px; border-radius: 22px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); font-weight: 600; font-size: 14px; color: var(--th-color-text); margin: 0px 5px; transition: all .2s;} .reader-nav a:hover{border-color: var(--th-color-main); color: var(--th-color-main);} .reader-nav a.disabled{opacity: .4; pointer-events: none;} .reader-nav .r-list{cursor: pointer;} .chuong-content{font-size: 19px; line-height: 1.9; color: var(--th-color-text); font-family: var(--th-font-main);} .chuong-content p{margin-bottom: 20px;} .reader.rt-sepia{background: #f4ecd8; border-radius: 16px;} .reader.rt-sepia .chuong-content, .reader.rt-sepia .reader-head h1{color: #4a3f2c;} .reader.rt-light{background: #ffffff; border-radius: 16px;} .reader.rt-light .chuong-content, .reader.rt-light .reader-head h1{color: #1a1726;} .reader.rt-black{background: #000000; border-radius: 16px;} .reader.rt-black .chuong-content, .reader.rt-black .reader-head h1{color: #c9c9c9;} .reader.ff-serif .chuong-content{font-family: var(--th-font-serif);} .reader.ff-sans .chuong-content{font-family: var(--th-font-main);} /* * READER PANEL (settings). */ .reader-panel{position: fixed; top: 50%; right: 0px; transform: translateY(-50%); z-index: 80;} .reader-panel-toggle{width: 46px; height: 46px; line-height: 46px; text-align: center; background: var(--th-grad); color: #1a1206; border-radius: 12px 0px 0px 12px; font-size: 17px; box-shadow: var(--th-shadow);} .reader-panel-box{position: absolute; top: 50%; right: 56px; transform: translateY(-50%); width: 280px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 16px; box-shadow: var(--th-shadow); padding: 20px; display: none;} .reader-panel-box.open{display: block;} .reader-panel-box .rp-group{margin-bottom: 18px;} .reader-panel-box .rp-group:last-child{margin-bottom: 0px;} .reader-panel-box .rp-label{font-size: 13px; font-weight: 700; color: var(--th-color-text-2); margin-bottom: 8px;} .reader-panel-box .rp-btns button{border: 1px solid var(--th-color-line); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--th-color-text); margin: 0px 6px 6px 0px;} .reader-panel-box .rp-btns button.active{background: var(--th-grad); color: #1a1206; border-color: transparent;} /* Ô chọn màu nền giờ là