/* === MAU-CHU — NOI DUY NHAT GHI MA MAU + CO CHU (luat design-website) ===
   Lop gop y duoc CHEN vao trang cua khach => moi bien mang tien to --gy-, khong dat color-scheme,
   khong sua font/nen cua body. Ngoai khoi nay chi dung var(--gy-...). Chot: web-khach/DA-CHOT-lop-gop-y.md */
:root{
 --gy-giay:#ffffff;                          /* nen khung, danh sach */
 --gy-muc:#1b2430;  --gy-muc-k:27 36 48;     /* chu chinh, nut chinh, bong do */
 --gy-chi:#5b6675;                           /* chu phu */
 --gy-xam:#eef0f3;  --gy-vien:#c9d0d8;       /* nut phu, vien o nhap */
 --gy-dao:#ffe066;                           /* but da quang: thanh che do gop y */
 --gy-but-do:#c2261d;                        /* but do: ghim so, o dang chon, bao loi */
 --gy-xanh:#1f7a44;                          /* gui xong, bao thanh cong */
 --gy-trang:#ffffff;  --gy-trang-k:255 255 255;   /* vet sang xem thu Light sweep */
 /* Spec §18: khung ghi toi kieu Astra + o mau hieu ung + mau quang xem thu (hieu-ung.js doc cac token -k) */
 --gy-dem:#0c0f24;  --gy-dem-k:12 15 36;      /* nen dem xanh tim cua khung ghi */
 --gy-sao:#eef1ff;  --gy-sao-k:238 241 255;   /* chu tren nen dem */
 --gy-sao-mo:#aab3da;                         /* chu phu tren nen dem (8:1) */
 --gy-ngoc:#5ee6d0; --gy-ngoc-k:94 230 208;   /* xanh ngoc: quang sang, vien chon */
 --gy-tim:#9b7bff;  --gy-tim-k:155 123 255;   /* tim: quang sang, gradient nut */

 --gy-co-than:clamp(15px,14.5px + .125vw,16px);
 --gy-co-nhan:15px;
 --gy-co-ghim:13px;
 --gy-nut-cao:44px;
}
/* === HET MAU-CHU === */

/* Moi luat deu bat dau bang #gy-goc hoac lop gy-* => khong dung vao giao dien trang cua khach. */
#gy-goc{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--gy-co-than);line-height:1.5;color:var(--gy-muc);text-align:left}
#gy-goc *,#gy-goc *::before,#gy-goc *::after{box-sizing:border-box}
#gy-goc [hidden]{display:none !important}
/* Tieu de/doan van cua lop gop y: dat lai het, khong an kieu h2/h3/p cua trang khach (mammo: chu hoa, mau nhat, chan serif) */
#gy-goc h2,#gy-goc h3,#gy-goc p{font-family:inherit;color:var(--gy-muc);text-transform:none;letter-spacing:normal;line-height:1.3;max-width:none}

#gy-goc button{min-height:var(--gy-nut-cao);min-width:var(--gy-nut-cao);padding:10px 16px;margin:0;border:0;border-radius:10px;font:inherit;font-weight:600;line-height:1.2;background:var(--gy-muc);color:var(--gy-trang);cursor:pointer}
#gy-goc .gy-nut-phu{background:var(--gy-xam);color:var(--gy-muc)}
#gy-goc button:disabled{opacity:.5;cursor:not-allowed}
#gy-goc :focus-visible{outline:3px solid var(--gy-but-do);outline-offset:2px}

/* Nut noi goc phai duoi */
#gy-nut{position:fixed;right:16px;bottom:16px;z-index:2147483000;border-radius:999px;padding:12px 20px;box-shadow:0 6px 20px rgb(var(--gy-muc-k) / .28)}
#gy-nut[aria-pressed="true"]{background:var(--gy-giay);color:var(--gy-muc);box-shadow:0 0 0 2px var(--gy-muc),0 6px 20px rgb(var(--gy-muc-k) / .28)}

