/* ====== Reset & Tokens ====== */
*{box-sizing:border-box}
:root{
  /* Bảng màu bình minh */
  --sky-top: #fce7f3;    /* hồng sớm */
  --sky-mid: #ffd6a5;    /* cam đào */
  --sky-low: #fff5cc;    /* vàng kem */
  --sun: #FFF176;        /* vàng mặt trời */
  --sun-hot: #ffb300;    /* vàng cam rực */
  --cloud: #ffffff;      /* mây trắng */
  --ink: #3b3b3b;
  --ink-soft:#6b6b6b;

  --card:#ffffffba;
  --card-soft:#ffffff90;
  --bd:#ffffffc9;

  --radius:18px;
  --shadow-sm: 0 8px 22px rgba(255,163,87,.25);
  --shadow-lg: 0 24px 60px rgba(255,163,87,.28);
}

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), var(--sky-low));
  -webkit-font-smoothing:antialiased;
}

/* ====== Layout ====== */
.container{ width:min(1100px,92%); margin-inline:auto; }
.section{ padding:64px 0; }

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.55), transparent);
  backdrop-filter:saturate(130%) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; 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%, #fff5c6 0 30%, var(--sun) 40%, var(--sun-hot) 70%);
  box-shadow:0 0 0 6px #fff3, 0 10px 18px rgba(255,163,87,.45);
}

