/* Lớp cờ thầy Hiệp — trang cho bé 5–8 tuổi. Hai bộ màu, cùng nền kem:
   - "cau-vong": bảng cầu vồng pastel của manhkyuc.pages.dev (r1–r7, chữ tím than, nút tím).
   - "la-xanh":  xanh lá + kem gần Dashboard (DESIGN.md: brand #CFE3D4, ô tối bàn cờ #739552, sun #FBE3A0).
   Bàn cờ giữ nguyên của Dashboard (ban-co-cg.css). Chữ tiêu đề Baloo 2 (tròn, có dấu tiếng Việt), chữ thường
   Be Vietnam Pro. */

:root {
  --r1: #ff9e8f; --r2: #ffbe7d; --r3: #ffd98a; --r4: #8fd9b0; --r5: #8ed2e2; --r6: #aab3ef; --r7: #c9a5e2;
  --nen: #fffbf7; --nen2: #fff4ea; --the: #ffffff;
  --muc: #2f2842; --muc2: #57506b; --mo: #6f6780; --vien: #efe6dc;
  --nhan: #7b6dc8; --nhan-dam: #5f51b0; --nhan-chu: #ffffff; --nhan-nhat: #efecfb;
  --tot: #2b8a3e; --xau: #d6336c; --vang: #f4b43c;
  --vach: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7));
  --nen-anh:
    radial-gradient(900px 500px at 100% -10%, rgb(255 190 125 / .22), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgb(142 210 226 / .20), transparent 60%),
    radial-gradient(800px 600px at 110% 70%, rgb(201 165 226 / .18), transparent 60%);
  --bong: 0 1px 2px rgb(47 40 66 / .06), 0 8px 28px rgb(47 40 66 / .09);
  --bong-noi: 0 2px 4px rgb(47 40 66 / .08), 0 16px 36px rgb(47 40 66 / .14);
  --bo: 22px;
  --chu-to: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
  --chu: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --focus: #2f5fd0;
  color-scheme: light;
}
:root[data-giao-dien="la-xanh"] {
  --r1: #cfe3d4; --r2: #fbe3a0; --r3: #dcebc8; --r4: #f6dcb4; --r5: #c4dfc0; --r6: #f2e6bf; --r7: #d6e8d0;
  --nen: #fbf7ec; --nen2: #f4eedd; --the: #fffffe;
  --muc: #17221c; --muc2: #2f4237; --mo: #56635b; --vien: #e4e3d3;
  --nhan: #3f7a4a; --nhan-dam: #2e5f37; --nhan-chu: #ffffff; --nhan-nhat: #e3efe0;
  --vach: linear-gradient(90deg, #739552, #9cbf72, #cfe3d4, #fbe3a0, #cfe3d4, #9cbf72, #739552);
  --nen-anh:
    radial-gradient(900px 500px at 100% -10%, rgb(207 227 212 / .55), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgb(251 227 160 / .35), transparent 60%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--muc); background: var(--nen-anh), var(--nen); background-attachment: fixed;
  font: 16px/1.6 var(--chu); overflow-x: hidden;
}
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--chu-to); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cau-vong-vach { height: 6px; background: var(--vach); }