/* Thanh but da quang dinh tren cung khi dang gop y */
#gy-thanh{position:fixed;inset:0 0 auto 0;z-index:2147483000;background:var(--gy-dao);color:var(--gy-muc);padding:12px 16px;text-align:center;font-weight:600;font-size:var(--gy-co-nhan)}

/* Khung ghi, hop xac nhan, o hoi ten: tam truot tu day len (dien thoai), the noi goc phai (may tinh) */
#gy-khung,#gy-xac-nhan,#gy-ten-khung{position:fixed;left:0;right:0;bottom:0;z-index:2147483001;display:grid;gap:10px;max-width:560px;margin:0 auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--gy-giay);border-radius:16px 16px 0 0;box-shadow:0 -8px 28px rgb(var(--gy-muc-k) / .22)}
#gy-khung{max-height:85vh;overflow:auto;transition:transform .2s}
#gy-khung.gy-nhuong{transform:translateY(calc(100% + 80px))}
#gy-goc label{font-size:var(--gy-co-nhan);font-weight:600}
#gy-goc textarea,#gy-goc input:not([type=file]){width:100%;padding:10px 12px;font:inherit;font-size:16px;color:var(--gy-muc);background:var(--gy-giay);border:1px solid var(--gy-vien);border-radius:8px;min-height:var(--gy-nut-cao)}
#gy-goc textarea{resize:vertical}
#gy-goc input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
#gy-goc .gy-nut-phu[for]{display:inline-flex;align-items:center;width:max-content;min-height:var(--gy-nut-cao);padding:0 16px;border-radius:10px;background:var(--gy-xam);cursor:pointer}
#gy-goc .gy-ten-anh{font-size:var(--gy-co-nhan);color:var(--gy-chi)}
#gy-xac-nhan p{margin:0;font-size:17px;font-weight:600}

/* Spec §15: chon nhanh + bang hieu ung (xem thu) */
#gy-chon-nhanh{display:flex;flex-wrap:wrap;gap:6px}
#gy-goc .gy-chip{padding:8px 14px;border-radius:999px;background:var(--gy-xam);color:var(--gy-muc);font-size:var(--gy-co-nhan)}
#gy-goc #gy-mo-hieu-ung{justify-self:start}
#gy-hieu-ung{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#gy-goc #gy-hieu-ung button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;background:var(--gy-xam);color:var(--gy-muc)}
#gy-goc #gy-hieu-ung button[aria-pressed="true"]{background:var(--gy-muc);color:var(--gy-trang)}
#gy-goc #gy-hieu-ung b{font-size:var(--gy-co-nhan)}
#gy-goc #gy-hieu-ung small{font-size:13px;font-weight:400;opacity:.85}
/* Khung phu xem thu: lop rieng cua lop gop y, khong cham vao phan tu trang khach */
#gy-goc .gy-phu{position:fixed;z-index:2147482998;pointer-events:none;overflow:hidden}
#gy-goc .gy-phu-khoi{background:rgb(var(--gy-muc-k) / .18)}
#gy-goc .gy-phu-dai{position:absolute;inset:0 -20%;background:linear-gradient(105deg,transparent 26%,rgb(var(--gy-ngoc-k) / .55) 40%,rgb(var(--gy-trang-k) / .95) 48%,rgb(var(--gy-tim-k) / .5) 56%,transparent 70%)}

