@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#090d13;--surface:#111924;--surface2:#17222f;--muted:#a7b1be;--gold:#e5be73;--gold2:#bb8742;--white:#f4f5f8;--line:rgba(217,174,100,.28)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% 55%,#12202a 0,transparent 55%),var(--bg);color:var(--white);font:14px/1.5 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.site-header{background:#080d13f5;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.header-inner{max-width:1500px;margin:auto;padding:13px 24px;min-height:72px;display:flex;align-items:center;gap:38px}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:Georgia,serif;color:#ffe1a0;font-size:27px;font-weight:700;font-style:italic;text-shadow:0 2px 15px #dd9c3f77}.brand em{font-size:24px}.dragon{font-size:34px;font-style:normal}.nav{display:flex;align-items:center;gap:28px;flex:1}.nav a{white-space:nowrap;font-weight:600;color:#e7e8e9;padding:14px 0;transition:color .2s}.nav a.active,.nav a:hover{color:var(--gold)}.search{background:#1a2430;border:1px solid #384350;display:flex;align-items:center;padding:0 13px;border-radius:40px;width:270px;flex-shrink:0}.search input{background:none;border:0;outline:0;width:100%;height:37px;color:white;font-size:12px}.search-icon{font-size:23px;color:var(--gold);line-height:1}.shell{max-width:1500px;margin:auto;padding:0 24px 30px}.hero{margin:0 0 27px;border:1px solid #5c4828;border-top:0;overflow:hidden;position:relative;border-radius:0 0 11px 11px;box-shadow:0 18px 48px #0008}.hero img{display:block;width:100%;height:auto;min-height:210px;object-fit:cover}.hero::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(0deg,#08101844,transparent 45%)}.hero a{position:absolute;inset:0;z-index:2}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.section{margin-bottom:24px;scroll-margin-top:100px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.section-title h2{font-size:23px;color:#ffdf9f;margin:0;font-family:Georgia,serif}.section-title a{color:var(--gold);font-size:12px}.featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.featured{overflow:hidden;border-radius:7px;background:#151d28;border:1px solid var(--line);transition:transform .22s,border-color .22s}.featured:hover,.comic-card:hover,.mini-card:hover{transform:translateY(-3px);border-color:var(--gold)}.featured img{display:block;width:100%;height:160px;object-fit:cover}.featured .card-body{padding:11px 12px 13px}.card-title{font-size:15px;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.muted{color:var(--muted);font-size:12px;margin-top:4px}.tag{display:inline-block;color:#15100a;background:linear-gradient(120deg,#f9dc9d,#d8a34f);font-size:10px;padding:2px 7px;border-radius:4px;font-weight:800;letter-spacing:.03em}.featured .card-body .tag{float:right}.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mini-card{display:flex;gap:13px;min-width:0;align-items:center;border:1px solid #263340;padding:9px;border-radius:6px;background:#141c27;transition:transform .22s,border-color .22s}.mini-card img{width:61px;height:63px;object-fit:cover;border-radius:5px}.mini-card .mini-details{min-width:0;flex:1}.mini-title{font-size:13px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.comic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.comic-card{border:1px solid var(--line);background:var(--surface);border-radius:6px;overflow:hidden;transition:transform .2s,border-color .2s}.comic-img{position:relative}.comic-card img{width:100%;height:135px;object-fit:cover;display:block}.comic-card .comic-title{font-weight:700;padding:10px 12px}.play{position:absolute;bottom:10px;left:10px;width:30px;height:30px;border:2px solid #e0e1e6;border-radius:50%;background:#101318a8;display:grid;place-items:center}.sidebar-panel{border:1px solid #856738;padding:15px;background:linear-gradient(145deg,#1c1b18,#0e151a);border-radius:8px;margin-bottom:16px;box-shadow:inset 0 0 18px #e5be7312}.sidebar-panel h3{font-size:19px;color:#f5daa6;margin:0 0 13px}.genres{display:flex;gap:7px;flex-wrap:wrap}.genre{background:#121a24;color:#dfd5c1;border:1px solid #82673e;padding:7px 10px;border-radius:5px;font-size:12px}.genre:hover,.genre.current{background:#73572d;color:white}.ranking{display:flex;flex-direction:column;gap:10px}.rank-row{display:grid;grid-template-columns:24px 43px 1fr;gap:10px;align-items:center}.rank-no{background:#645132;border-radius:4px;text-align:center;font-weight:800;color:#ffdfa3;padding:3px 0}.rank-row img{width:43px;height:48px;object-fit:cover;border-radius:3px}.rank-row span{font-size:12px;line-height:1.4;font-weight:600}.note{border:1px solid #584727;background:#2a2316;margin:14px 0 20px;padding:11px 14px;color:#f4dca8;border-radius:7px;font-size:12px}.empty{background:#151f2a;padding:34px 18px;border:1px solid var(--line);border-radius:8px;text-align:center;color:#cfd1d4}.intro{padding:17px 0 26px}.back{display:inline-block;color:var(--gold);margin:16px 0;font-weight:600}.detail-card{display:grid;grid-template-columns:280px 1fr;gap:27px;background:linear-gradient(120deg,#172331,#0c131d);border:1px solid var(--line);border-radius:12px;padding:22px}.detail-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}.detail-card h1{font-size:32px;color:#fbd394;margin:0 0 10px;font-family:Georgia,serif}.description{font-size:14px;color:#d4dce5;line-height:1.9}.pill{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:5px 10px;font-size:12px;color:var(--gold);margin:8px 5px 12px 0}.gold-btn{background:linear-gradient(100deg,#e2ad59,#f0d28d);border:0;color:#211608;font-weight:800;border-radius:22px;padding:11px 22px;display:inline-block;margin-top:8px}.chapter-list{margin:25px 0 45px;background:#131b27;border:1px solid #344055;border-radius:8px;padding:20px}.chapter-list h2{color:var(--gold);margin:0 0 12px}.chapter-row{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #344055;padding:15px 4px}.chapter-row a{font-weight:650}.chapter-row a:hover{color:var(--gold)}.reading{max-width:850px;margin:auto;padding:25px 16px 70px}.reader-head{text-align:center}.reader-head h1{font:700 30px Georgia,serif;color:#ffe1a1}.reader-head .sub{color:#adbaca}.reader-body{background:#151f2b;border:1px solid #3f4b58;border-radius:11px;margin:28px 0;padding:30px 38px;color:#f1eadc;font-size:19px;line-height:2.1}.reader-body p{text-indent:1.5em}.reader-body img{display:block;width:100%;height:auto;margin:0 auto 8px;border-radius:3px}.reader-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.simple-btn{background:#253141;color:#f6d394;border:1px solid var(--line);padding:10px 16px;border-radius:7px}.footer{max-width:1500px;padding:22px 24px;margin:25px auto 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center;color:#adbbc8}.footer strong{color:#f4cc7c;font:italic 22px Georgia,serif}.footer span{font-size:11px;display:block;margin-top:5px}@media(max-width:1100px){.header-inner{gap:20px;flex-wrap:wrap}.nav{order:3;width:100%;justify-content:center}.search{margin-left:auto}.main-grid{grid-template-columns:minmax(0,1fr)}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:15px}.sidebar-panel{margin:0}}@media(max-width:680px){.header-inner{padding:10px 14px;gap:7px}.brand{font-size:20px}.brand em{font-size:19px}.dragon{font-size:23px}.search{order:2;width:100%;margin:8px 0 0}.nav{order:3;gap:15px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.nav a{font-size:12px;padding:8px 0}.shell{padding:0 12px 20px}.hero{margin:0 -12px 20px;border-radius:0}.hero img{min-height:135px;object-position:center}.section-title h2{font-size:20px}.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.featured img{height:116px}.featured .card-body{padding:9px}.card-title{font-size:12px}.mini-grid{grid-template-columns:1fr}.comic-grid{grid-template-columns:1fr}.comic-card img{height:auto}.sidebar{display:block}.sidebar-panel{margin-bottom:14px}.detail-card{grid-template-columns:1fr}.detail-card>img{max-height:260px}.detail-card h1{font-size:25px}.reader-body{padding:17px;font-size:17px}.reader-head h1{font-size:24px}.footer{display:block;padding:20px 15px}.footer small{display:block;margin-top:13px}}/* Quản trị truyện tích hợp */
.loading-state{margin:40px auto;text-align:center;color:var(--muted);padding:35px}.admin-shell{padding-top:28px;min-height:70vh}.admin-panel{border:1px solid var(--line);background:#111925;border-radius:12px;padding:22px;max-width:1100px;margin:0 auto 28px}.admin-heading h1{font:700 28px Georgia,serif;color:#f5d296;margin:5px 0 3px}.admin-heading .back{margin:2px 0 10px}.admin-panel h2{color:#f5d296;font-size:21px}.admin-toolbar{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:20px}.admin-toolbar>div{display:flex;gap:9px;flex-wrap:wrap}.admin-panel .simple-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.admin-panel .gold-btn{cursor:pointer;font-size:14px}.admin-story-row{display:flex;align-items:center;gap:15px;border:1px solid #2c3744;background:#151f2b;padding:10px 12px;border-radius:9px;margin:10px 0}.admin-story-row>img{width:65px;height:65px;object-fit:cover;border-radius:6px}.admin-story-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.admin-story-text strong{overflow-wrap:anywhere}.admin-actions{display:flex;gap:7px;flex-wrap:wrap}.delete-btn{background:#48292d;border:1px solid #a35858;color:#ffe2e2;padding:9px 13px;border-radius:6px;cursor:pointer}.admin-form{max-width:900px;margin:16px 0}.compact-form{max-width:440px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#e5c78f;font-weight:600}.form-grid label.full,.form-grid>.full{grid-column:1/-1}.form-grid input:not([type=checkbox]),.form-grid textarea,.form-grid select{width:100%;background:#0d141d;color:#f4f5f8;border:1px solid #445366;border-radius:7px;padding:11px 12px;line-height:1.5}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:2px solid var(--gold);outline-offset:0}.form-grid input[type=file]{color:#c8d3dd}.form-grid .check-label{flex-direction:row;align-items:center;gap:9px;cursor:pointer;grid-column:1/-1}.form-grid input[type=checkbox]{width:16px;height:16px;accent-color:#deaa5b}.admin-form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.admin-form-actions .gold-btn{margin:0}.form-message{font-size:13px;color:#e9c17d;grid-column:1/-1;overflow-wrap:anywhere}.admin-list{margin-top:22px}.existing-images{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:10px}.saved-image{display:flex!important;flex-direction:column;gap:6px!important;color:var(--white)!important}.saved-image img{width:100%;height:120px;object-fit:cover;border-radius:5px}.saved-image span{font-size:12px}.saved-image span input{vertical-align:middle}@media(max-width:680px){.admin-panel{padding:14px}.admin-story-row{flex-wrap:wrap}.admin-actions{width:100%}.form-grid{grid-template-columns:1fr}.existing-images{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-heading h1{font-size:22px}}

/* Anh bia truyen - ty le chuan 3:4 */

.featured img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #111925;
}

