/* ====== Tokens ====== */
:root{
--sky-top:#fff7fb;
--sky-mid:#ffe6be;
--sky-low:#fff6d8;
--sun:#ffd54f;
--sun-hot:#ffb300;
--ink:#2b2b2b;
--ink-soft:#636363;
--card:#ffffffd8;
--bd:#ffffff;
--accent:#ffb74d;
--accent-2:#ffcc80;
--radius:22px;
--shadow:0 16px 50px rgba(255,171,64,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
color:var(--ink);
background:linear-gradient(180deg, var(--sky-top), var(--sky-mid) 45%, var(--sky-low));
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
/* ====== Frame ====== */
.container{width:min(1100px,92%); margin-inline:auto}
.site-header{
position:sticky; top:0; z-index:10;
background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.6), transparent);
backdrop-filter:saturate(130%) blur(6px);
border-bottom:1px solid #fff5;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0;}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none}
.brand-text{font-weight:800; letter-spacing:.3px; color:#2b2b2b}
.sun-dot{width:22px; height:22px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fff6bf 0 30%, var(--sun) 45%, var(--sun-hot) 70%);
box-shadow:0 0 0 6px #fff3, 0 10px 18px rgba(255,163,87,.45);
}
.menu .link{
text-decoration:none; color:#2b2b2b; font-weight:600; padding:8px 12px; border-radius:12px;
}
.menu .link:hover{ background:#ffffffaa; box-shadow:var(--shadow) }
/* ====== Hero ====== */
.hero{ position:relative; overflow:clip; }
.sky{ position:absolute; inset:0;
background: radial-gradient(900px 300px at 50% 120%, rgba(255,221,144,.45), transparent 55%);
}
.sun{
position:absolute; left:50%; transform:translateX(-50%); bottom:-40px;
width:420px; height:420px; border-radius:50%;
background:radial-gradient(circle at 50% 45%, #fff7cf 0 35%, var(--sun) 55%, var(--sun-hot) 100%);
box-shadow:0 0 0 18px rgba(255,255,255,.45), 0 40px 100px rgba(255,163,87,.55);
filter:saturate(110%);
}
.cloud{
position:absolute; top:120px; width:240px; height:70px; background:#fff; border-radius:50px;
box-shadow: 60px -18px 0 12px #fff, 120px -10px 0 4px #fff, 20px 10px 0 10px #fff, 100px 12px 0 6px #fff;
opacity:.95; filter:drop-shadow(0 8px 14px rgba(163,163,163,.25));
animation:float 30s linear infinite;
}
.cloud-1{ left:-10%; animation-duration:34s; transform:scale(1.1) }
.cloud-2{ left:55%; top:160px; animation-duration:28s; transform:scale(.9) }
.cloud-3{ left:20%; top:70px; animation-duration:36s; transform:scale(1.3) }
@keyframes float{ 0%{transform:translateX(-10vw)} 100%{transform:translateX(110vw)} }
.hero-inner{ text-align:center; padding:84px 0 160px }
.title-xl{
margin:0; font-size:min(15vw, 90px); line-height:1; font-weight:800;
background:linear-gradient(180deg,#2b2b2b,#444); -webkit-background-clip:text; color:transparent;
text-shadow:0 8px 30px rgba(255,163,87,.25);
}
.lead{ color:var(--ink-soft); margin:.5rem auto 0; max-width:780px }
/* ====== Sections ====== */
.content{ padding:40px 0 120px }
.role-section{
position:relative; margin:28px 0; padding:22px;
background:linear-gradient(180deg, var(--card), #ffffffc0);
border:1px solid var(--bd); border-radius:var(--radius); box-shadow:var(--shadow);
}
.role-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:8px }
.badge{
flex:0 0 auto; width:56px; height:56px; border-radius:16px;
display:grid; place-items:center; font-weight:800; color:#7a4a00;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow:0 12px 24px rgba(255,171,64,.25);
}
.role-title{ margin:0; line-height:1.2 }
.role-desc{ margin:4px 0 0; color:var(--ink-soft) }
.role-body{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; margin-top:12px }
.facts{ margin:0; padding-left:18px }
.facts li{ margin:6px 0; }
.role-photos{
display:grid; grid-template-columns: repeat(3,1fr); gap:8px;
}
.role-photos img{
height:100px; object-fit:cover; border-radius:14px; border:1px solid #fff;
box-shadow:0 10px 24px rgba(0,0,0,.08);
}
/* ====== Cat Scroller ====== */
.cat-scroller{
position:fixed; right:18px; bottom:14px; z-index:20; border:0; background:transparent; padding:0; cursor:pointer;
animation:swing 3s ease-in-out infinite;
}
.cat-scroller .rope{
position:absolute; top:-220px; left:50%; width:4px; height:240px; transform:translateX(-50%);
background: repeating-linear-gradient(#7f1d1d 0 8px, #a83f3f 8px 16px);
border-radius:2px;
}
.cat{ width:64px; height:96px; display:block }
@keyframes swing{
0%{ transform:rotate(1deg) translateY(0) }
50%{ transform:rotate(-2deg) translateY(-2px) }
100%{ transform:rotate(1deg) translateY(0) }
}
/* ====== Responsive ====== */
@media (max-width: 960px){
.role-body{ grid-template-columns:1fr }
.role-photos{ grid-template-columns: repeat(3,1fr) }
}
@media (max-width: 560px){
.role-photos img{ height:88px }
}
/* === ĐIỀU CHỈNH NÚT ANIME BÊN TRÁI === */
/* Toạ độ mới (gần vị trí ô vuông bạn khoanh) */
.nbm-dangle-btn{
left: 24px !important; /* kéo sát mép trái hơn (tùy chỉnh) */
bottom: 24px !important; /* đặt sát đáy hơn (tùy chỉnh) */
}
/* Phóng to nhân vật */
.nbm-anime,
.nbm-chibi{ /* tuỳ bạn dùng ![]()
hay