/* Danh sach gop y cua dot dang mo */
#gy-danh-sach{position:fixed;left:16px;bottom:76px;z-index:2147483000;width:min(360px,calc(100vw - 32px));max-height:40vh;overflow:auto;padding:12px;background:var(--gy-giay);border-radius:12px;box-shadow:0 6px 20px rgb(var(--gy-muc-k) / .2)}
#gy-danh-sach h2{margin:0 0 8px;font-size:16px;font-weight:700}
#gy-danh-sach ol{display:grid;gap:8px;margin:0 0 10px;padding:0;list-style:none}
#gy-goc .gy-dong{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px;align-items:center;font-size:var(--gy-co-nhan);overflow-wrap:anywhere}
#gy-goc .gy-so{min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gy-but-do);color:var(--gy-trang);font-size:var(--gy-co-ghim);font-weight:700;line-height:24px;text-align:center}
#gy-goc #gy-xong{width:100%;background:var(--gy-xanh)}
#gy-goc .gy-hang-hu{display:flex;flex-wrap:wrap;gap:8px}
/* Spec §17: o Chu moi, tieu de nhom trong bang hieu ung, lop phu Nen */
#gy-goc .gy-doi-chu{display:grid;gap:4px}
#gy-goc .gy-doi-chu label{font-size:var(--gy-co-ghim);font-weight:600;color:var(--gy-chi)}
#gy-goc .gy-nhom-hu{grid-column:1/-1;margin:6px 0 0;font-size:var(--gy-co-ghim);font-weight:700;color:var(--gy-chi)}
/* Lich su gop y da gui (spec §16): nhu khung chat, moi nhat truoc, chia theo dot */
#gy-lich-su h3{margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--gy-vien);font-size:16px;font-weight:700}
#gy-goc .gy-dot-cu{margin:10px 0 6px;font-size:var(--gy-co-ghim);font-weight:600;color:var(--gy-chi)}
#gy-goc .gy-cu{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"so chu chu" "so nhan sua";gap:4px 8px;align-items:center;font-size:var(--gy-co-nhan);overflow-wrap:anywhere}
#gy-goc .gy-cu .gy-so{grid-area:so;align-self:start;margin-top:10px;background:var(--gy-chi)}
#gy-goc .gy-cu .gy-chu{grid-area:chu;min-height:var(--gy-nut-cao);padding:8px 10px;text-align:left;font-weight:400;background:var(--gy-xam);color:var(--gy-muc);border-radius:4px 12px 12px 12px}
#gy-goc .gy-cu .gy-chu b{font-weight:700}
#gy-goc .gy-nhan{grid-area:nhan;justify-self:start;padding:2px 8px;border-radius:999px;font-size:var(--gy-co-ghim);font-weight:600;background:var(--gy-xam);color:var(--gy-muc)}
#gy-goc .gy-nhan[data-tt=duyet]{background:var(--gy-dao)}
#gy-goc .gy-nhan[data-tt=da_sua]{background:var(--gy-xanh);color:var(--gy-trang)}
#gy-goc .gy-cu .gy-nut-phu{grid-area:sua;padding:8px 12px}

/* Thong bao */
#gy-bao{position:fixed;left:16px;right:16px;top:60px;z-index:2147483002;max-width:560px;margin:0 auto;padding:12px 16px;border-radius:10px;background:var(--gy-muc);color:var(--gy-trang);font-size:var(--gy-co-nhan)}
#gy-bao[data-loai=loi]{background:var(--gy-but-do)}
#gy-bao[data-loai=tot]{background:var(--gy-xanh)}

/* Danh dau tren trang khach: chi them vien/ghim, khong doi bo cuc (tru cho trong cho thanh che do) */
/* Day trang them cho trong khi bat gop y: o sat day trang cuon len duoc, khong nam ket duoi danh sach gop y (co dinh goc duoi) */
html.gy-bat body{padding-top:48px;padding-bottom:calc(40vh + 96px)}
html.gy-bat .gy-soi{outline:2px dashed var(--gy-muc);outline-offset:2px;cursor:crosshair}
.gy-dang-chon{outline:3px solid var(--gy-but-do) !important;outline-offset:2px}
/* Ghim: lop co dinh rieng cua lop gop y, toa do do JS dat tu getBoundingClientRect (khong cham vao o cua trang khach) */
html:not(.gy-bat) #gy-goc .gy-lop-ghim{display:none}
#gy-goc .gy-ghim{pointer-events:none;position:fixed;top:0;left:0;z-index:2147482999;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gy-but-do);color:var(--gy-trang);box-shadow:0 0 0 2px var(--gy-trang);font:700 var(--gy-co-ghim)/24px system-ui,-apple-system,sans-serif;text-align:center}