/* --- nút ---------------------------------------------------------------------------------------------------------- */
.nut-lon {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0;
  border-radius: 16px; background: var(--nhan); color: var(--nhan-chu); font: 800 1.15rem/1 var(--chu-to);
  box-shadow: 0 4px 0 var(--nhan-dam); transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
.nut-lon:hover { background: var(--nhan-dam); }
.nut-lon:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--nhan-dam); }
.nut-lon:disabled { opacity: .6; cursor: progress; }
.nut-phu {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px;
  border: 2px solid var(--vien); border-radius: 14px; background: var(--the); font-weight: 700; color: var(--muc2);
  transition: border-color .15s, transform .12s ease;
}
.nut-phu:hover:not(:disabled) { border-color: var(--nhan); color: var(--muc); }
.nut-phu:active:not(:disabled) { transform: translateY(2px); }
.nut-phu:disabled { opacity: .45; cursor: not-allowed; }
.nut-do.hoi { border-color: var(--xau); color: var(--xau); }
.nut-nho { min-height: 40px; padding: 0 12px; border: 1.5px solid var(--vien); border-radius: 10px; background: var(--the); font-size: .85rem; font-weight: 600; }
.nut-nho:hover:not(:disabled) { border-color: var(--nhan); }
.nut-nho:disabled { opacity: .45; cursor: default; }
.nut-tron {
  display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--vien); border-radius: 50%;
  background: var(--the); color: var(--muc2); transition: border-color .15s;
}
.nut-tron:hover { border-color: var(--nhan); }
.cham-mau { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1)); }
:root[data-giao-dien="la-xanh"] .cham-mau { background: conic-gradient(#739552 0 50%, #fbe3a0 50% 100%); }

/* --- đầu trang ---------------------------------------------------------------------------------------------------- */
.dau {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, calc((100vw - 1180px) / 2)); background: color-mix(in srgb, var(--nen) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--vien);
}
.hieu { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muc); font: 800 1.25rem/1 var(--chu-to); }
.hieu small { display: block; font: 600 .8rem/1.2 var(--chu); color: var(--mo); }
.dau-phai { position: relative; display: flex; align-items: center; gap: 8px; }
.huy-hieu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 2px 14px;
  border-radius: 14px; background: var(--vach); color: #2f2842; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5);
}
.hh-nhan { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.hh-so { font: 800 1.3rem/1 var(--chu-to); font-variant-numeric: tabular-nums; }
.menu-tk {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px; display: grid; gap: 4px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 16px; box-shadow: var(--bong-noi);
}
.menu-tk p { margin: 4px 10px 8px; font-size: .85rem; color: var(--mo); }
.menu-tk button { min-height: 44px; text-align: left; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-weight: 600; }
.menu-tk button:hover { background: var(--nhan-nhat); }

main { padding: 20px max(16px, calc((100vw - 1180px) / 2)) 48px; }

/* --- đăng nhập ---------------------------------------------------------------------------------------------------- */
.man-dang-nhap { min-height: calc(100vh - 80px); display: grid; place-items: center; }
.dn-the {
  width: min(440px, 100%); padding: 28px 24px 24px; background: var(--the); border-radius: 28px; box-shadow: var(--bong-noi);
  text-align: center; position: relative; overflow: hidden;
}
.dn-the::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--vach); }
.dn-thu { display: flex; justify-content: center; margin: 6px 0 10px; }
.dn-thu img { width: 64px; height: 64px; margin: 0 -6px; animation: nhun 2.4s ease-in-out infinite; }
.dn-thu img:nth-child(2) { animation-delay: .2s; } .dn-thu img:nth-child(3) { animation-delay: .4s; width: 76px; height: 76px; }
.dn-thu img:nth-child(4) { animation-delay: .6s; } .dn-thu img:nth-child(5) { animation-delay: .8s; }
.dn-the h1 { font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 800; }
.dn-the h1 span { color: var(--nhan); }
.dn-loi-chao { margin: 4px 0 18px; color: var(--muc2); }
.dn-form { display: grid; gap: 6px; text-align: left; }
.dn-form label, .mk-form label { font-weight: 700; font-size: .95rem; margin-top: 6px; }
.dn-form input, .mk-form input {
  min-height: 52px; padding: 0 16px; border: 2px solid var(--vien); border-radius: 14px; background: var(--nen); font-size: 1.05rem;
}
.dn-form input:focus, .mk-form input:focus { border-color: var(--nhan); outline: none; box-shadow: 0 0 0 4px var(--nhan-nhat); }
.dn-form .nut-lon { margin-top: 10px; width: 100%; }
.bao-loi { margin: 4px 0 0; min-height: 1.2em; color: var(--xau); font-weight: 600; font-size: .92rem; }
.bao-loi:empty { min-height: 0; }
.chon-mau { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.chon-mau button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--vien);
  border-radius: 999px; background: var(--the); font-weight: 700; font-size: .9rem; color: var(--muc2);
}
.chon-mau button[aria-checked="true"] { border-color: var(--nhan); color: var(--muc); background: var(--nhan-nhat); }
.mau-cv, .mau-lx { width: 18px; height: 18px; border-radius: 50%; }
.mau-cv { background: conic-gradient(#ff9e8f, #ffbe7d, #ffd98a, #8fd9b0, #8ed2e2, #aab3ef, #c9a5e2, #ff9e8f); }
.mau-lx { background: conic-gradient(#739552 0 50%, #fbe3a0 50% 100%); }

/* --- nhà ---------------------------------------------------------------------------------------------------------- */
.chao-be h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; }
.chao-be h1 span { background: var(--vach); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: saturate(1.4) brightness(.8); }
:root[data-giao-dien="la-xanh"] .chao-be h1 span { background: none; color: var(--nhan); filter: none; }
.goi-y { margin: 6px 0 0; color: var(--muc2); font-size: 1.05rem; max-width: 46rem; }
.lien-ket-to { display: inline-block; margin-left: 4px; font-weight: 800; color: var(--nhan); }
.tieu-de-muc { margin: 28px 0 14px; font-size: 1.5rem; }

.luoi-thu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.luoi-thu li:nth-child(7n+1) { --tint: var(--r1); } .luoi-thu li:nth-child(7n+2) { --tint: var(--r2); }
.luoi-thu li:nth-child(7n+3) { --tint: var(--r3); } .luoi-thu li:nth-child(7n+4) { --tint: var(--r4); }
.luoi-thu li:nth-child(7n+5) { --tint: var(--r5); } .luoi-thu li:nth-child(7n+6) { --tint: var(--r6); }
.luoi-thu li:nth-child(7n+7) { --tint: var(--r7); }
.the-thu {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 10px 14px; border: 0; border-radius: var(--bo); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 55%, var(--the)) 0 var(--dai, 112px), var(--the) var(--dai, 112px));
  box-shadow: var(--bong), inset 0 0 0 2px color-mix(in srgb, var(--tint) 70%, transparent);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1.2), box-shadow .18s ease;
}
.the-thu:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--bong-noi), inset 0 0 0 3px var(--tint); }
.the-thu:active { transform: translateY(0) scale(.98); }
.the-thu img { width: 96px; height: 96px; filter: drop-shadow(0 6px 6px rgb(47 40 66 / .18)); transition: transform .25s cubic-bezier(.2, .8, .3, 1.4); }
.the-thu:hover img { transform: scale(1.08) translateY(-2px); }
.tt-ten { font: 800 1.25rem/1.1 var(--chu-to); margin-top: 6px; }
.tt-biet-danh { font-size: .85rem; color: var(--mo); font-weight: 600; }
.tt-gian-ac { margin-top: 6px; font-size: .85rem; color: var(--muc2); }
.tt-gian-ac b { font-variant-numeric: tabular-nums; }
.tt-thuong { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--nen2); font-size: .82rem; font-weight: 700; color: var(--mo); }
.tt-thuong.nhieu { background: var(--nhan); color: var(--nhan-chu); }
.nhan { position: absolute; top: 10px; right: 10px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--the); }
.nhan.vua { color: var(--tot); box-shadow: inset 0 0 0 1.5px var(--tot); }
.nhan.kho { color: var(--nhan-dam); box-shadow: inset 0 0 0 1.5px var(--nhan); }