.menu{ position:relative }
.btn-hamburger{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.btn-hamburger span{ display:block; width:24px; height:2px; margin:5px 0; background:#2b2b2b; border-radius:2px }
.menu-list{ list-style:none; display:flex; gap:12px; margin:0; padding:0; }
.menu-list .link{
  text-decoration:none; color:#2b2b2b; font-weight:600; padding:8px 12px; border-radius:12px;
}
.menu-list .link:hover{ background:#ffffffaa; box-shadow:var(--shadow-sm) }

/* ====== HERO ====== */
.hero{ position:relative; overflow:clip; }
.sky{
  position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 50% 110%, rgba(255,216,125,.35), transparent 55%);
}

/* Sun */
.sun-wrap{ 
  position:absolute; 
  left:50%; transform:translateX(-50%); bottom:58px; 
  width:360px; 
  height:360px; 
  pointer-events:none;
z-index: 0;
 }
.sun-core{
  position:absolute; inset:auto 0 0 0; margin:auto; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fff7cf 0 30%, var(--sun) 55%, var(--sun-hot) 100%);
  box-shadow:0 0 0 16px rgba(255,255,255,.4), 0 40px 80px rgba(255,163,87,.55);
  filter:saturate(110%);
}
.sun-glow{
  position:absolute; inset:auto -80px -120px -80px; height:300px;
  background:radial-gradient(60% 70% at 50% 10%, rgba(255,221,144,.55), transparent 70%),
             radial-gradient(50% 60% at 50% 20%, rgba(255,183,77,.35), transparent 70%);
  filter:blur(30px);
}

/* Clouds */
.cloud{
  position:absolute; top:120px; width:200px; height:62px; background:var(--cloud);
  box-shadow:
     60px -18px 0 12px var(--cloud),
    120px -10px 0 4px var(--cloud),
     20px  10px 0 10px var(--cloud),
    100px  12px 0 6px var(--cloud);
  border-radius:50px;
  opacity:.95; filter:drop-shadow(0 10px 14px rgba(163,163,163,.25));
  animation: float 26s linear infinite;
}
.cloud-1{ left:-10%; animation-duration:32s; top:110px; transform:scale(1.1) }
.cloud-2{ left:60%; 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 */
.hero-inner{ text-align:center; padding:88px 0 140px; }
.title-xl{
  margin:0;
  font-size:min(15vw, 96px);
  line-height:1;
  font-weight:800;
  letter-spacing:.5px;
  color:#2b2b2b;
  text-shadow: 0 8px 30px rgba(255,163,87,.25);
  background: linear-gradient(180deg,#2b2b2b, #333);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title-sub{
  margin:.5rem auto 1rem;
  font-size: clamp(16px, 2.4vw, 22px);
  color:#4b4b4b;
}
.cta{ display:flex; gap:12px; justify-content:center; margin-top:12px }
.btn{
  --bg:#ffffffaa; --fg:#2b2b2b; --bd:#ffffff;
  display:inline-block; text-decoration:none; padding:12px 18px; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-weight:700; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg) }
.btn-primary{ --bg:linear-gradient(135deg,#ffe082,#ffcc80 60%,#ffb74d); --bd:#ffd180 }
.btn-ghost{ --bg:#ffffff80; }

/* Horizon hills */
.hills{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:200px;
  fill: #ffd9a8;
  opacity:.9; filter: drop-shadow(0 -10px 30px rgba(255,168,76,.35));
}

/* ====== Section nội dung nhẹ ====== */
.section-title{ text-align:center; margin:0 0 10px; font-size:32px; font-weight:800 }
.section-lead{ text-align:center; margin:0 auto 26px; max-width:760px; color:var(--ink-soft) }

.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.card{
  background:linear-gradient(180deg, var(--card), var(--card-soft));
  border:1px solid var(--bd); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow-sm);
}
.card .ic{ font-size:22px; }
.card h3{ margin:6px 0 6px }
.card p{ color:var(--ink-soft); margin:0 }

/* ====== Footer ====== */
.site-footer{
  margin-top:40px; background:#fffaf0; border-top:1px solid #ffe4b5;
}
.foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 }
.brand-foot{ font-weight:800 }

/* ====== Responsive ====== */
@media (max-width: 960px){
  .btn-hamburger{ display:inline-block }
  .menu-list{
    position:fixed; right:16px; top:60px; left:16px; display:none; flex-direction:column; gap:10px;
    background:#ffffffeb; border:1px solid #fff; border-radius:14px; padding:12px; box-shadow:var(--shadow-lg)
  }
  .menu-list.open{ display:flex }
  .hero-inner{ padding:76px 0 130px }
  .cards{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .title-xl{ font-size:14vw }
}

/* ===== Nút chibi đung đưa ===== */
.nbm-dangle-btn{
  position: fixed;
  left: 10px;                /* chỉnh vị trí ngang */
  bottom: 18vh;              /* chỉnh vị trí dọc */
  z-index: 1000;
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  transform-origin: top center;
  animation: nbm-swing 3.2s ease-in-out infinite;
}
.nbm-dangle-btn:hover{ animation-play-state: paused; }

/* sợi dây */
.nbm-rope{
  position: absolute; left: 50%; top: -240px; transform: translateX(-50%);
  width: 6px; height: 250px; border-radius: 3px;
  background: repeating-linear-gradient(#0d2b67 0 8px, #173b8f 8px 16px);
  box-shadow: inset 0 0 0 1px #0a1d47;
}

/* kích thước nhân vật */
.nbm-chibi{ width: 120px; height: 140px; display:block; }

/* Đung đưa tổng thể */
@keyframes nbm-swing{
  0%   { transform: rotate(2deg) translateY(0); }
  50%  { transform: rotate(-3deg) translateY(-2px); }
  100% { transform: rotate(2deg) translateY(0); }
}

/* Chớp mắt: thu nhỏ chiều cao mí trong chốc lát */
.nbm-eyes rect{
  transform-origin: center;
  animation: nbm-blink 4s infinite;
}
.nbm-eyes rect:nth-child(2){ animation-delay: .1s; }

@keyframes nbm-blink{
  0%, 92%, 100%   { transform: scaleY(1); }
  94%, 96%        { transform: scaleY(0.15); }
}

/* Chân vung nhẹ */
.nbm-legs{ transform-origin: 70px 126px; animation: nbm-kick 1.8s ease-in-out infinite; }
@keyframes nbm-kick{
  0%,100%{ transform: rotate(0deg) }
  50%    { transform: rotate(-6deg) }
}

/* mobile bớt chiếm chỗ */
@media (max-width: 480px){
  .nbm-dangle-btn{ bottom: 14vh; }
  .nbm-chibi{ width: 96px; height: 112px; }
}

/* --- BẢN QUYỀN NẮNG BAN MAI: Anime bên phải --- */
.nbm-dangle-btn.nbm-right{
  left: auto;
  right: 10px;            /* vị trí mép phải */
  bottom: 20vh;
  animation: nbm-swing-right 3.4s ease-in-out infinite;
}
.nbm-dangle-btn.nbm-right:hover{ animation-play-state: paused; }

.nbm-rope--gold{
  background: repeating-linear-gradient(#b45309 0 8px, #f59e0b 8px 16px);
  box-shadow: inset 0 0 0 1px #92400e;
}

/* đảo pha đung đưa để 2 bên không đồng bộ */
@keyframes nbm-swing-right{
  0%   { transform: rotate(-2deg) translateY(0); }
  50%  { transform: rotate(3deg) translateY(-2px); }
  100% { transform: rotate(-2deg) translateY(0); }
}

/* chớp mắt */
.nbm-eyes2 rect{
  transform-origin:center;
  animation: nbm-blink2 4.2s infinite;
}
.nbm-eyes2 rect:nth-child(2){ animation-delay: .12s; }
@keyframes nbm-blink2{
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.18); }
}

/* tay vẫy vẫy */
.nbm-hand{ transform-origin: 0px 0px; animation: nbm-wave 1.6s ease-in-out infinite; }
@keyframes nbm-wave{
  0%,100%{ transform: rotate(0deg) }
  50%    { transform: rotate(-18deg) }
}

/* chân vung chút xíu */
.nbm-legs2{ transform-origin: 72px 126px; animation: nbm-kick2 2s ease-in-out infinite; }
@keyframes nbm-kick2{
  0%,100%{ transform: rotate(0deg) }
  50%    { transform: rotate(6deg) }
}

/* mobile */
@media (max-width: 480px){
  .nbm-dangle-btn.nbm-right{ bottom: 16vh; }
  .nbm-chibi--right{ width: 96px; height: 118px; }
}
/* ==== Chillbar compact ==== */
:root{
  --cb-bg:#fffffff2;
  --cb-bd:#ffffff;
  --cb-shadow:0 8px 28px rgba(0,0,0,.10);
  --cb-text:#1f2937;
  --cb-muted:#64748b;
  --cb-accent:#ffb74d;
}

/* khung */
.chillbar{
  position:fixed; left:12px; right:12px; bottom:8px; z-index:999;
  height:44px;                              /* THẤP, GỌN */
  display:grid; grid-template-columns:auto 1fr auto 28px; align-items:center;
  background:var(--cb-bg);
  border:1px solid var(--cb-bd); border-radius:10px;
  box-shadow:var(--cb-shadow); backdrop-filter:blur(6px) saturate(130%);
  overflow:hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.4),transparent 60%);
}
.hero-inner{position:relative; z-index: 2; }

/* ====== Reset & Tokens ====== */
*{box-sizing:border-box}
:root{
  /* Bảng màu bình minh */
  --sky-top: #fce7f3;    /* hồng sớm */
  --sky-mid: #ffd6a5;    /* cam đào */
  --sky-low: #fff5cc;    /* vàng kem */
  --sun: #FFF176;        /* vàng mặt trời */
  --sun-hot: #ffb300;    /* vàng cam rực */
  --cloud: #ffffff;      /* mây trắng */
  --ink: #3b3b3b;
  --ink-soft:#6b6b6b;

  --card:#ffffffba;
  --card-soft:#ffffff90;
  --bd:#ffffffc9;

  --radius:18px;
  --shadow-sm: 0 8px 22px rgba(255,163,87,.25);
  --shadow-lg: 0 24px 60px rgba(255,163,87,.28);
}

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), var(--sky-low));
  -webkit-font-smoothing:antialiased;
}