/* ===== Spec §18: khung ghi toi kieu Astra (chi #gy-khung; dai vang, danh sach, ghim van sang) ===== */
#gy-goc #gy-khung.gy-toi{color:var(--gy-sao);background:radial-gradient(120% 70% at 85% 0%,rgb(var(--gy-tim-k) / .30),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgb(var(--gy-ngoc-k) / .16),transparent 60%),rgb(var(--gy-dem-k) / .95);border:1px solid rgb(var(--gy-sao-k) / .14);box-shadow:0 -6px 22px rgb(var(--gy-dem-k) / .35),0 0 0 1px rgb(var(--gy-tim-k) / .22),inset 0 1px 0 rgb(var(--gy-sao-k) / .10);backdrop-filter:blur(8px)}
#gy-goc #gy-khung.gy-toi label,#gy-goc #gy-khung.gy-toi p{color:var(--gy-sao)}
#gy-goc #gy-khung.gy-toi .gy-nhom-hu,#gy-goc #gy-khung.gy-toi .gy-doi-chu label,#gy-goc #gy-khung.gy-toi .gy-ten-anh{color:var(--gy-sao-mo)}
#gy-goc #gy-khung.gy-toi textarea,#gy-goc #gy-khung.gy-toi input:not([type=file]){color:var(--gy-sao);background:rgb(var(--gy-sao-k) / .06);border-color:rgb(var(--gy-sao-k) / .20)}
#gy-goc #gy-khung.gy-toi textarea::placeholder{color:var(--gy-sao-mo)}
#gy-goc #gy-khung.gy-toi textarea:focus{outline:none;border-color:var(--gy-ngoc);box-shadow:0 0 0 3px rgb(var(--gy-ngoc-k) / .22)}
#gy-goc #gy-khung.gy-toi :focus-visible{outline-color:var(--gy-ngoc)}
#gy-goc #gy-khung.gy-toi button{color:var(--gy-dem);background:linear-gradient(120deg,var(--gy-ngoc),var(--gy-tim));box-shadow:0 0 20px rgb(var(--gy-tim-k) / .35)}
#gy-goc #gy-khung.gy-toi .gy-nut-phu,#gy-goc #gy-khung.gy-toi .gy-chip{color:var(--gy-sao);background:rgb(var(--gy-sao-k) / .08);border:1px solid rgb(var(--gy-sao-k) / .16);box-shadow:none}
#gy-goc #gy-khung.gy-toi .gy-chip:active,#gy-goc #gy-khung.gy-toi .gy-nut-phu:active{background:rgb(var(--gy-sao-k) / .16)}
/* Bang hieu ung: o kinh, o dang chon vien gradient phat sang */
#gy-goc #gy-khung.gy-toi #gy-hieu-ung button{justify-content:flex-start;gap:1px;padding:6px 6px 8px;color:var(--gy-sao);background:rgb(var(--gy-sao-k) / .05);border:1px solid rgb(var(--gy-sao-k) / .12);border-radius:12px;box-shadow:none}
#gy-goc #gy-khung.gy-toi #gy-hieu-ung button[aria-pressed="true"]{border:2px solid transparent;background:linear-gradient(rgb(var(--gy-dem-k)),rgb(var(--gy-dem-k))) padding-box,linear-gradient(130deg,var(--gy-ngoc),var(--gy-tim)) border-box;box-shadow:0 0 18px rgb(var(--gy-tim-k) / .5)}
#gy-goc #gy-khung.gy-toi #gy-hieu-ung small{color:var(--gy-sao-mo);opacity:1}

