/* Hôm nay ăn chi? — 37FTU */
.ag-body{
  background:#140E0C;color:#fff;min-height:100vh;
  background-image:
    radial-gradient(1000px 600px at 50% -8%, rgba(250,80,30,.34), transparent 62%),
    radial-gradient(760px 520px at 88% 104%, rgba(255,176,60,.16), transparent 60%);
  background-attachment:fixed;
}

/* ---------- Thanh trên ---------- */
.ag-dinh{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(680px,100% - 32px);margin:0 auto;padding:18px 0 6px;
}
.ag-dinh .hieu{color:#fff;font-size:.98rem}
.ag-dinh .hieu img{width:30px;height:30px}
.ag-tieng{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font-size:1.05rem;cursor:pointer;line-height:1;
}
.ag-tieng:hover{background:rgba(255,255,255,.14)}
.ag-tieng[aria-pressed="false"]{opacity:.45}

.ag{position:relative;overflow:hidden;padding-bottom:48px}
.ag-trong{width:min(680px,100% - 32px);margin-inline:auto;position:relative;z-index:2}

/* ---------- Mở đầu ---------- */
.ag-tieu{text-align:center;padding:22px 0 26px}
.ag-chao{
  font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#FFB499;margin:0 0 10px
}
.ag-tieu h1{font-size:clamp(2.4rem,9vw,4rem);letter-spacing:-.03em}
.ag-phu{color:rgba(255,255,255,.62);font-size:.98rem;margin:14px auto 0;max-width:40ch}

/* ---------- Bộ lọc ---------- */
.ag-loc{display:grid;gap:12px;margin-bottom:26px}
.ag-hang{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center}
.ag-nhan-loc{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.44);text-align:right
}
.ag-chip{display:flex;gap:8px;overflow-x:auto;padding:3px 1px;scrollbar-width:none}
.ag-chip::-webkit-scrollbar{display:none}
.ag-chip button{
  flex:none;padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);
  font-family:var(--font);font-size:.88rem;font-weight:600;transition:all .15s ease;
}
.ag-chip button:hover{border-color:rgba(255,255,255,.45);color:#fff}
.ag-chip button[aria-pressed="true"]{
  background:var(--cam);border-color:var(--cam);color:#fff;
  box-shadow:0 6px 16px -6px rgba(250,80,30,.8)
}

/* ---------- Máy quay ---------- */
.ag-may{
  --o:126px;
  position:relative;border-radius:26px;padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 26px 60px -28px rgba(0,0,0,.9);
}
.ag-khe{
  position:relative;height:var(--o);overflow:hidden;border-radius:18px;
  background:rgba(12,8,7,.62);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.ag-cuon{will-change:transform}
.ag-o{
  height:var(--o);display:flex;align-items:center;gap:16px;padding:0 22px;
}
.ag-o i{font-size:2.5rem;line-height:1;font-style:normal;flex:none}
.ag-o b{font-family:var(--font-tieu-de);font-size:clamp(1.25rem,5vw,1.75rem);font-weight:800;letter-spacing:-.02em}
.ag-o small{display:block;font-size:.8rem;color:rgba(255,255,255,.5);font-weight:600;margin-top:2px}
.ag-vach{
  position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(250,80,30,.4);
}
.ag-may.dang-quay .ag-vach{box-shadow:inset 0 0 0 1.5px rgba(250,80,30,.85), inset 0 0 34px rgba(250,80,30,.28)}

/* ---------- Nút bấm ---------- */
.ag-bam{
  display:block;width:100%;margin-top:20px;padding:19px 24px;border:0;border-radius:22px;cursor:pointer;
  background:linear-gradient(180deg,#FF6A38,#E23F0F);color:#fff;font-family:var(--font);
  box-shadow:0 16px 34px -14px rgba(250,80,30,.95), inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ag-bam span{display:block;font-family:var(--font-tieu-de);font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.ag-bam small{display:block;font-size:.8rem;opacity:.86;margin-top:3px;font-weight:600}
.ag-bam:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(250,80,30,1)}
.ag-bam:active{transform:translateY(1px) scale(.99)}
.ag-bam[disabled]{filter:grayscale(.35) brightness(.8);cursor:wait;transform:none}
.ag-meo{text-align:center;font-size:.82rem;color:rgba(255,255,255,.4);margin:14px 0 0}

/* ---------- Kết quả ---------- */
/* hai khối này là <section>, phải gỡ padding mặc định của section trong styles.css */
.ag-kq,.ag-lich-su{padding:0}
.ag-kq{margin-top:26px}
.ag-kq-the{
  background:var(--trang);color:var(--muc);border-radius:26px;padding:28px 24px 22px;text-align:center;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
  animation:ag-len .42s cubic-bezier(.2,1.2,.35,1) both;
}
@keyframes ag-len{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.ag-kq-icon{font-size:3.6rem;line-height:1;animation:ag-nhun .6s ease .1s both}
@keyframes ag-nhun{0%{transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.14) rotate(6deg)}100%{transform:none}}
.ag-kq-the h2{font-size:clamp(1.8rem,7vw,2.5rem);margin:10px 0 0;letter-spacing:-.025em}
.ag-kq-chip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0 0}
.ag-kq-chip span{
  background:var(--cam-nhat);color:var(--cam-dam);font-size:.8rem;font-weight:700;
  padding:5px 12px;border-radius:999px
}
.ag-kq-mota{color:var(--muc-nhat);margin:16px auto 0;max-width:34ch;font-size:1rem}
.ag-kq-ly-do{
  margin:14px auto 0;max-width:34ch;font-size:.9rem;font-weight:700;color:var(--cam-dam)
}
.ag-kq-cho{margin:10px 0 0;font-size:.86rem;color:var(--muc-nhat)}
.ag-kq-nut{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.ag-kq-nut .nut{flex:1 1 150px;max-width:220px}
.ag-chep{
  display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--font);font-size:.86rem;font-weight:700;color:var(--muc-nhat);
  text-decoration:underline;text-underline-offset:3px
}
.ag-chep:hover{color:var(--cam-dam)}
.ag-kq-the.da-chot{box-shadow:0 0 0 3px var(--cam), 0 30px 70px -34px rgba(0,0,0,.9)}

/* ---------- Lịch sử ---------- */
.ag-lich-su{margin-top:34px;text-align:center}
.ag-lich-su h3{
  font-family:var(--font);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px
}
.ag-ls-hang{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ag-ls-hang span{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  padding:7px 13px;border-radius:999px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.82)
}
.ag-xoa{
  margin-top:14px;background:none;border:0;cursor:pointer;font-family:var(--font);
  font-size:.8rem;color:rgba(255,255,255,.34);text-decoration:underline;text-underline-offset:3px
}
.ag-xoa:hover{color:rgba(255,255,255,.7)}

/* ---------- Chân trang ---------- */
.ag-chan{
  margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:.86rem;color:rgba(255,255,255,.44)
}
.ag-chan b{color:rgba(255,255,255,.72)}
.ag-chan-link{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.ag-chan-link a{color:#FFB499;text-decoration:none;font-weight:600}
.ag-chan-link a:hover{text-decoration:underline}

/* ---------- Pháo giấy ---------- */
.ag-phao{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.ag-phao i{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:ag-roi linear forwards
}
@keyframes ag-roi{
  0%{opacity:1;transform:translateY(0) rotate(0)}
  100%{opacity:0;transform:translateY(105vh) rotate(760deg)}
}

@media (prefers-reduced-motion: reduce){
  .ag-kq-the,.ag-kq-icon{animation:none}
  .ag-phao{display:none}
}