/* ============================================
   04b-home.css — Home page (channel, danh muc, tabs)
   ============================================ */

/* loi chao */
.hero-greet{padding:6px clamp(20px,5vw,46px) 0}
.greet-title{font-weight:700;font-size:clamp(26px,4.5vw,36px)}
.greet-sub{color:var(--ink-soft);font-weight:500;font-size:17px;margin-top:4px}

.home-sec{padding:22px clamp(20px,5vw,46px) 0}
.sec-title{font-weight:700;font-size:clamp(20px,3vw,24px);margin-bottom:14px}

/* ---- SECTION 1: kenh noi bat ---- */
.channel-row{display:flex;gap:clamp(14px,2.5vw,24px);overflow-x:auto;padding-bottom:8px;
  scrollbar-width:none}
.channel-row::-webkit-scrollbar{display:none}
.channel{flex:0 0 auto;border:0;background:none;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:10px;width:104px;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
.channel:active{transform:scale(.92)}
.ch-ava{width:88px;height:88px;border-radius:28px;display:grid;place-items:center;
  font-weight:700;font-size:38px;color:#fff;box-shadow:0 8px 0 rgba(0,0,0,.14);
  border:4px solid rgba(255,255,255,.7)}
.channel:hover .ch-ava{transform:translateY(-4px)}
.ch-name{font-weight:700;font-size:15px;color:#fff;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}

/* ---- SECTION 2: danh muc so thich ---- */
.cat-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:16px;
  background:rgba(255,255,255,.92);color:#2A2438;border-radius:20px;
  padding:14px 20px;display:flex;align-items:center;gap:10px;
  box-shadow:0 5px 0 rgba(0,0,0,.10);transition:transform .12s}
.cat:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.10)}
.cat-emoji{font-size:24px}

/* ---- SECTION 3: tabs ---- */
.home-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;scrollbar-width:none}
.home-tabs::-webkit-scrollbar{display:none}
.htab{flex:0 0 auto;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:16px;
  background:rgba(255,255,255,.16);color:#fff;border-radius:16px;padding:12px 22px;
  transition:background .2s, transform .12s}
.htab:active{transform:scale(.95)}
.htab[aria-selected="true"]{background:#fff;color:var(--cur-d,#0288D1)}

.grid-empty{grid-column:1/-1;text-align:center;padding:50px;color:#fff;font-size:18px}

/* scroll giờ chứa nhiều section, bỏ padding-top thừa */
.scroll{padding-top:6px}