/* San khau nho tren moi nut (chi CSS). Chay lap chi khi bang mo (bang an => display:none => dung) */
#gy-goc .gy-mau{position:relative;display:grid;place-items:center;width:100%;height:42px;margin-bottom:4px;border-radius:8px;overflow:hidden;perspective:220px;background:radial-gradient(120% 90% at 50% 125%,rgb(var(--gy-tim-k) / .38),transparent 70%),rgb(var(--gy-dem-k) / .92)}
#gy-goc .gy-mau i{display:block;font-style:normal;font-weight:800;font-size:18px;line-height:1;color:var(--gy-sao)}
#gy-goc .gy-mau s{display:block;text-decoration:none}
#gy-goc .gy-mau>*{animation:2.6s cubic-bezier(.22,1,.36,1) infinite both}
#gy-goc .gy-mau[data-mau=pop] i{animation-name:gy-m-pop}
#gy-goc .gy-mau[data-mau=mask] i{animation-name:gy-m-mask}
#gy-goc .gy-mau[data-mau=stagger]{display:flex;align-items:center;justify-content:center;gap:4px}
#gy-goc .gy-mau[data-mau=stagger] i{width:10px;height:20px;border-radius:3px;background:linear-gradient(var(--gy-ngoc),var(--gy-tim));animation-name:gy-m-len;animation-delay:calc(var(--i) * .14s)}
#gy-goc .gy-mau[data-mau=overshoot] i{animation-name:gy-m-nay}
#gy-goc .gy-mau[data-mau=squash] i{transform-origin:50% 100%;animation-name:gy-m-bop}
#gy-goc .gy-mau[data-mau=flip] i{animation-name:gy-m-lat}
#gy-goc .gy-mau[data-mau=glow] i{animation-name:gy-m-sang}
#gy-goc .gy-mau[data-mau=flash] i{animation-name:gy-m-loe}
#gy-goc .gy-mau[data-mau=khong] i{opacity:.55;animation:none}
#gy-goc .gy-mau[data-mau=sweep] s{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(var(--gy-sao-k) / .9) 50%,rgb(var(--gy-ngoc-k) / .4) 55%,transparent 70%);transform:translateX(-120%);animation-name:gy-m-vet}
#gy-goc .gy-mau[data-mau=flash] s,#gy-goc .gy-phu-tia-sao{position:absolute;left:50%;top:50%;width:36px;height:36px;transform:translate(-50%,-50%) scale(.8);background:radial-gradient(circle,var(--gy-sao) 0 7%,rgb(var(--gy-ngoc-k) / .55) 20%,transparent 58%),linear-gradient(transparent 47%,var(--gy-sao) 49% 51%,transparent 53%),linear-gradient(90deg,transparent 47%,var(--gy-sao) 49% 51%,transparent 53%);border-radius:50%}
#gy-goc .gy-mau[data-mau=flash] s{opacity:.9;animation-name:gy-m-chop}
#gy-goc .gy-mau[data-mau=burst] i{position:absolute;left:50%;top:50%;width:3px;height:8px;margin:-4px 0 0 -1.5px;border-radius:2px;background:var(--gy-ngoc);box-shadow:0 0 6px var(--gy-ngoc);transform:rotate(calc(var(--i) * 45deg)) translateY(-13px);animation-name:gy-m-tia}
#gy-goc .gy-mau[data-mau=burst] i:nth-child(3n+2){background:var(--gy-tim);box-shadow:0 0 6px var(--gy-tim)}
#gy-goc .gy-mau[data-mau=burst] i:nth-child(3n){background:var(--gy-dao);box-shadow:0 0 6px var(--gy-dao)}
@keyframes gy-m-pop{0%{transform:scale(.3);opacity:0}22%{transform:scale(1.18);opacity:1}32%,100%{transform:scale(1);opacity:1}}
@keyframes gy-m-mask{0%{clip-path:inset(0 0 100% 0);transform:translateY(12px)}30%,100%{clip-path:inset(0);transform:none}}
@keyframes gy-m-len{0%{opacity:0;transform:translateY(12px)}20%,100%{opacity:1;transform:none}}
@keyframes gy-m-nay{0%,40%,100%{transform:none}12%{transform:translateY(-10px) scale(1.1)}22%{transform:translateY(2px) scale(.97)}30%{transform:none}}
@keyframes gy-m-bop{0%,40%,100%{transform:none}10%{transform:scale(1.35,.65)}20%{transform:scale(.82,1.22)}30%{transform:none}}
@keyframes gy-m-lat{0%{transform:rotateY(0)}38%,100%{transform:rotateY(360deg)}}
@keyframes gy-m-sang{0%,70%,100%{text-shadow:0 0 0 transparent}30%{text-shadow:0 0 6px var(--gy-ngoc),0 0 14px rgb(var(--gy-ngoc-k) / .85),0 0 26px var(--gy-tim)}}
@keyframes gy-m-loe{0%,30%,100%{filter:brightness(1)}10%{filter:brightness(1.8) drop-shadow(0 0 6px var(--gy-sao))}}
@keyframes gy-m-chop{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(45deg)}30%{opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(90deg)}}
@keyframes gy-m-vet{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
@keyframes gy-m-tia{0%{opacity:0;transform:rotate(calc(var(--i) * 45deg)) translateY(-2px) scale(1)}6%{opacity:1}36%{opacity:0;transform:rotate(calc(var(--i) * 45deg)) translateY(-19px) scale(.3)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#gy-goc .gy-mau,#gy-goc .gy-mau *{animation:none !important}}

/* Xem thu dam hon (spec §18): tia lua Toa sang, chop Loe sang, vet sang doi */
#gy-goc .gy-phu-vong,#gy-goc .gy-phu-chop,#gy-goc .gy-phu-hao{overflow:visible;box-shadow:none}
#gy-goc .gy-phu-vong,#gy-goc .gy-phu-chop{z-index:2147483002}  /* tia/chop bay de len khung ghi */
#gy-goc .gy-phu-quang{position:absolute;inset:-35% -12%;border-radius:50%;mix-blend-mode:multiply;background:radial-gradient(closest-side,rgb(var(--gy-ngoc-k) / .55),rgb(var(--gy-tim-k) / .4) 55%,transparent)}
#gy-goc .gy-phu-vong-sang{position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 3px var(--gy-ngoc),0 0 26px 8px rgb(var(--gy-tim-k) / .6)}
#gy-goc .gy-tia{position:absolute;left:50%;top:50%;width:5px;height:16px;margin:-8px 0 0 -2.5px;border-radius:3px;background:var(--gy-ngoc);box-shadow:0 0 12px var(--gy-ngoc)}
#gy-goc .gy-tia-1{background:var(--gy-tim);box-shadow:0 0 12px var(--gy-tim)}
#gy-goc .gy-tia-2{background:var(--gy-dao);box-shadow:0 0 12px var(--gy-dao)}
#gy-goc .gy-phu-tia-sao{width:200px;height:200px;background:radial-gradient(circle,var(--gy-sao) 0 5%,rgb(var(--gy-ngoc-k) / .7) 14%,rgb(var(--gy-tim-k) / .35) 30%,transparent 56%),linear-gradient(transparent 48%,var(--gy-tim) 49.5% 50.5%,transparent 52%),linear-gradient(90deg,transparent 48%,var(--gy-ngoc) 49.5% 50.5%,transparent 52%)}
#gy-goc .gy-phu-dai-mo{opacity:.55}

@media (min-width:768px){
 #gy-khung,#gy-xac-nhan,#gy-ten-khung{left:auto;right:16px;bottom:76px;width:420px;border-radius:16px;padding-bottom:16px}
}