.hai-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 28px; }
.o-trang { background: var(--the); border-radius: var(--bo); box-shadow: var(--bong); padding: 18px 18px 12px; }
.o-trang h2 { font-size: 1.3rem; margin-bottom: 8px; }
.bang-vang, .van-gan { list-style: none; margin: 0; padding: 0; }
.bang-vang li, .van-gan li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; border-bottom: 1px dashed var(--vien); }
.bang-vang li:last-child, .van-gan li:last-child { border-bottom: 0; }
.bang-vang .hang { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--nen2); font-weight: 800; font-size: .9rem; flex: none; }
.bang-vang li:nth-child(1) .hang { background: #ffd98a; } .bang-vang li:nth-child(2) .hang { background: #e4e4ec; } .bang-vang li:nth-child(3) .hang { background: #f6c9a4; }
.bang-vang .bv-ten, .van-gan span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bang-vang b, .van-gan b { font: 800 1.1rem/1 var(--chu-to); font-variant-numeric: tabular-nums; }
.bang-vang li.la-toi { background: var(--nhan-nhat); border-radius: 12px; }
.van-gan img { flex: none; }
.van-gan .kq-thang b { color: var(--tot); } .van-gan .kq-thua b { color: var(--xau); }
.trong { color: var(--mo); font-size: .95rem; }
.cach-tinh { margin-top: 20px; background: var(--the); border-radius: var(--bo); box-shadow: var(--bong); padding: 4px 18px; }
.cach-tinh summary { min-height: 48px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.cach-tinh ul { margin: 0 0 14px; padding-left: 20px; color: var(--muc2); }

/* --- ván cờ ------------------------------------------------------------------------------------------------------- */
.van-khung { display: grid; grid-template-columns: minmax(0, 600px) minmax(260px, 340px); gap: 24px; justify-content: center; align-items: start; }
.van-ban { display: grid; gap: 10px; min-width: 0; }
.nguoi-choi { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 12px 4px 4px; border-radius: 16px; background: var(--the); box-shadow: var(--bong); }
.nguoi-choi > div { display: flex; flex-direction: column; min-width: 0; }
.nguoi-choi b { font: 800 1.05rem/1.15 var(--chu-to); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nguoi-choi span.nc-phu { font-size: .8rem; color: var(--mo); font-weight: 600; }
.nc-anh { width: 44px; height: 44px; }
.nc-chu { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--vach); font: 800 1.3rem/1 var(--chu-to); color: #2f2842; }
.van-ban .ban-cg { padding: 4px; }
.van-ben { display: grid; gap: 12px; position: sticky; top: 84px; }
.bong-bong { display: flex; align-items: flex-end; gap: 10px; }
.bb-anh { width: 72px; height: 72px; flex: none; animation: nhun 2.4s ease-in-out infinite; }
.bb-loi {
  position: relative; flex: 1; margin: 0 0 18px; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: var(--the);
  box-shadow: var(--bong); font-weight: 600; color: var(--muc2); min-height: 3em;
}
.trang-thai { margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--nhan-nhat); font: 800 1.15rem/1.3 var(--chu-to); color: var(--muc); }
.tai-may { padding: 12px 16px; border-radius: 16px; background: var(--the); box-shadow: var(--bong); }
.tai-may p { margin: 0; font-weight: 700; } .tai-may .nho { font-weight: 500; font-size: .82rem; color: var(--mo); }
.thanh-tai { height: 12px; margin: 8px 0; border-radius: 999px; background: var(--nen2); overflow: hidden; }
.thanh-tai span { display: block; height: 100%; background: var(--vach); transform-origin: left; transform: scaleX(0); transition: transform .2s; }
.nut-van { display: flex; flex-wrap: wrap; gap: 8px; }
.nut-van .nut-phu { flex: 1 1 auto; }
.con-di-lai { font-weight: 500; color: var(--mo); font-size: .85rem; }
.ds-nuoc {
  margin: 0; padding: 8px 10px 8px 40px; max-height: 220px; overflow: auto; background: var(--the); border-radius: 16px;
  box-shadow: var(--bong); font-variant-numeric: tabular-nums; color: var(--mo);
}
.ds-nuoc:empty { display: none; }
.ds-nuoc li { padding: 2px 0; }
.ds-nuoc li span { display: inline-block; min-width: 5.5em; color: var(--muc); font-weight: 600; }

.ket-qua { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgb(47 40 66 / .35); backdrop-filter: blur(2px); }
.kq-the {
  position: relative; width: min(420px, 100%); padding: 24px; border-radius: 28px; background: var(--the); text-align: center;
  box-shadow: var(--bong-noi); overflow: hidden; animation: bat-ra .35s cubic-bezier(.2, .8, .3, 1.3);
}
.kq-the::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--vach); }
.kq-anh { width: 112px; height: 112px; }
.ket-qua[data-kq="thang"] .kq-anh { animation: lac .6s ease-in-out 2; }
.kq-the h2 { font-size: 2rem; margin-top: 6px; }
.kq-loi { margin: 8px 0; color: var(--muc2); }
.kq-diem { display: inline-block; margin: 6px 0 16px; padding: 6px 16px; border-radius: 999px; background: var(--nen2); font: 800 1.3rem/1.2 var(--chu-to); }
.kq-diem[data-dau="cong"] { background: color-mix(in srgb, var(--tot) 14%, var(--the)); color: var(--tot); }
.kq-diem[data-dau="tru"] { background: color-mix(in srgb, var(--xau) 12%, var(--the)); color: var(--xau); }
.kq-nut { display: grid; gap: 8px; }
.phao-hoa { position: absolute; inset: 0; pointer-events: none; }
.ket-qua[data-kq="thang"] .phao-hoa {
  background:
    radial-gradient(circle, var(--r1) 0 5px, transparent 6px) 10% 0 / 40px 40px,
    radial-gradient(circle, var(--r3) 0 4px, transparent 5px) 60% 0 / 52px 48px,
    radial-gradient(circle, var(--r5) 0 5px, transparent 6px) 30% 0 / 46px 56px,
    radial-gradient(circle, var(--r7) 0 4px, transparent 5px) 85% 0 / 58px 44px;
  animation: roi 2.2s linear infinite; opacity: .8;
}