/* ====== Layout ====== */
.container{ width:min(1100px,92%); margin-inline:auto; }
.section{ padding:64px 0; }

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.55), transparent);
  backdrop-filter:saturate(130%) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; 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%, #fff5c6 0 30%, var(--sun) 40%, var(--sun-hot) 70%);
  box-shadow:0 0 0 6px #fff3, 0 10px 18px rgba(255,163,87,.45);
}

.menu{ position:relative }
.btn-hamburger{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.btn-hamburger span{ display:block; width:24px; height:2px; margin:5px 0; background:#2b2b2b; border-radius:2px }
.menu-list{ list-style:none; display:flex; gap:12px; margin:0; padding:0; }
.menu-list .link{
  text-decoration:none; color:#2b2b2b; font-weight:600; padding:8px 12px; border-radius:12px;
}
.menu-list .link:hover{ background:#ffffffaa; box-shadow:var(--shadow-sm) }

/* ====== HERO ====== */
.hero{ position:relative; overflow:clip; }
.sky{
  position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 50% 110%, rgba(255,216,125,.35), transparent 55%);
}

/* Sun */
.sun-wrap{ 
  position:absolute; 
  left:50%; transform:translateX(-50%); bottom:58px; 
  width:360px; 
  height:360px; 
  pointer-events:none;
z-index: 0;
 }
.sun-core{
  position:absolute; inset:auto 0 0 0; margin:auto; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fff7cf 0 30%, var(--sun) 55%, var(--sun-hot) 100%);
  box-shadow:0 0 0 16px rgba(255,255,255,.4), 0 40px 80px rgba(255,163,87,.55);
  filter:saturate(110%);
}
.sun-glow{
  position:absolute; inset:auto -80px -120px -80px; height:300px;
  background:radial-gradient(60% 70% at 50% 10%, rgba(255,221,144,.55), transparent 70%),
             radial-gradient(50% 60% at 50% 20%, rgba(255,183,77,.35), transparent 70%);
  filter:blur(30px);
}

/* Clouds */
.cloud{
  position:absolute; top:120px; width:200px; height:62px; background:var(--cloud);
  box-shadow:
     60px -18px 0 12px var(--cloud),
    120px -10px 0 4px var(--cloud),
     20px  10px 0 10px var(--cloud),
    100px  12px 0 6px var(--cloud);
  border-radius:50px;
  opacity:.95; filter:drop-shadow(0 10px 14px rgba(163,163,163,.25));
  animation: float 26s linear infinite;
}
.cloud-1{ left:-10%; animation-duration:32s; top:110px; transform:scale(1.1) }
.cloud-2{ left:60%; 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 */
.hero-inner{ text-align:center; padding:88px 0 140px; }
.title-xl{
  margin:0;
  font-size:min(15vw, 96px);
  line-height:1;
  font-weight:800;
  letter-spacing:.5px;
  color:#2b2b2b;
  text-shadow: 0 8px 30px rgba(255,163,87,.25);
  background: linear-gradient(180deg,#2b2b2b, #333);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title-sub{
  margin:.5rem auto 1rem;
  font-size: clamp(16px, 2.4vw, 22px);
  color:#4b4b4b;
}
.cta{ display:flex; gap:12px; justify-content:center; margin-top:12px }
.btn{
  --bg:#ffffffaa; --fg:#2b2b2b; --bd:#ffffff;
  display:inline-block; text-decoration:none; padding:12px 18px; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-weight:700; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg) }
.btn-primary{ --bg:linear-gradient(135deg,#ffe082,#ffcc80 60%,#ffb74d); --bd:#ffd180 }
.btn-ghost{ --bg:#ffffff80; }

/* Horizon hills */
.hills{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:200px;
  fill: #ffd9a8;
  opacity:.9; filter: drop-shadow(0 -10px 30px rgba(255,168,76,.35));
}

/* ====== Section nội dung nhẹ ====== */
.section-title{ text-align:center; margin:0 0 10px; font-size:32px; font-weight:800 }
.section-lead{ text-align:center; margin:0 auto 26px; max-width:760px; color:var(--ink-soft) }

.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.card{
  background:linear-gradient(180deg, var(--card), var(--card-soft));
  border:1px solid var(--bd); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow-sm);
}
.card .ic{ font-size:22px; }
.card h3{ margin:6px 0 6px }
.card p{ color:var(--ink-soft); margin:0 }

/* ====== Footer ====== */
.site-footer{
  margin-top:40px; background:#fffaf0; border-top:1px solid #ffe4b5;
}
.foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 }
.brand-foot{ font-weight:800 }

/* ====== Responsive ====== */
@media (max-width: 960px){
  .btn-hamburger{ display:inline-block }
  .menu-list{
    position:fixed; right:16px; top:60px; left:16px; display:none; flex-direction:column; gap:10px;
    background:#ffffffeb; border:1px solid #fff; border-radius:14px; padding:12px; box-shadow:var(--shadow-lg)
  }
  .menu-list.open{ display:flex }
  .hero-inner{ padding:76px 0 130px }
  .cards{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .title-xl{ font-size:14vw }
}

/* ===== Nút chibi đung đưa ===== */
.nbm-dangle-btn{
  position: fixed;
  left: 10px;                /* chỉnh vị trí ngang */
  bottom: 18vh;              /* chỉnh vị trí dọc */
  z-index: 1000;
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  transform-origin: top center;
  animation: nbm-swing 3.2s ease-in-out infinite;
}
.nbm-dangle-btn:hover{ animation-play-state: paused; }

/* sợi dây */
.nbm-rope{
  position: absolute; left: 50%; top: -240px; transform: translateX(-50%);
  width: 6px; height: 250px; border-radius: 3px;
  background: repeating-linear-gradient(#0d2b67 0 8px, #173b8f 8px 16px);
  box-shadow: inset 0 0 0 1px #0a1d47;
}

/* kích thước nhân vật */
.nbm-chibi{ width: 120px; height: 140px; display:block; }

/* Đung đưa tổng thể */
@keyframes nbm-swing{
  0%   { transform: rotate(2deg) translateY(0); }
  50%  { transform: rotate(-3deg) translateY(-2px); }
  100% { transform: rotate(2deg) translateY(0); }
}

/* Chớp mắt: thu nhỏ chiều cao mí trong chốc lát */
.nbm-eyes rect{
  transform-origin: center;
  animation: nbm-blink 4s infinite;
}
.nbm-eyes rect:nth-child(2){ animation-delay: .1s; }

@keyframes nbm-blink{
  0%, 92%, 100%   { transform: scaleY(1); }
  94%, 96%        { transform: scaleY(0.15); }
}

/* Chân vung nhẹ */
.nbm-legs{ transform-origin: 70px 126px; animation: nbm-kick 1.8s ease-in-out infinite; }
@keyframes nbm-kick{
  0%,100%{ transform: rotate(0deg) }
  50%    { transform: rotate(-6deg) }
}

/* mobile bớt chiếm chỗ */
@media (max-width: 480px){
  .nbm-dangle-btn{ bottom: 14vh; }
  .nbm-chibi{ width: 96px; height: 112px; }
}

/* --- BẢN QUYỀN NẮNG BAN MAI: Anime bên phải --- */
.nbm-dangle-btn.nbm-right{
  left: auto;
  right: 10px;            /* vị trí mép phải */
  bottom: 20vh;
  animation: nbm-swing-right 3.4s ease-in-out infinite;
}
.nbm-dangle-btn.nbm-right:hover{ animation-play-state: paused; }

.nbm-rope--gold{
  background: repeating-linear-gradient(#b45309 0 8px, #f59e0b 8px 16px);
  box-shadow: inset 0 0 0 1px #92400e;
}

/* đảo pha đung đưa để 2 bên không đồng bộ */
@keyframes nbm-swing-right{
  0%   { transform: rotate(-2deg) translateY(0); }
  50%  { transform: rotate(3deg) translateY(-2px); }
  100% { transform: rotate(-2deg) translateY(0); }
}

/* chớp mắt */
.nbm-eyes2 rect{
  transform-origin:center;
  animation: nbm-blink2 4.2s infinite;
}
.nbm-eyes2 rect:nth-child(2){ animation-delay: .12s; }
@keyframes nbm-blink2{
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.18); }
}

/* tay vẫy vẫy */
.nbm-hand{ transform-origin: 0px 0px; animation: nbm-wave 1.6s ease-in-out infinite; }
@keyframes nbm-wave{
  0%,100%{ transform: rotate(0deg) }
  50%    { transform: rotate(-18deg) }
}

/* chân vung chút xíu */
.nbm-legs2{ transform-origin: 72px 126px; animation: nbm-kick2 2s ease-in-out infinite; }
@keyframes nbm-kick2{
  0%,100%{ transform: rotate(0deg) }
  50%    { transform: rotate(6deg) }
}

/* mobile */
@media (max-width: 480px){
  .nbm-dangle-btn.nbm-right{ bottom: 16vh; }
  .nbm-chibi--right{ width: 96px; height: 118px; }
}
/* ==== Chillbar compact ==== */
:root{
  --cb-bg:#fffffff2;
  --cb-bd:#ffffff;
  --cb-shadow:0 8px 28px rgba(0,0,0,.10);
  --cb-text:#1f2937;
  --cb-muted:#64748b;
  --cb-accent:#ffb74d;
}

/* khung */
.chillbar{
  position:fixed; left:12px; right:12px; bottom:8px; z-index:999;
  height:44px;                              /* THẤP, GỌN */
  display:grid; grid-template-columns:auto 1fr auto 28px; align-items:center;
  background:var(--cb-bg);
  border:1px solid var(--cb-bd); border-radius:10px;
  box-shadow:var(--cb-shadow); backdrop-filter:blur(6px) saturate(130%);
  overflow:hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.4),transparent 60%);
}
.hero-inner{position:relative; z-index: 2; }

.under-sun {
  position: absolute;
  top: calc(50% + 120px); /* chữ nằm ngay dưới mặt trời */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}




/* mép gợn sóng (trên) */
.chillbar::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:12px; pointer-events:none;
  background:
    url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" width="180" height="12" viewBox="0 0 180 12">\
        <path d="M0,6 C15,0 30,12 45,6 C60,0 75,12 90,6 C105,0 120,12 135,6 C150,0 165,12 180,6 L180,12 L0,12 Z" fill="%23ffffff" />\
      </svg>') repeat-x;
  background-size:180px 12px;
  animation:waveTop 9s linear infinite;
  opacity:.95;
}
@keyframes waveTop{
  0%{ background-position-x:0 }
  100%{ background-position-x:-180px }
}

/* bố cục bên trong */
.chillbar-left{ display:grid; place-items:center; width:86px; min-width:86px; }
.chill-anime{ transform: translateY(2px) }
.chillbar-center{ padding-inline:8px; min-width:120px; overflow:hidden; white-space:nowrap; }
.chillbar-right{ display:flex; align-items:center; gap:8px; padding-right:6px; }

.main{
  font:700 14px/1 "Poppins",system-ui; color:var(--cb-text);
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block;
}
.quote{
  font:600 13px/1 "Poppins",system-ui; color:var(--cb-muted);
  opacity:.95; transition:opacity .28s ease, transform .28s ease;
}
.badge{
  font:700 11px/1 "Poppins",system-ui; color:#6b3a00;
  background:linear-gradient(135deg,#ffe082,#ffcc80); border:1px solid #ffd180;
  padding:3px 6px; border-radius:8px;
}

/* nút đóng nhỏ */
.chill-close{
  width:28px; height:28px; border:0; border-radius:8px; margin-left:4px; margin-right:4px;
  background:#fff; color:#111; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .12s ease;
}
.chill-close:hover{ transform:translateY(-1px); }

/* Mobile */
@media (max-width:600px){
  .chillbar{ left:8px; right:8px; height:42px; }
  .chillbar-left{ width:72px; min-width:72px }
  .main{ display:none }      /* màn nhỏ chỉ giữ quote */
}

/* luôn đặt thanh ngay trên mép dưới + an toàn tai thỏ */
.chillbar{
  bottom: calc(8px + env(safe-area-inset-bottom));
}

/* chừa chỗ cho nội dung/footers: dùng biến động --cb-safe  */
html.cb-has-chill body{
  padding-bottom: var(--cb-safe, 56px); /* fallback 56px nếu JS chưa kịp tính */
}
/* Thanh chill luôn dán sát mép dưới, có safe-area cho iPhone */
.chillbar{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 999;
}

/* DÀNH CHỖ phía dưới cho nội dung/footer theo biến --cb-safe
   Nếu JS chưa kịp set thì dùng fallback 56px */
html.cb-has-chill body{
  padding-bottom: var(--cb-safe, 56px);
}

/* (tuỳ chọn) nếu page có container “full-bleed” cũng nên có khoảng hở */
html.cb-has-chill .page-wrapper,
html.cb-has-chill main{
  padding-bottom: max(var(--cb-safe, 56px), 56px);
}
body{ padding-bottom: 60px; }   /* nếu chillbar cao ~44px */





/* mép gợn sóng (trên) */
.chillbar::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:12px; pointer-events:none;
  background:
    url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" width="180" height="12" viewBox="0 0 180 12">\
        <path d="M0,6 C15,0 30,12 45,6 C60,0 75,12 90,6 C105,0 120,12 135,6 C150,0 165,12 180,6 L180,12 L0,12 Z" fill="%23ffffff" />\
      </svg>') repeat-x;
  background-size:180px 12px;
  animation:waveTop 9s linear infinite;
  opacity:.95;
}
@keyframes waveTop{
  0%{ background-position-x:0 }
  100%{ background-position-x:-180px }
}

/* bố cục bên trong */
.chillbar-left{ display:grid; place-items:center; width:86px; min-width:86px; }
.chill-anime{ transform: translateY(2px) }
.chillbar-center{ padding-inline:8px; min-width:120px; overflow:hidden; white-space:nowrap; }
.chillbar-right{ display:flex; align-items:center; gap:8px; padding-right:6px; }

.main{
  font:700 14px/1 "Poppins",system-ui; color:var(--cb-text);
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block;
}
.quote{
  font:600 13px/1 "Poppins",system-ui; color:var(--cb-muted);
  opacity:.95; transition:opacity .28s ease, transform .28s ease;
}
.badge{
  font:700 11px/1 "Poppins",system-ui; color:#6b3a00;
  background:linear-gradient(135deg,#ffe082,#ffcc80); border:1px solid #ffd180;
  padding:3px 6px; border-radius:8px;
}

/* nút đóng nhỏ */
.chill-close{
  width:28px; height:28px; border:0; border-radius:8px; margin-left:4px; margin-right:4px;
  background:#fff; color:#111; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .12s ease;
}
.chill-close:hover{ transform:translateY(-1px); }

/* Mobile */
@media (max-width:600px){
  .chillbar{ left:8px; right:8px; height:42px; }
  .chillbar-left{ width:72px; min-width:72px }
  .main{ display:none }      /* màn nhỏ chỉ giữ quote */
}

/* luôn đặt thanh ngay trên mép dưới + an toàn tai thỏ */
.chillbar{
  bottom: calc(8px + env(safe-area-inset-bottom));
}

/* chừa chỗ cho nội dung/footers: dùng biến động --cb-safe  */
html.cb-has-chill body{
  padding-bottom: var(--cb-safe, 56px); /* fallback 56px nếu JS chưa kịp tính */
}
/* Thanh chill luôn dán sát mép dưới, có safe-area cho iPhone */
.chillbar{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 999;
}

/* DÀNH CHỖ phía dưới cho nội dung/footer theo biến --cb-safe
   Nếu JS chưa kịp set thì dùng fallback 56px */
html.cb-has-chill body{
  padding-bottom: var(--cb-safe, 56px);
}

/* (tuỳ chọn) nếu page có container “full-bleed” cũng nên có khoảng hở */
html.cb-has-chill .page-wrapper,
html.cb-has-chill main{
  padding-bottom: max(var(--cb-safe, 56px), 56px);
}
body{ padding-bottom: 60px; }   /* nếu chillbar cao ~44px */