.detail-card {
  grid-template-columns: 260px minmax(0, 1fr);
}

.detail-card > img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #111925;
  border-radius: 8px;
}

.mini-card img {
  width: 61px;
  height: 81px;
  object-fit: contain;
}

.rank-row img {
  width: 43px;
  height: 57px;
  object-fit: contain;
}

.admin-story-row > img {
  width: 65px;
  height: 87px;
  object-fit: contain;
}

@media (max-width: 680px) {
  .detail-card {
    grid-template-columns: 1fr;
  }

  .detail-card > img {
    max-width: 260px;
    max-height: none;
    margin: 0 auto;
  }
}

/* Hoi vien: dang ky, dang nhap, tai khoan - dong bo den vang */
.member-nav{border:1px solid rgba(229,190,115,.45);border-radius:22px;padding:8px 12px!important;color:#f8dda5!important;background:rgba(229,190,115,.09)}
.member-nav:hover,.member-nav.active{background:rgba(229,190,115,.19)}
.member-shell{padding-top:35px;padding-bottom:60px;min-height:70vh}
.member-wrap{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(320px,1fr);max-width:960px;min-height:500px;margin:12px auto;border:1px solid rgba(229,190,115,.34);border-radius:18px;overflow:hidden;box-shadow:0 28px 80px #0008;background:#111925}
.member-art{background:radial-gradient(circle at 50% 25%,rgba(216,167,79,.26),transparent 47%),linear-gradient(135deg,#142337,#080e19 75%);display:flex;align-items:center;justify-content:flex-end;flex-direction:column;text-align:center;padding:36px 25px;color:#ffedc2}
.member-sigil{font-size:36px;color:#ffda93;filter:drop-shadow(0 0 12px #b98744)}
.member-art h1{font:700 30px Georgia,serif;margin:10px 0;color:#ffe2a2}
.member-art p{color:#f0e1c5;max-width:270px;font-size:14px;line-height:1.7}
.member-art-note{letter-spacing:3px;font-size:11px;color:#e8bd72;margin-top:25px}
.member-panel{padding:45px 50px;align-self:center;min-width:0}
.member-panel h2{font:700 30px Georgia,serif;color:#f4cf88;margin:0 0 8px}
.member-subtitle{color:#b9c4cd;line-height:1.7;margin:0 0 26px}
.member-form{display:grid;gap:17px}
.member-form label{display:grid;gap:7px;font-size:13px;color:#f2d59a;font-weight:600}
.member-form input{width:100%;height:44px;border:1px solid #495567;border-radius:9px;color:#fff;background:#0d1520;padding:12px 14px;font-size:14px}
.member-form input:focus{outline:2px solid #d9ae64;border-color:#e5be73}
.member-form .gold-btn{width:100%;margin-top:5px;padding:14px;border-radius:9px;font-size:15px}
.member-feedback{min-height:18px;margin:0;color:#ffb2a6;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.member-feedback.ok{color:#a3e2bb}
.member-foot{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;color:#bfcad5;font-size:13px}
.member-foot p{margin:0}.member-link{padding:0;border:0;background:none;color:#f1c779;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.member-link:hover{color:#ffebc7}
.member-alert{color:#f5d69d;padding:15px;border:1px solid #6e5433;border-radius:9px;background:#322718}
.member-account{text-align:center}.member-avatar{margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;width:80px;height:80px;background:linear-gradient(130deg,#e2ae5f,#796037);color:#171313;font-size:36px}
.member-profile-field{display:grid;gap:7px;text-align:left;border:1px solid #465167;border-radius:9px;padding:14px;margin:25px 0;overflow-wrap:anywhere}
.member-profile-field span{color:#a3afbf;font-size:12px}.member-profile-field strong{color:#fff}
.member-small{font-size:12px;color:#c8d0da;line-height:1.8}
.member-account-actions{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;margin-top:23px}
.member-account-actions .gold-btn{margin:0}
/* Bìa truyện 3:4 cho các danh sách hình ảnh */
.comic-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#111925}
@media(max-width:1250px){.header-inner{gap:18px}.nav{gap:15px}.nav a{font-size:12px}}
@media(max-width:840px){.member-wrap{grid-template-columns:1fr;max-width:550px}.member-art{min-height:185px;background-position:center 25%}.member-art h1{font-size:24px}.member-art p{margin:2px auto 0}.member-art-note{margin-top:6px}.member-panel{padding:32px 26px}}
@media(max-width:680px){.member-shell{padding-top:13px}.member-panel{padding:28px 18px}.member-panel h2{font-size:26px}.member-nav{padding:6px 10px!important}.member-wrap{margin:0}}

/* V5 — BANNER SLIDER TỰ ĐỘNG, CHỈ QUẢN TRỊ VIÊN ĐƯỢC ĐỔI TRUYỆN / ẢNH */
.story-slider{position:relative;height:clamp(215px,26vw,335px);margin:0 0 27px;border:1px solid #816032;border-top:0;border-radius:0 0 12px 12px;overflow:hidden;background:linear-gradient(135deg,#142437,#090d13 80%);box-shadow:0 18px 48px #0008;isolation:isolate}
.slider-slides{position:absolute;inset:0}
.slider-slide{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility .6s ease}
.slider-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slider-art{position:absolute;inset:0;height:100%;width:100%;display:block;z-index:1}
.slider-image-wide{object-fit:contain;object-position:center;background:#101b28}
.slider-image-portrait{width:43%;height:100%;right:3%;left:auto;object-fit:contain;object-position:center;filter:drop-shadow(0 10px 20px #0007)}
.slider-backdrop{position:absolute;inset:-35px;background-size:cover;background-position:center;filter:blur(33px) brightness(.28);z-index:0;pointer-events:none}
.slider-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,13,22,.98) 0%,rgba(9,16,27,.92) 28%,rgba(7,14,24,.18) 78%);z-index:2;pointer-events:none}
.slider-content{position:absolute;z-index:3;top:50%;left:6%;transform:translateY(-50%);width:51%;max-width:500px;padding:12px 0 22px}
.slider-eyebrow{font-size:10px;font-weight:800;letter-spacing:.17em;color:#f0c878}
.slider-content h2{font:bold clamp(23px,3.1vw,40px)/1.14 Georgia,serif;color:#ffdf9c;margin:11px 0 9px;text-shadow:0 3px 14px #000b}
.slider-content p{font-size:13px;color:#e9e2d5;max-width:390px;line-height:1.6;margin:0 0 11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slider-content .gold-btn{margin:0;padding:9px 18px;font-size:13px}
.slider-original-link{position:absolute;z-index:3;inset:0;display:block}
.slider-arrow{z-index:5;position:absolute;top:49%;transform:translateY(-50%);border:1px solid rgba(255,222,164,.55);background:#0e1827ac;color:#ffe3a8;border-radius:50%;height:34px;width:34px;display:grid;place-items:center;font-size:17px;line-height:1;opacity:.87}
.slider-arrow:hover{background:#d7a555;color:#141210;opacity:1}
.slider-prev{left:12px}.slider-next{right:12px}
.slider-dots{position:absolute;z-index:6;left:50%;bottom:11px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#0e152699;border-radius:20px;padding:6px 10px}
.slider-dot{display:block;width:9px;height:9px;min-width:9px;border:0;border-radius:25px;padding:0;background:#94a1b3;transition:all .25s}
.slider-dot.is-active{width:22px;background:#f4c97a}
.banner-admin-row{display:flex;align-items:center;gap:14px;border:1px solid #344052;background:#15202d;border-radius:9px;padding:12px;margin:10px 0}
.banner-admin-row>img{width:136px;height:76px;object-fit:contain;border-radius:5px;background:#09121c}
.banner-preview{display:block;width:min(100%,550px);max-height:215px;object-fit:contain;border-radius:7px;border:1px solid #695432;background:#0a1018}
@media(max-width:680px){
 .story-slider{height:260px;margin:0 -12px 18px;border-radius:0}
 .slider-image-portrait{width:46%;right:1%}
 .slider-content{left:11%;width:55%;padding-bottom:14px}
 .slider-content h2{font-size:clamp(19px,5vw,27px)}
 .slider-content p{font-size:11px;-webkit-line-clamp:2}
 .slider-content .gold-btn{padding:8px 12px;font-size:11px}
 .slider-eyebrow{font-size:9px}
 .slider-arrow{width:26px;height:26px;font-size:12px}
 .slider-prev{left:3px}.slider-next{right:3px}
 .banner-admin-row{flex-wrap:wrap}.banner-admin-row>img{width:110px;height:65px}.banner-admin-row .admin-actions{width:100%}
}
@media(prefers-reduced-motion:reduce){.slider-slide,.slider-dot{transition:none}}


/* V6 - Truyện mới cập nhật: chương xuất bản mới nhất của từng bộ truyện */
.latest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.latest-card{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;background:linear-gradient(110deg,#152131,#111923);border:1px solid #384150;border-radius:9px;transition:border-color .2s,transform .2s}
.latest-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.latest-cover{display:block;flex:0 0 66px;width:66px;align-self:stretch;min-height:89px;background:#0d1520;border-radius:5px;overflow:hidden}
.latest-cover img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:contain}
.latest-details{display:flex;flex:1;flex-direction:column;min-width:0;gap:5px}
.latest-name{font-weight:750;color:#ffe0a5;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.latest-chapter{color:#e0e6f0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.latest-name:hover,.latest-chapter:hover,.latest-read:hover{color:var(--gold)}
.latest-date{font-size:11px;color:#9eacbf}
.latest-read{color:#f6d28b;white-space:nowrap;align-self:center;font-size:12px;font-weight:700}
.latest-empty{padding:18px;background:#111b29;border:1px solid #394354;border-radius:8px;color:#b9c5d2;font-size:13px}
@media(max-width:820px){.latest-grid{grid-template-columns:1fr}}
@media(max-width:420px){.latest-cover{flex-basis:56px;width:56px;min-height:76px}.latest-card{gap:8px;padding:8px}.latest-read{font-size:11px}.latest-name{font-size:13px}}


/* V7: Tu sach hoi vien / luu yeu thich va lich su doc */
.detail-tools{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:14px 0 0}
.favorite-toggle{cursor:pointer}.favorite-toggle.is-saved{background:rgba(232,186,103,.18);border-color:#e5b769;color:#ffe2a8}
.favorite-toggle:disabled{opacity:.65;cursor:wait}.reading-note{font-size:12px;color:#9daab9;text-align:center;margin-top:15px}
.bookshelf-shell{min-height:62vh;padding-top:28px;padding-bottom:60px}.bookshelf-heading{margin:0 0 16px;display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}
.bookshelf-heading h1{font:700 clamp(24px,3vw,32px)/1.25 Georgia,serif;color:#f2d18d;margin:0}.bookshelf-subtitle{color:#b6c3d4;font-size:13px;line-height:1.7;margin:7px 0 20px}
.bookshelf-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}.bookshelf-tab{cursor:pointer;border:1px solid #52617a;border-radius:8px;padding:10px 16px;background:#151e2c;color:#e1e5ed;font-weight:700;font-size:13px}
.bookshelf-tab.is-active,.bookshelf-tab:hover{background:#624821;border-color:#d6ac65;color:#ffe3a1}
.bookshelf-list{display:grid;gap:11px}.bookshelf-item{display:flex;gap:16px;background:linear-gradient(110deg,#142032,#101924);border:1px solid #37465a;border-radius:12px;padding:13px;min-width:0}
.bookshelf-cover{display:block;flex:0 0 76px;width:76px;align-self:start;aspect-ratio:3 / 4;overflow:hidden;border-radius:6px;background:#0c1521}.bookshelf-cover img{display:block;width:100%;height:100%;object-fit:contain}
.bookshelf-content{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0}.bookshelf-title{font-size:16px;color:#ffe4aa;font-weight:800}.bookshelf-title:hover{color:#fff}
.bookshelf-meta{color:#aebacc;font-size:12px;line-height:1.5}.bookshelf-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.bookshelf-actions a,.bookshelf-actions button{padding:8px 12px;font-size:12px;border-radius:8px}
.bookshelf-remove{cursor:pointer;border:1px solid #755256;color:#f4c1bd;background:#2a2029}.bookshelf-remove:hover{background:#493038}.bookshelf-empty{padding:30px 20px;text-align:center;background:#111c2b;border:1px dashed #52627a;border-radius:12px;color:#c0cad8;line-height:1.9}
.bookshelf-empty .gold-btn{display:inline-block;margin:14px 0 0}.bookshelf-error{padding:16px;border-radius:9px;color:#ffccb8;background:#302024;border:1px solid #795459;margin-bottom:16px}.bookshelf-loading{color:#c6d0df;padding:22px;text-align:center}
@media(max-width:530px){.bookshelf-item{gap:11px;padding:10px}.bookshelf-cover{flex-basis:63px;width:63px}.bookshelf-title{font-size:14px}.bookshelf-actions{gap:7px}.bookshelf-actions a,.bookshelf-actions button{padding:8px}.bookshelf-heading{gap:8px}}

/* V8: lời mời đăng ký trước khi mở nội dung chương */
.reader-gate{margin:24px auto 40px;padding:56px 28px;text-align:center;max-width:740px;background:#121c29;border:1px solid #6b5331;border-radius:18px}
.reader-gate h1{font:700 clamp(24px,4vw,36px) Georgia,serif;color:#f5cf8c;margin:8px 0 16px}
.reader-gate p{color:#cbd8e7;max-width:520px;margin:0 auto 24px;line-height:1.8}
.gate-emblem{font-size:42px}.gate-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:600px){.reader-gate{margin:16px 0;padding:34px 18px}}


/* V9 - Hồ sơ cá nhân, ảnh đại diện và đổi mật khẩu */
.member-account-v9{max-width:480px;margin:auto;text-align:center}
.member-account-v9 .member-avatar{width:108px;height:108px;margin-bottom:15px;border:2px solid #e1bb73;overflow:hidden;box-shadow:0 0 0 5px #d9ae6420}
.member-account-v9 .member-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.member-profile-form{text-align:left;padding:18px;border:1px solid #465167;border-radius:12px;background:#0b121d}
.member-profile-form input[type=file]{height:auto;min-height:46px;padding:10px;cursor:pointer}
.member-profile-form input[type=file]::file-selector-button{border:1px solid #a57a3b;color:#ffe0a0;background:#1e2735;padding:8px;border-radius:6px;margin-right:9px}
.member-profile-form .gold-btn{margin-top:0}
.member-profile-form .simple-btn{padding:10px 12px;width:100%;cursor:pointer}
.member-security{margin-top:22px;padding:18px;text-align:left;border:1px solid #465167;border-radius:12px;background:#0b121d}
.member-security h3{font:700 21px Georgia,serif;color:#f2ca7f;margin:0 0 18px}
.member-security button{width:100%;padding:12px;cursor:pointer}
.member-account-v9 .member-profile-field{margin:16px 0}
.member-account-v9 .member-small{line-height:1.6;margin:1px 0 4px}
.member-account-v9 .member-account-actions{gap:8px}
@media(max-width:680px){.member-profile-form,.member-security{padding:13px}.member-account-v9 .member-avatar{width:90px;height:90px}}

/* V10: Bình luận, đánh giá - giữ màu đen vàng của Tiên Giới Truyện 3D */
.tg-community-shell{background:#131d2a;border:1px solid #514630;border-radius:13px;margin:26px auto;padding:22px;max-width:960px;color:#f1f2f5}
.tg-community-shell h2{font-family:Georgia,serif;color:#f0c67c;margin:0 0 12px;font-size:23px}
.tg-community-shell a{color:#efc877;text-decoration:underline}
.tg-rating-summary{margin:8px 0;color:#c6d1e0}
.tg-rating-summary strong{color:#f2c574;font-size:25px}
.tg-stars{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}
.tg-star{font:32px Arial,sans-serif;background:#202d3e;border:1px solid #68563c;border-radius:8px;color:#6b7682;padding:5px 10px;cursor:pointer;transition:background .2s,color .2s}
.tg-star.chosen,.tg-star:hover,.tg-star:focus-visible{color:#f7c960;background:#3b3224}
.tg-star:disabled{opacity:.65;cursor:wait}
.tg-comment-form{display:flex;flex-direction:column;gap:9px;margin:15px 0 24px}
.tg-comment-form label{color:#eec574;font-weight:700}
.tg-comment-form textarea{resize:vertical;width:100%;box-sizing:border-box;border:1px solid #4e5b70;border-radius:8px;background:#0c141f;color:#f5f6f7;font:inherit;line-height:1.6;padding:12px}
.tg-comment-form textarea:focus{outline:2px solid #e4b869}
.tg-comment-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tg-comment-footer small{color:#b1bccb}
.tg-comment-form .gold-btn{cursor:pointer}
.tg-comment-form .gold-btn:disabled{opacity:.55}
.tg-status{min-height:1.35em;color:#ffb6a7;margin:4px 0;font-size:13px}
.tg-status.tg-ok{color:#9de4b1}
.tg-comment-list{display:flex;flex-direction:column;gap:11px}
.tg-comment{padding:13px;border:1px solid #3b4a60;border-radius:10px;background:#101824;overflow-wrap:anywhere}
.tg-comment-reply{margin-left:30px;border-left:3px solid #c09b56}
.tg-comment-hidden{opacity:.75}
.tg-comment-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.tg-comment-head strong{color:#f0c67c}
.tg-comment-head time{font-size:12px;color:#aebccc}
.tg-comment-body{white-space:normal;line-height:1.65;margin:10px 0}
.tg-comment-actions{display:flex;gap:12px}
.tg-comment-actions button,.tg-context button{color:#efd088;background:transparent;border:0;cursor:pointer;padding:5px 0;font:inherit;font-size:13px}
.tg-comment-actions button:hover{text-decoration:underline}
.tg-context{margin:0;color:#c5d2de}
.tg-alert{color:#ffb3a6;overflow-wrap:anywhere}
.tg-moderation-card{padding:14px;border:1px solid #435064;background:#101824;border-radius:10px;margin:10px 0;overflow-wrap:anywhere}
.tg-moderation-card strong{color:#efc579}
.tg-moderation-card .admin-actions{margin-top:10px}
.tg-moderation-hidden{opacity:.65}
@media(max-width:600px){.tg-community-shell{padding:15px;margin:18px 0}.tg-comment-reply{margin-left:14px}.tg-star{font-size:26px;padding:5px 8px}}

/* V11 — Trang Tài khoản với mục Chỉnh sửa hồ sơ riêng */
.member-account-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 12px;text-align:center}
.member-account-menu .gold-btn,.member-account-menu .simple-btn{margin:0;min-height:47px;padding:12px 10px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:9px;cursor:pointer}
.member-account-menu .gold-btn{border:0}
.member-back-button{display:block;border:0;background:transparent;color:#f3c77d;font-size:14px;font-weight:700;cursor:pointer;margin:0 0 22px;padding:6px 0;text-align:left}
.member-back-button:hover{text-decoration:underline}
.member-edit-screen .member-security{margin-top:12px}
.member-success-banner{margin:12px 0 18px;padding:13px;border:1px solid #4d916f;background:#17372e;color:#aff5cd;border-radius:9px;font-size:13px;line-height:1.6}
.member-account-home .member-profile-field{margin:10px 0}
@media(max-width:540px){.member-account-menu{grid-template-columns:1fr}.member-account-menu .gold-btn,.member-account-menu .simple-btn{width:100%}}
/* ================================================================
   TIEN GIOI TRUYEN 3D | V12 THIEN CUNG
   Visual-only skin. All Supabase data, routes & V11 features retained.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Noto+Serif:wght@500;600;700;800&display=swap');
:root{
  --bg:#080c12;--surface:#101824;--surface2:#192535;
  --muted:#acb8c6;--gold:#e8be73;--gold2:#b6833e;
  --white:#f6f0e6;--line:rgba(218,171,91,.25);
  --v12-border:rgba(222,174,92,.31);--v12-line:rgba(218,174,101,.17);
  --v12-panel:linear-gradient(151deg,rgba(24,35,49,.96),rgba(9,16,25,.98));
  --v12-serif:'Noto Serif',Georgia,serif;
  --v12-shadow:0 18px 50px rgba(0,0,0,.34);
}
html{scroll-padding-top:122px}
body{
  color:var(--white);
  font-family:"Times New Roman",Times,serif;
  background:
    radial-gradient(ellipse 750px 460px at 90% 370px,rgba(182,123,51,.07),transparent 75%),
    radial-gradient(ellipse 800px 700px at -10% 850px,rgba(30,62,84,.24),transparent 72%),
    linear-gradient(180deg,#070a10 0%,#0b111a 46%,#080d14 100%);
  min-height:100vh;
}
body::before{
  content:'';position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(219,172,95,.45) .65px,transparent .85px);
  background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
button,input,textarea,select{font-family:inherit}
button,a{transition:background-color .2s,border-color .2s,box-shadow .2s,color .2s,transform .2s}
:focus-visible{outline:2px solid #f8d49a!important;outline-offset:3px}
::selection{background:#a87938;color:#fff}
.realm-bar{background:linear-gradient(90deg,#0c1018,#211b15 45%,#0b1017);border-bottom:1px solid rgba(218,175,92,.28);min-height:28px;display:flex;align-items:center}
.realm-bar-inner{max-width:1470px;margin:auto;width:100%;display:flex;justify-content:space-between;gap:12px;padding:6px 28px;color:#c79e61;letter-spacing:.18em;text-transform:uppercase;font-size:9px;font-weight:700}
.realm-bar-inner span:nth-child(2){color:#e0c28b}
.site-header{background:rgba(7,12,20,.94);border-bottom:1px solid rgba(220,171,90,.36);box-shadow:0 14px 38px #0007}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#e1b96d 49%,transparent);opacity:.5}
.header-inner{max-width:1470px;min-height:82px;padding:10px 28px;gap:25px}
.brand{gap:8px;color:#f3d197;font-size:22px;letter-spacing:-.045em;font-family:var(--v12-serif);font-style:normal;text-shadow:0 2px 22px rgba(196,128,46,.3)}
.brand em{font-style:normal;color:#edd5a2;font-size:18px}
.brand .brand-emblem{display:block;width:57px;height:57px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(238,182,77,.18));flex-shrink:0}
.nav{gap:4px;justify-content:center}
.nav a{position:relative;padding:12px 11px;font-size:12px;font-weight:700;color:#cfd6df;border-radius:6px}
.nav a:hover,.nav a.active{color:#ffda91;background:rgba(221,168,87,.065)}
.nav a:not(.member-nav)::after{content:'';position:absolute;bottom:4px;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#f2c578,transparent);transform:scaleX(0);transition:transform .2s}
.nav a:not(.member-nav).active::after,.nav a:not(.member-nav):hover::after{transform:scaleX(1)}
.nav .member-nav{background:linear-gradient(145deg,rgba(197,143,68,.17),rgba(211,163,84,.07));border:1px solid rgba(241,187,90,.56);border-radius:999px;padding:11px 16px!important;box-shadow:inset 0 1px rgba(255,255,255,.09)}
.search{border-radius:999px;background:#141e2b;border:1px solid #536077;width:min(235px,19vw);min-width:175px;box-shadow:inset 0 2px 6px rgba(0,0,0,.22)}
.search:focus-within{border-color:#e6bb70;box-shadow:0 0 0 3px rgba(216,163,74,.14)}
.search input{height:39px;font-size:11px}
.shell{max-width:1470px;padding:0 28px 42px}
.main-grid{gap:24px;grid-template-columns:minmax(0,1fr) 298px}
.section{margin-bottom:35px;scroll-margin-top:140px}
.section-title{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(216,170,94,.22);position:relative}
.section-title::after{content:'';position:absolute;bottom:-1px;left:0;width:85px;height:2px;background:linear-gradient(90deg,#f5d28c,transparent)}
.section-title h2{font:800 clamp(18px,1.7vw,24px)/1.35 var(--v12-serif);letter-spacing:-.025em;color:#f9dfac;text-shadow:0 3px 24px rgba(224,163,62,.18)}
.section-title a{font-weight:700;font-size:12px;white-space:nowrap;color:#dcb56e}
.section-title a:hover{color:#fff0cc}
.story-slider{height:clamp(255px,26vw,377px);margin:26px 0 34px;border:1px solid rgba(229,178,94,.5);border-radius:16px;box-shadow:0 0 0 5px rgba(236,176,75,.035),0 25px 75px #000a}
.story-slider::before{content:'';position:absolute;z-index:4;inset:9px;border:1px solid rgba(238,188,113,.22);border-radius:10px;pointer-events:none}
.story-slider::after{content:'✦';position:absolute;z-index:4;top:10px;right:17px;color:#f9daa7;text-shadow:0 0 13px #f1c3768a;font-size:16px;pointer-events:none}
.slider-image-wide{object-fit:contain;background:#0b141f}
.slider-content{left:8%;width:54%;max-width:520px}
.slider-eyebrow{font-weight:800;font-size:11px;letter-spacing:.23em;color:#f3cf8e}
.slider-content h2{font:800 clamp(25px,3.1vw,46px)/1.23 var(--v12-serif);color:#fbe0ad;text-shadow:0 3px 20px #03070ceb;letter-spacing:-.02em}
.slider-content p{font-size:13px;color:#e0e0df;line-height:1.85}
.slider-shade{background:linear-gradient(90deg,rgba(7,11,18,.94),rgba(12,19,29,.87) 27%,rgba(7,12,19,.26) 72%,rgba(7,11,17,.08))}
.slider-arrow{width:42px;height:42px;opacity:.95;background:rgba(9,14,23,.75);border:1px solid rgba(244,200,126,.64);font-size:18px;backdrop-filter:blur(8px)}
.slider-prev{left:16px}.slider-next{right:16px}
.slider-dots{bottom:17px;backdrop-filter:blur(8px)}
.slider-dot{height:8px;min-width:8px;width:8px}
.slider-dot.is-active{width:25px}
.featured-grid{gap:17px;grid-template-columns:repeat(4,minmax(0,1fr))}
.featured,.comic-card{background:linear-gradient(180deg,#192435,#0e1724);border:1px solid rgba(215,171,102,.27);border-radius:13px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.22);position:relative}
.featured::before,.comic-card::before{content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,237,188,.04);pointer-events:none}
.featured:hover,.comic-card:hover{transform:translateY(-5px);border-color:#e8bf79;box-shadow:0 18px 34px rgba(0,0,0,.5),0 0 20px rgba(222,160,80,.09)}
.featured img,.comic-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;display:block;background:#0c1420}
.featured .card-body{padding:14px 13px 16px;min-height:88px;position:relative}
.card-title{display:block;font-size:13px;color:#f5e8d2;font-weight:800;line-height:1.5}
.featured:hover .card-title{color:#ffe0a0}
.muted{color:#adbac9;font-size:12px;line-height:1.65}
.featured .tag{background:linear-gradient(110deg,#b58a48,#edcb86);padding:3px 7px;font-size:9px;float:none}
.comic-grid{gap:17px}
.comic-img{overflow:hidden}
.comic-card .comic-title{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:14px;color:#f0e3cc;font-size:13px;min-height:53px;line-height:1.6}
.comic-card .play{width:36px;height:36px;bottom:14px;left:13px;box-shadow:0 0 17px rgba(0,0,0,.6);font-size:13px}
.mini-grid{gap:12px}
.mini-card{border-color:rgba(222,183,108,.2);background:linear-gradient(115deg,#162234,#101927);border-radius:11px;padding:11px;gap:12px;box-shadow:0 6px 19px rgba(0,0,0,.15)}
.mini-card:hover{box-shadow:0 14px 25px #0006}
.mini-card img{height:83px;width:62px;object-fit:contain;background:#0e1827;border-radius:7px}
.mini-title{color:#e9dfd0;font-size:12px;font-weight:800}
.sidebar-panel{border:1px solid rgba(232,181,93,.34);border-radius:13px;padding:21px 18px;margin-bottom:18px;background:linear-gradient(140deg,rgba(33,31,27,.95),rgba(13,22,31,.96));box-shadow:var(--v12-shadow),inset 0 1px rgba(244,208,145,.11);position:relative;overflow:hidden}
.sidebar-panel::before{content:'✦';position:absolute;right:14px;top:12px;font-size:19px;color:rgba(228,182,113,.45)}
.sidebar-panel h3{font:700 17px var(--v12-serif);color:#f7dca4;margin:0 0 20px;padding:0 0 13px;border-bottom:1px solid rgba(221,174,96,.2)}
.genre{padding:8px 10px;border-radius:7px;border:1px solid rgba(221,180,106,.48);background:rgba(12,19,28,.83);color:#f0ddbd;font-size:11px}
.genre:hover,.genre.current{background:#9b6c30;border-color:#eac17a;color:#fff}
.ranking{gap:13px}.rank-row{grid-template-columns:25px 46px 1fr;gap:10px}.rank-row img{height:62px;width:46px;object-fit:contain;border-radius:5px;background:#101724}.rank-row span{font-size:12px}.rank-no{background:linear-gradient(#b88a45,#64461f);color:#ffe2a9}
.latest-card{border-color:rgba(222,180,103,.19);border-radius:12px;background:linear-gradient(125deg,#1a2635,#101927);padding:13px;gap:13px;box-shadow:0 8px 24px #0004}
.latest-card:hover{box-shadow:0 14px 28px #0007;border-color:#d7aa62}
.latest-cover{border-radius:7px}.latest-name{color:#f9dda2}.latest-date{color:#9dabbd}
.latest-read{color:#f2c781}
.note{border-radius:11px;background:linear-gradient(100deg,rgba(80,59,31,.43),rgba(27,29,29,.76));padding:14px 16px;color:#e9d2a6;border-color:rgba(210,162,84,.4)}
/* Detail/book page */
.intro{padding:20px 0 32px}
.back{color:#e7c386;font-weight:800;font-size:13px;margin:13px 0 20px}
.back:hover{color:#fff3cd}
.detail-card{grid-template-columns:minmax(220px,285px) minmax(0,1fr);gap:35px;padding:29px;background:linear-gradient(130deg,#1b283a,#101926 57%,#101723);border:1px solid var(--v12-border);border-radius:18px;box-shadow:var(--v12-shadow)}
.detail-card>img{aspect-ratio:3/4;object-fit:contain;max-height:none;height:auto;max-width:285px;background:#0d1521;border-radius:12px;box-shadow:0 18px 36px #000a;border:1px solid rgba(225,183,109,.23)}
.detail-card h1{font:800 clamp(24px,3vw,39px)/1.35 var(--v12-serif);letter-spacing:-.03em;color:#ffe2a7;margin:8px 0 13px}
.description{line-height:2;color:#dce1e5;font-size:14px;white-space:pre-wrap}
.pill{color:#ebc489;border-color:rgba(220,172,94,.4);background:rgba(220,172,94,.055);padding:7px 12px;margin:5px 5px 8px 0}
.gold-btn{background:linear-gradient(120deg,#b88943 0%,#f7d990 48%,#cf963b 100%);color:#23180b;border-radius:9px;padding:12px 23px;box-shadow:inset 0 1px rgba(255,255,255,.52),0 8px 22px rgba(172,109,32,.15);font-weight:800}
.gold-btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);box-shadow:inset 0 1px #fff7,0 11px 26px rgba(202,138,50,.23)}
.simple-btn{background:linear-gradient(150deg,#263348,#172232);border:1px solid rgba(212,172,103,.35);color:#f5d49a;border-radius:9px;padding:11px 16px;font-weight:700}
.simple-btn:hover:not(:disabled){background:#354156;border-color:#e6ba70}
.chapter-list{background:linear-gradient(140deg,#151f2f,#101826);border:1px solid rgba(217,174,101,.28);border-radius:14px;padding:27px 30px;box-shadow:var(--v12-shadow)}
.chapter-list h2{font:700 24px var(--v12-serif);color:#f1d39b}
.chapter-row{padding:17px 6px;border-top-color:rgba(208,173,111,.16)}
.chapter-row a{color:#e6e7e6}.chapter-row a:hover{color:#ffd790}
/* Reader */
.reading{max-width:1010px;padding:32px 20px 88px}
.reader-head h1{font:800 clamp(24px,3vw,35px)/1.3 var(--v12-serif);color:#f6d79b}
.reader-head .sub{font-size:15px;margin:15px 0;color:#c5cdd7}
.reader-body{background:linear-gradient(155deg,#172334,#101925);border:1px solid rgba(222,180,103,.3);border-radius:17px;padding:clamp(20px,4vw,56px);margin:25px 0 30px;box-shadow:0 25px 55px #0006;color:#f2e9da;font-size:clamp(16px,1.65vw,20px);line-height:2.18;overflow-wrap:anywhere}
.reader-body p{margin:0 0 1.2em;text-indent:1.4em}
.reader-body img{width:auto;max-width:100%;height:auto;border-radius:8px;margin:0 auto 10px}
.reader-controls{justify-content:center;gap:14px}
.reader-controls .simple-btn{padding:12px 19px}
.reader-gate{background:linear-gradient(145deg,#1c2a3d,#0e1828);border-color:rgba(230,182,98,.55);box-shadow:var(--v12-shadow)}
.reader-gate h1{font-family:var(--v12-serif)}
/* Member, admin & community */
.member-wrap{max-width:1080px;border:1px solid rgba(235,182,98,.43);border-radius:20px;background:linear-gradient(138deg,#172438,#101925);box-shadow:0 28px 90px #000a}
.member-art{background:radial-gradient(circle at 48% 23%,rgba(224,181,100,.23),transparent 53%),linear-gradient(160deg,#1d2b3a,#080e19 77%);padding:42px}
.member-art h1{font:800 clamp(23px,2.6vw,34px)/1.3 var(--v12-serif);color:#f8d9a0}
.member-panel{padding:44px 48px}.member-panel h2{font:800 clamp(25px,2.8vw,34px)/1.35 var(--v12-serif)}
.member-form input,.member-profile-form input{border:1px solid #58657c;border-radius:10px;background:#0d1623}
.member-profile-form,.member-security{background:#101a28;border:1px solid rgba(228,183,105,.29);border-radius:12px}
.member-avatar{box-shadow:0 0 0 5px rgba(213,154,72,.14),0 0 28px rgba(197,144,69,.16)}
.member-account-menu .gold-btn,.member-account-menu .simple-btn{border-radius:11px}
.member-account-v9 .member-profile-field{border-color:rgba(227,185,111,.24);background:#111d2c}
.admin-panel{background:var(--v12-panel);border:1px solid var(--v12-border);border-radius:18px;padding:26px;box-shadow:var(--v12-shadow)}
.admin-heading h1{font-family:var(--v12-serif);color:#f6d5a0}
.admin-toolbar{border-bottom-color:rgba(228,181,103,.25)}
.admin-story-row,.banner-admin-row,.tg-moderation-card{border-color:rgba(220,176,110,.23);border-radius:12px;background:#14202e}
.admin-form input,.admin-form select,.admin-form textarea{border-radius:9px}
.tg-community-shell{background:linear-gradient(135deg,#1b2738,#111a28);border:1px solid var(--v12-border);border-radius:16px;padding:26px;box-shadow:var(--v12-shadow)}
.tg-community-shell h2{font:800 23px var(--v12-serif);color:#f7d49b}
.tg-comment{border-color:rgba(212,179,115,.25);background:#111d2b;border-radius:12px;padding:17px}
.tg-star{border-color:rgba(211,174,107,.5);background:#142232;border-radius:11px}
.tg-comment-form textarea{background:#0c1622}
.bookshelf-item{background:linear-gradient(120deg,#172437,#0d1825);border-color:rgba(223,181,109,.26);border-radius:14px;box-shadow:0 10px 25px #0003}
.bookshelf-heading h1{font-family:var(--v12-serif)}
.bookshelf-tab{border-color:rgba(220,172,96,.4);border-radius:10px}
/* Footer */
.footer{max-width:1470px;padding:30px 28px;margin:20px auto 0;border-top:1px solid rgba(221,172,86,.37);gap:28px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:49px;height:49px;object-fit:contain}
.footer-brand strong{font:800 17px var(--v12-serif);color:#efd39a}
.footer-brand span{font-size:11px;letter-spacing:.035em;color:#aebccc}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;font-weight:700;color:#cbb99d}
.footer-links a:hover{color:#ffe4af}
.footer small{color:#8f9eae}
@media(max-width:1280px){
 .header-inner{gap:13px;flex-wrap:wrap}
 .nav{gap:1px}
 .nav a{padding:11px 8px}
 .search{width:200px}
 .featured-grid{gap:12px}
}
@media(max-width:1100px){
 .header-inner{gap:12px}
 .nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;gap:4px;scrollbar-width:thin;scrollbar-color:#6a5330 transparent}
 .nav a{padding:9px 13px;white-space:nowrap}
 .search{margin-left:auto;width:260px;min-width:200px}
 .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
 .sidebar-panel{margin:0}
 .main-grid{grid-template-columns:minmax(0,1fr)}
 .story-slider{margin-top:19px}
}
@media(max-width:740px){
 .realm-bar-inner{justify-content:center;font-size:8px;letter-spacing:.11em;padding:6px 10px}
 .realm-bar-inner span:not(:nth-child(2)){display:none}
 .header-inner{padding:8px 14px;gap:6px;min-height:65px}
 .brand{font-size:18px;letter-spacing:-.05em}
 .brand em{font-size:16px}
 .brand .brand-emblem{width:39px;height:39px}
 .search{order:2;width:100%;min-width:0;margin:7px 0 1px}
 .search input{height:37px}
 .nav{order:3;width:100%;gap:3px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}
 .nav a{font-size:11px;padding:8px 10px!important}
 .nav .member-nav{padding:7px 12px!important;flex-shrink:0}
 .shell{padding:0 15px 32px}
 .story-slider{height:270px;margin:15px 0 25px;border-radius:12px}
 .story-slider::before{inset:6px}
 .slider-content{left:10%;width:65%;padding:5px 0}
 .slider-content h2{font-size:23px}
 .slider-content p{font-size:11px;line-height:1.55}
 .slider-content .gold-btn{font-size:11px;padding:8px 12px}
 .slider-image-portrait{width:54%;right:0}
 .slider-arrow{height:30px;width:30px;font-size:12px}
 .slider-prev{left:4px}.slider-next{right:4px}
 .main-grid{gap:18px}
 .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .comic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .mini-grid{grid-template-columns:1fr}
 .sidebar{grid-template-columns:1fr}
 .section-title h2{font-size:19px}
 .featured .card-body{padding:10px 10px 13px;min-height:75px}
 .card-title{font-size:12px}
 .detail-card{grid-template-columns:1fr;gap:15px;padding:17px}
 .detail-card>img{max-width:min(240px,100%);margin:0 auto}
 .detail-card h1{text-align:center;font-size:26px}
 .chapter-list{padding:18px}
 .reader-body{padding:20px 18px;line-height:2}
 .member-shell{padding-top:15px}
 .member-wrap{max-width:600px;margin:4px auto 0;grid-template-columns:1fr;border-radius:15px}
 .member-art{min-height:210px;padding:20px}
 .member-panel{padding:26px 20px}
 .admin-panel{padding:16px}
 .tg-community-shell{padding:18px}
 .footer{padding:24px 15px;margin-top:10px;gap:16px}
 .footer-links{order:3;width:100%}
}
@media(max-width:410px){
 .brand{font-size:16px}.brand em{font-size:14px}
 .story-slider{height:250px}
 .slider-content{width:70%}
 .slider-content h2{font-size:20px}
 .slider-content p{display:none}
 .comic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .latest-grid{grid-template-columns:1fr}
 .member-panel{padding:20px 15px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* V12 refinements for the inherited extra-wide sample hero */
.slider-slide:has(.slider-original-link){background:#122131}

.slider-slide:has(.slider-original-link) .slider-image-wide{background:transparent}


/* ==============================================================
   V12.2 – Chân trang 5 cột, phong cách Tiên Giới đen vàng.
   Chỉ bổ sung giao diện; không can thiệp Supabase / ứng dụng.
   ============================================================== */
.footer.tg-footer-v122{
  display:block;width:100%;max-width:none;margin:76px 0 0;padding:0;
  color:#c0c0d0;background:
    radial-gradient(circle at 10% 3%,rgba(211,157,79,.09),transparent 35%),
    linear-gradient(135deg,#1c1c32 0%,#171a2c 46%,#111827 100%);
  border-top:1px solid rgba(226,178,104,.4);box-shadow:0 -22px 62px rgba(0,0,0,.2);
}
.tg-footer-shell{max-width:1490px;margin:auto;padding:57px 36px 26px}
.tg-footer-grid{display:grid;grid-template-columns:minmax(270px,1.48fr) repeat(4,minmax(140px,1fr));gap:clamp(22px,2.7vw,53px);align-items:start}
.tg-footer-about{min-width:0}
.tg-footer-logo{display:flex;align-items:center;gap:12px;width:fit-content;margin:-8px 0 16px;color:#f4d8a3}
.tg-footer-logo img{flex:0 0 auto;width:55px;height:55px;object-fit:contain;filter:drop-shadow(0 2px 12px rgba(227,166,63,.3))}
.tg-footer-logo span{font:800 clamp(17px,1.4vw,23px)/1.22 Georgia,serif;letter-spacing:-.045em;text-shadow:0 2px 17px rgba(206,150,71,.13)}
.tg-footer-logo em{font-style:normal;white-space:nowrap}
.tg-footer-about>p{max-width:305px;margin:0 0 24px;color:#b4b7ca;font-size:13px;line-height:1.85}
.tg-footer-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tg-footer-cta a{display:inline-flex;min-height:39px;align-items:center;justify-content:center;gap:7px;padding:10px 17px;border-radius:9px;font-size:12px;font-weight:750;transition:transform .2s,filter .2s,border-color .2s}
.tg-footer-cta a:hover{transform:translateY(-2px)}
.tg-footer-primary{background:linear-gradient(115deg,#f1cf91,#c89545);color:#231607;border:1px solid #e8c079;box-shadow:0 5px 18px rgba(171,119,41,.16)}
.tg-footer-secondary{color:#f0d099;border:1px solid rgba(222,175,102,.51);background:rgba(231,182,105,.06)}
.tg-footer-secondary:hover{background:rgba(231,182,105,.14)}
.tg-footer-col h2{margin:0 0 19px;padding:1px 0 14px;font:800 12px/1.5 Georgia,serif;letter-spacing:.055em;color:#f3d6a1;border-bottom:1px solid rgba(226,184,116,.24)}
.tg-footer-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.tg-footer-col li{margin:0;padding:0}
.tg-footer-col a{display:inline-flex;align-items:center;color:#b9bbcc;font-size:12px;line-height:1.55;transition:color .18s,transform .18s}
.tg-footer-col a:hover{color:#ffe2ab;transform:translateX(3px)}
.tg-footer-col a:focus-visible,.tg-footer-logo:focus-visible,.tg-footer-backtop:focus-visible,.tg-footer-cta a:focus-visible{outline:2px solid #f5d28b;outline-offset:4px;border-radius:3px}
.tg-footer-bottom{margin-top:48px;padding-top:21px;border-top:1px solid rgba(197,183,158,.16);display:flex;justify-content:space-between;align-items:start;gap:25px}
.tg-footer-bottom p{margin:0 0 7px;color:#989cb1;font-size:11px;line-height:1.65}
.tg-footer-backtop{white-space:nowrap;color:#e2bf82;font-size:12px;font-weight:750;display:inline-flex;align-items:center;gap:8px;padding:4px 0}
.tg-footer-backtop span{font-size:19px;line-height:1}
.tg-footer-backtop:hover{color:#ffe4b2}
@media(max-width:1160px){
 .tg-footer-grid{grid-template-columns:minmax(250px,1.2fr) repeat(2,minmax(160px,1fr));gap:34px}
 .tg-footer-about{grid-row:span 2}
 .tg-footer-shell{padding:47px 30px 23px}
}
@media(max-width:740px){
 .footer.tg-footer-v122{margin-top:48px}
 .tg-footer-shell{padding:37px 19px 22px}
 .tg-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:30px}
 .tg-footer-about{grid-column:1/-1;grid-row:auto}
 .tg-footer-about>p{max-width:520px}
 .tg-footer-cta{flex-direction:row;flex-wrap:wrap}
 .tg-footer-col h2{font-size:12px;margin-bottom:13px;padding-bottom:11px}
 .tg-footer-col ul{gap:11px}
 .tg-footer-col a{font-size:12px}
 .tg-footer-bottom{margin-top:35px;flex-direction:column;gap:5px}
}
@media(max-width:390px){
 .tg-footer-grid{column-gap:14px;row-gap:26px}
 .tg-footer-col a{font-size:11.5px}
 .tg-footer-cta a{font-size:11.5px;padding:10px 13px}
}


/* ===== V12.3 - Mega menu thể loại, responsive, bàn phím ===== */
.nav .tg-genre-trigger{
 appearance:none;border:1px solid transparent;border-radius:8px;background:transparent;
 padding:12px 12px;color:#cfd6df;font-size:12px;font-weight:800;line-height:1.5;
 white-space:nowrap;display:flex;gap:7px;align-items:center;flex-shrink:0;
 transition:color .18s,background .18s,border-color .18s;
}
.nav .tg-genre-trigger:hover,.nav .tg-genre-trigger.is-open{color:#ffdea0;background:rgba(229,190,115,.11);border-color:rgba(229,190,115,.3)}
.nav .tg-genre-trigger span{font-size:13px;transition:transform .18s}
.nav .tg-genre-trigger.is-open span{transform:rotate(180deg)}
.tg-mega-panel[hidden]{display:none!important}
.tg-mega-panel{
 position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%);
 z-index:99;display:grid;grid-template-columns:245px minmax(0,1fr);
 width:min(1190px,calc(100vw - 36px));max-height:min(78vh,680px);overflow-y:auto;
 background:linear-gradient(130deg,#1a1b2e 0%,#141a2a 59%,#0e1420 100%);
 border:1px solid rgba(232,184,104,.51);border-radius:0 0 18px 18px;
 box-shadow:0 27px 65px #000c,inset 0 1px 0 #ffe8b315;
 scrollbar-color:#79603c #151927;
}
.tg-mega-explore{padding:25px 19px 25px 24px;border-right:1px solid #edbc6e2a;background:linear-gradient(135deg,#b7892d0d,transparent)}
.tg-mega-explore h2,.tg-mega-heading h2{margin:0 0 17px;color:#f1cc8b;font:700 16px Georgia,serif;letter-spacing:.075em}
.tg-mega-explore nav{display:grid;gap:5px}
.tg-mega-explore a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:8px;color:#ebd9bf;font-weight:600;font-size:13px;white-space:normal;transition:background .18s,color .18s}
.tg-mega-explore a:hover,.tg-mega-explore a:focus-visible{background:#deb26f18;color:#f7d592}
.tg-mega-explore a::first-letter{color:#e5be73}
.tg-mega-genres{min-width:0;padding:23px 28px 16px}
.tg-mega-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 17px;padding-bottom:12px;border-bottom:1px solid #e5be7327}
.tg-mega-eyebrow{display:block;font-size:9px;color:#d5ac66;letter-spacing:.28em;margin-bottom:5px}
.tg-mega-heading h2{margin:0;color:#f5d59e;font-size:18px}
.tg-mega-total{color:#a7acbb;font-size:11px}
.tg-mega-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:15px;row-gap:5px}
.tg-mega-genre{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:8px 10px;border-radius:7px;font-size:12px;color:#eee3d0;border:1px solid transparent;transition:background .16s,border-color .16s}
.tg-mega-genre:hover,.tg-mega-genre:focus-visible{color:#ffe0a2;background:#efc07815;border-color:#edbd7b33}
.tg-mega-genre > span:first-child{overflow-wrap:anywhere}
.tg-mega-count{min-width:23px;text-align:center;white-space:nowrap;padding:2px 6px;border-radius:999px;background:#d8a35426;color:#f5cd83;font-weight:800;font-size:11px}
.tg-mega-count.zero{background:#adb7c20c;color:#88909c;font-weight:500}
.tg-mega-footnote{font-size:10px;color:#919cad;margin:16px 0 0;padding-top:10px;border-top:1px solid #e5be7315}
.sidebar .genre small{color:#e5c080;margin-left:2px;font-size:10px}
.sidebar .genre-all{background:#a47b3630;color:#f6cf8d}
.tg-genre-directory{padding:17px 0 40px}
.tg-directory-intro{margin:6px 0 20px;background:linear-gradient(110deg,#202433,#121a25);border:1px solid #d5aa6844;padding:27px;border-radius:14px}
.tg-directory-intro > span{color:#d0a660;font-size:10px;letter-spacing:.2em;font-weight:800}
.tg-directory-intro h1{font:700 30px Georgia,serif;color:#f6d89e;margin:9px 0}
.tg-directory-intro p{color:#aab6c3;margin:0}
.tg-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tg-directory-item{display:flex;align-items:center;justify-content:space-between;gap:9px;background:#151e2b;border:1px solid #a77c4340;border-radius:8px;padding:12px 14px;color:#e7dfd4}
.tg-directory-item:hover{border-color:#e5be73;color:#f2d19b;background:#222333}
.tg-directory-item small{color:#d0ad76;white-space:nowrap}
@media(max-width:1050px){
 .tg-mega-panel{grid-template-columns:205px minmax(0,1fr)}
 .tg-mega-categories{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tg-mega-genres{padding:22px 17px}
 .nav .tg-genre-trigger{padding:10px 8px}
}
@media(max-width:720px){
 .tg-mega-panel{width:calc(100vw - 18px);grid-template-columns:1fr;max-height:min(74dvh,650px);top:100%;border-radius:0 0 13px 13px}
 .tg-mega-explore{padding:15px 15px 10px;border-right:0;border-bottom:1px solid #d6a7653a}
 .tg-mega-explore h2{font-size:13px;margin-bottom:8px}
 .tg-mega-explore nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
 .tg-mega-explore a{font-size:11px;padding:7px}
 .tg-mega-genres{padding:17px 13px}
 .tg-mega-heading h2{font-size:16px}
 .tg-mega-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 5px}
 .tg-mega-genre{font-size:11px;padding:8px 6px}
 .tg-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tg-directory-intro{padding:19px}
 .tg-directory-intro h1{font-size:25px}
 .nav .tg-genre-trigger{font-size:11px;padding:8px 10px}
}
@media(max-width:370px){.tg-mega-panel{width:calc(100vw - 10px)}.tg-mega-explore nav{grid-template-columns:1fr 1fr}.tg-mega-genre{font-size:10px}.tg-directory-grid{grid-template-columns:1fr}}

/* V12.4 — Tác giả · tình trạng truyện · lượt đọc · đề xuất cùng thể loại */
.tg-story-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 10px;color:#b8c2cd;font-size:11px;line-height:1.65}
.tg-story-meta span{max-width:100%;overflow-wrap:anywhere}
.tg-progress{border:1px solid #c29b644d;background:#b3883d15;color:#ecc98b;border-radius:20px;padding:1px 8px}
.tg-progress.is-complete{color:#a1ebc4;border-color:#70b58b55;background:#1c6c4630}
.detail-card .tg-story-meta{font-size:13px;margin:14px 0}
.featured .tg-story-meta{display:flex;flex-direction:column;gap:3px;font-size:10px;margin:7px 0 0}
.featured .tg-story-meta span{max-width:100%}
.tg-comic-meta{margin-top:5px;color:#b8c2cc;font-weight:400;font-size:11px}
.tg-reader-views{font-weight:700;color:#d5b77e}
.tg-related{margin:28px auto;width:100%;max-width:1080px;padding:20px;border:1px solid #d9ae6540;border-radius:13px;background:linear-gradient(115deg,#182131,#111925)}
.tg-related .section-title{margin-bottom:14px}
.tg-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tg-related-item{display:flex;align-items:flex-start;gap:12px;min-width:0;border:1px solid #bd986333;border-radius:9px;background:#0b1422;padding:10px;text-decoration:none;color:#eee3d2;transition:border-color .2s,background .2s}
.tg-related-item:hover,.tg-related-item:focus-visible{border-color:#e5ba79;background:#20273a}
.tg-related-item img{width:68px;height:91px;object-fit:contain;flex:0 0 68px;background:#0e141d;border-radius:6px}
.tg-related-info{min-width:0;display:grid;gap:5px}
.tg-related-info strong{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.tg-related-info small{font-size:11px;line-height:1.35;color:#aeb8c4;overflow-wrap:anywhere}
.tg-admin-help{background:#ddad5920;border:1px solid #d1a66e4f;border-radius:8px;padding:11px;color:#eacb91;font-size:12px;line-height:1.65}
@media(max-width:900px){.tg-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.tg-related{padding:13px;margin:20px auto}.tg-related-grid{grid-template-columns:1fr}.tg-related-item img{width:61px;height:82px;flex-basis:61px}}

/* V12.6 — Trình chọn nhiều thể loại (quản trị) và cảnh báo 18+ */
.tg-genre-picker{min-width:0;border:1px solid #ac854c80;border-radius:12px;padding:14px 15px 16px;background:linear-gradient(135deg,#182333,#111925)}
.tg-genre-picker legend{padding:0 10px;color:#f2d096;font-weight:700;font-size:15px}
.tg-genre-picker .tg-genre-help{font-size:12px;line-height:1.6;color:#b9c4cf;margin:7px 0 12px}
.tg-genre-picker-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px}
.tg-genre-picker-actions #tg-genre-search{flex:1 1 220px;max-width:360px;background:#0b141f;color:#f4ead7;border:1px solid #677180;border-radius:8px;padding:11px}
.tg-genre-picker-actions .simple-btn{margin:0;font-size:12px;padding:9px 11px}
.tg-genre-count{color:#f3d398;font-size:12px;margin-left:auto}
.tg-genre-checkbox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:390px;overflow-y:auto;padding:3px 2px 8px}
.form-grid .tg-genre-checkbox-grid .tg-genre-choice{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;margin:0;padding:9px 11px;background:#111b28;border:1px solid #384757;border-radius:8px;color:#e9e0d3;font-size:12px;font-weight:600;cursor:pointer;transition:background .16s,border-color .16s}
.form-grid .tg-genre-choice:has(input:checked){background:#7d5b2d4d;border-color:#e5b36f;color:#ffe3aa}
.form-grid .tg-genre-choice:hover{border-color:#dcb36d}
.form-grid .tg-genre-checkbox-grid .tg-genre-choice input{width:16px;height:16px;flex:0 0 auto;accent-color:#e8ba75}
.form-grid .tg-genre-choice span{overflow-wrap:anywhere}
.form-grid .tg-genre-choice[hidden]{display:none}
.form-grid .tg-genre-adult{border-color:#c5796780;background:#3a20273c;color:#ffd1be}
.form-grid .tg-genre-legacy{border-style:dashed}
.tg-genre-preview{color:#f5d99f;font-size:12px;line-height:1.75;margin:13px 0 2px;overflow-wrap:anywhere}
.tg-age-tag{color:#ffcab0;border:1px solid #da8b72a3;border-radius:5px;padding:2px 7px;background:#733a2b42}
@media(max-width:780px){.tg-genre-checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.tg-genre-checkbox-grid{grid-template-columns:1fr}.tg-genre-count{margin-left:0}.tg-genre-picker{padding:10px}}

/* V12.7: Tìm kiếm nâng cao / Bảng xếp hạng / Quản lý thể loại */
.tg-search-page,.tg-rank-page{padding-top:28px;padding-bottom:55px}
.tg-search-page h1,.tg-rank-page h1{font-family:Georgia,serif;color:var(--gold,#eac079)}
.tg-search-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;background:#111a28;border:1px solid #665138;border-radius:14px;padding:20px;margin:20px 0 24px}
.tg-search-form label{display:flex;flex-direction:column;gap:8px;color:#f0d6a6;font-weight:600;font-size:13px;min-width:0}
.tg-search-form input,.tg-search-form select,.tg-category-form input{width:100%;border:1px solid #48596d;border-radius:9px;padding:11px;background:#0b121d;color:#f5ead7;font-size:14px;min-height:42px}
.tg-search-form button{align-self:end;margin:0}
.tg-search-page .section{margin:20px 0}
.tg-search-page #tg-search-results:has(>p){display:block}
.tg-ranking-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.tg-ranking-cols section{border:1px solid #665138;background:#0f1825;padding:18px;border-radius:14px;min-width:0}
.tg-ranking-cols h2{color:#f1cf8d;font-family:Georgia,serif;margin:0 0 17px}
.tg-rank-card{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff20;padding:10px 0;color:#f1e6d3;text-decoration:none}
.tg-rank-card:last-child{border-bottom:0}.tg-rank-card:hover strong{color:#f4c772}
.tg-rank-card img{width:52px;height:70px;object-fit:contain;flex:0 0 52px;background:#090f18;border-radius:5px}
.tg-rank-index{flex:0 0 22px;text-align:center;color:#f5c877}
.tg-rank-card div{display:grid;gap:5px;min-width:0}.tg-rank-card strong{overflow-wrap:anywhere}.tg-rank-card small{color:#aebccd}
.tg-category-manager{padding:8px 0 30px}.tg-category-manager h2{color:#f4d29c}
.tg-category-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:15px 0 22px;padding:16px;border:1px solid #665138;border-radius:12px;background:#0e1825}
.tg-category-form label{display:grid;gap:8px;color:#eac079;font-size:13px;flex:1 1 190px}
.tg-category-form label:nth-child(2){flex:0 0 115px}
.tg-category-form fieldset{padding:0;border:0;min-width:0}
.tg-category-form button{margin:0}.tg-category-message{width:100%;font-size:13px;color:#f4c36e;margin:0}
.tg-category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tg-category-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;background:#101a29;border:1px solid #3e4b59;border-radius:10px;padding:10px}
.tg-category-row div:first-child{display:grid;gap:5px;min-width:0}.tg-category-row strong{color:#f0e3cc;overflow-wrap:anywhere}
.tg-category-row small{color:#a9b8c6}.tg-category-row .admin-actions{flex-wrap:wrap}
.tg-category-row button{padding:8px;font-size:12px}
@media(max-width:760px){.tg-search-form,.tg-ranking-cols,.tg-category-list{grid-template-columns:1fr 1fr}.tg-ranking-cols{grid-template-columns:1fr}}
@media(max-width:530px){.tg-search-form,.tg-category-list{grid-template-columns:1fr}.tg-category-form label:nth-child(2){flex:1 1 100px}.tg-rank-card img{width:46px;height:62px;flex-basis:46px}}