/* --- hộp thoại ---------------------------------------------------------------------------------------------------- */
dialog { border: 0; padding: 0; border-radius: 28px; background: var(--the); color: var(--muc); box-shadow: var(--bong-noi); width: min(440px, calc(100% - 32px)); }
dialog::backdrop { background: rgb(47 40 66 / .4); }
dialog[open] { animation: bat-ra .3s cubic-bezier(.2, .8, .3, 1.3); }
.hop-chon form, .mk-form { padding: 24px; display: grid; gap: 6px; text-align: center; }
.mk-form { text-align: left; }
.hc-anh { width: 112px; height: 112px; justify-self: center; }
.hop-chon h2, .mk-form h2 { font-size: 1.6rem; }
.hc-loi { margin: 0; color: var(--muc2); font-style: italic; }
.hc-diem { margin: 4px 0 8px; font-size: .9rem; color: var(--mo); }
.hc-quan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.hc-quan legend { width: 100%; margin-bottom: 8px; font-weight: 800; }
.hc-quan label { position: relative; }
.hc-quan input { position: absolute; opacity: 0; }
.hc-quan span {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 84px; border: 2px solid var(--vien);
  border-radius: 16px; font-weight: 700; font-size: .9rem; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.hc-quan img { width: 44px; height: 44px; }
.hc-quan img.nua { filter: grayscale(.5) contrast(.9); }
.hc-quan input:checked + span { border-color: var(--nhan); background: var(--nhan-nhat); }
.hc-quan input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.hc-nut { display: grid; gap: 8px; }

/* --- trang thầy --------------------------------------------------------------------------------------------------- */
.man-thay h1 { font-size: 2rem; }
.bang-cuon { margin: 16px 0; overflow-x: auto; background: var(--the); border-radius: var(--bo); box-shadow: var(--bong); }
.bang-thay { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bang-thay th, .bang-thay td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--vien); vertical-align: middle; white-space: nowrap; }
.bang-thay th { font-size: .8rem; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; }
.bang-thay td small { display: block; color: var(--mo); font-size: .78rem; }
.bang-thay .so { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.bang-thay .thao-tac { display: flex; gap: 6px; }
.bang-thay code { background: var(--nen2); padding: 2px 6px; border-radius: 6px; }

/* --- chuyển động -------------------------------------------------------------------------------------------------- */
@keyframes nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bat-ra { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lac { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.05); } 75% { transform: rotate(10deg) scale(1.05); } }
@keyframes roi { from { background-position-y: -60px, -40px, -80px, -20px; } to { background-position-y: 500px, 520px, 480px, 540px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- điện thoại --------------------------------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .van-khung { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .van-ben { position: static; }
}
@media (max-width: 599px) {
  main { padding-top: 14px; }
  .hieu span { display: none; }
  .luoi-thu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .the-thu { padding: 14px 6px 12px; }
  .the-thu { --dai: 92px; }
  .the-thu img { width: 76px; height: 76px; }
  .tt-ten { font-size: 1.1rem; }
  .dn-form input, .mk-form input { font-size: 16px; }
  .bb-anh { width: 56px; height: 56px; }
  .van-ben { grid-template-columns: minmax(0, 1fr); }
  .nut-van .nut-phu { padding: 0 10px; }
  body[data-man="van"] main { padding-left: 8px; padding-right: 8px; }
}