/* MẪU CSS — TRANG CỔNG (mở đầu + đăng nhập).  Sếp sửa thoải mái.
   ⛔ Chỗ cắm PHẢI còn: #050505 #f6f4f0 #e6b261

   ⭐ CẤU TẠO: khoá nhận diện NẰM NGANG (dấu hiệu + thương hiệu bên cạnh) ·
      chữ khối lớn CĂN TRÁI · bảng kho bên phải có dòng lệnh chạy và dải ảnh trôi.

   ⛔⛔ BÀI HỌC 05/08 — KHÔNG TẮT HIỆU ỨNG BẰNG CHỔI QUÉT.
      Bản trước dùng `@media(prefers-reduced-motion){*{animation:none!important}}`.
      Một dòng đó quét sạch CẢ con trỏ nhấp nháy, nút phát sáng và dải ảnh trôi —
      những thứ Sếp yêu cầu phải có. Nay chỉ tắt ĐÍCH DANH phần giật, và phần
      chuyển động liên tục thì do JS lái (xem cong.js) nên chổi CSS không quét tới.
*/
:root{
  --nen:#050505; --tam:#111111; --chu:#f6f4f0; --chu2:#a3a099;
  --diem:#e6b261; --vien:rgba(230,178,97,.20);
  --kim:linear-gradient(140deg,#f0d090 0%,#e6b261 42%,#b8842f 100%);
  --may:cubic-bezier(.4,0,.2,1);
  --mono:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(16px,3.2vw,46px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--nen);color:var(--chu2);font-family:var(--mono);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--diem);color:var(--nen)}

/* ── nền mưa chữ + lớp phủ ─────────────────────────────────────────
   Lớp phủ đậm ở CHỖ CÓ CHỮ và nhạt ở rìa để mưa chữ còn thở. */
#mua{position:fixed;inset:0;z-index:0;display:block}
.phu{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 56% at 27% 50%,rgba(5,5,5,.94) 0%,rgba(5,5,5,.76) 54%,rgba(5,5,5,0) 100%),
    linear-gradient(180deg,rgba(5,5,5,.70) 0%,rgba(5,5,5,.26) 24%,rgba(5,5,5,.26) 76%,rgba(5,5,5,.70) 100%)}
.crt{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 3px 4px)}

.boc{position:relative;z-index:4;min-height:100vh;display:flex;flex-direction:column;
  padding:clamp(14px,2.3vh,22px) var(--pad) clamp(12px,1.9vh,19px);gap:clamp(10px,1.6vh,17px)}

/* ══ KHOÁ NHẬN DIỆN NẰM NGANG ═══════════════════════════════════════ */
.dinh{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.hieu{display:flex;align-items:center;gap:clamp(10px,1.1vw,16px)}
.hieu img{height:clamp(42px,5.6vh,62px);width:auto}
.hieu .ten{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.hieu .ten b{font-size:clamp(13px,1.25vw,17px);font-weight:700;letter-spacing:.19em;
  color:var(--chu);text-transform:uppercase}
.hieu .ten s{text-decoration:none;font-size:clamp(9.5px,.86vw,11px);letter-spacing:.16em;
  color:var(--diem);text-transform:uppercase}

.tt{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--vien);padding:8px 14px;font-size:11px;letter-spacing:.17em;
  color:var(--chu2);white-space:nowrap;background:rgba(10,10,10,.6);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.cham{width:7px;height:7px;border-radius:50%;background:var(--diem);
  animation:nhap 1.4s steps(2) infinite}
@keyframes nhap{0%,49%{opacity:1}50%,100%{opacity:.18}}

/* ══ HAI CỘT ════════════════════════════════════════════════════════ */
.san{flex:1;display:grid;gap:clamp(18px,2.6vw,40px);align-items:center;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}

/* ── CỘT TRÁI: chữ khối lớn, căn trái ── */
.loi{position:relative;font-size:clamp(32px,6.8vw,88px);font-weight:800;line-height:.95;
  letter-spacing:-.005em;text-transform:uppercase;color:var(--chu)}
.loi .d{display:block;position:relative}
.loi .d.v{color:var(--diem)}

/* ⭐ CHỮ XƯỚC — hai lớp lệch màu, LỆCH SẴN KHI NGHỈ nên ảnh chụp tĩnh cũng thấy. */
.loi .d::before,.loi .d::after{content:attr(data-c);position:absolute;left:0;top:0;
  width:100%;pointer-events:none;mix-blend-mode:screen}
.loi .d::before{color:#4fd8ff;transform:translate(-3px,-1px);opacity:.5;
  clip-path:polygon(0 6%,100% 6%,100% 33%,0 33%)}
.loi .d::after{color:#ff5f9e;transform:translate(3px,1px);opacity:.42;
  clip-path:polygon(0 57%,100% 57%,100% 85%,0 85%)}
.loi .d::before{animation:xA 4.2s steps(2) infinite}
.loi .d::after{animation:xB 4.2s steps(2) infinite}
@keyframes xA{
  0%,78%{transform:translate(-3px,-1px);clip-path:polygon(0 6%,100% 6%,100% 33%,0 33%)}
  80%{transform:translate(-15px,-2px);clip-path:polygon(0 20%,100% 20%,100% 46%,0 46%)}
  83%{transform:translate(10px,2px);clip-path:polygon(0 60%,100% 60%,100% 73%,0 73%)}
  86%{transform:translate(-8px,0);clip-path:polygon(0 2%,100% 2%,100% 22%,0 22%)}
  88%,100%{transform:translate(-3px,-1px);clip-path:polygon(0 6%,100% 6%,100% 33%,0 33%)}}
@keyframes xB{
  0%,78%{transform:translate(3px,1px);clip-path:polygon(0 57%,100% 57%,100% 85%,0 85%)}
  80%{transform:translate(14px,3px);clip-path:polygon(0 66%,100% 66%,100% 93%,0 93%)}
  83%{transform:translate(-11px,-2px);clip-path:polygon(0 24%,100% 24%,100% 41%,0 41%)}
  86%{transform:translate(9px,-1px);clip-path:polygon(0 75%,100% 75%,100% 99%,0 99%)}
  88%,100%{transform:translate(3px,1px);clip-path:polygon(0 57%,100% 57%,100% 85%,0 85%)}}

/* vạch xước ngang cắt qua chữ — TĨNH */
.loi::after{content:"";position:absolute;inset:-2px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(5,5,5,.8) 5px 6px)}

/* ⭐ CHỮ TO LÊN — bản trước 11,5px, Sếp đọc không ra. */
.dan{margin-top:clamp(15px,2.2vh,24px);max-width:54ch;font-size:clamp(14px,1.12vw,17px);
  color:var(--chu2);line-height:1.85;text-wrap:pretty;min-height:5.5em}
.dan b{color:var(--chu);font-weight:400}

/* con trỏ dòng lệnh — nhấp nháy, KHÔNG nằm dưới chổi tắt-chuyển-động */
.con{display:inline-block;width:.58em;height:1.02em;background:var(--diem);
  vertical-align:-.14em;margin-left:2px;animation:conNhay 1.05s steps(2) infinite}
@keyframes conNhay{0%,49%{opacity:1}50%,100%{opacity:0}}

.cua{margin-top:clamp(16px,2.4vh,26px);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gbtn{min-height:46px;display:flex;align-items:center}

/* ⭐ NÚT ĐĂNG NHẬP — to, sáng, nhấp nháy đều. */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--diem);color:var(--nen);background:var(--diem);
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;padding:12px 24px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nut-lon{font-size:clamp(12px,1.05vw,14.5px);letter-spacing:.24em;padding:17px 38px;
  animation:nutTho 1.9s ease-in-out infinite}
@keyframes nutTho{
  0%,100%{box-shadow:0 0 13px rgba(230,178,97,.34),0 0 36px rgba(230,178,97,.11);filter:brightness(1)}
  50%    {box-shadow:0 0 28px rgba(230,178,97,.78),0 0 66px rgba(230,178,97,.30);filter:brightness(1.17)}}
.nut-lon:hover{animation:none;box-shadow:0 0 30px rgba(230,178,97,.85);filter:brightness(1.22)}

.ghi{margin-top:11px;font-size:11.5px;letter-spacing:.1em;color:var(--chu2);max-width:56ch;
  line-height:1.7}

.viec{margin-top:clamp(15px,2.2vh,24px);display:flex;gap:9px;flex-wrap:wrap}
.viec span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--vien);
  padding:9px 15px;font-size:11px;letter-spacing:.12em;color:var(--diem);white-space:nowrap}
.viec span::before{content:"";width:6px;height:6px;background:var(--diem);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex:none}

/* ── CỘT PHẢI: bảng kho ── */
.hud{border:1px solid var(--vien);background:rgba(9,9,9,.76);padding:clamp(14px,1.8vw,21px);
  position:relative;
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px))}
.hud-dinh{display:flex;justify-content:space-between;gap:12px;font-size:11px;
  letter-spacing:.18em;color:var(--diem);border-bottom:1px solid var(--vien);padding-bottom:10px}
.hud-dinh .ma{color:var(--chu2)}

/* ⭐ DÒNG LỆNH — chữ gõ ra từng ký tự, có con trỏ */
.lenh{margin-top:11px;display:flex;align-items:baseline;gap:8px;font-size:12.5px;
  letter-spacing:.05em;color:var(--chu);line-height:1.6;min-height:1.6em}
.lenh s{text-decoration:none;color:var(--diem);flex:none}
.lenh.nho{margin-top:clamp(12px,1.8vh,18px);font-size:11.5px;color:var(--chu2);
  border-top:1px solid var(--vien);padding-top:12px}

.dem-lon{margin:clamp(10px,1.6vh,16px) 0;display:flex;align-items:baseline;gap:12px}
.dem-lon b{font-size:clamp(40px,5.4vw,74px);line-height:.86;color:var(--chu);
  font-weight:200;letter-spacing:-.02em}
.dem-lon span{font-size:11px;letter-spacing:.2em;color:var(--chu2);text-transform:uppercase}

.hang{display:flex;flex-direction:column;gap:10px}
.d1{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:12px;align-items:center;
  font-size:11px;letter-spacing:.08em;color:var(--chu2);text-transform:uppercase}
.d1>span{display:block;min-width:0}
.d1 .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.d1 .g{display:block;position:relative;height:5px;margin-top:6px;
  background:rgba(255,255,255,.08);overflow:hidden}
.d1 .g i{position:absolute;left:0;top:0;bottom:0;background:var(--kim);width:0;
  transition:width 1.1s var(--may)}
.d1 .v{text-align:right;color:var(--diem);font-size:13px;letter-spacing:.03em}
.d1.cho .v{color:var(--chu2);font-size:10px;letter-spacing:.09em}

/* ⭐ DẢI ẢNH TRÔI — ảnh TO và hiện ĐỦ MÓN ĐỒ (contain, không cắt cụt). */
.bang-chay{margin-top:10px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.chay{display:flex;gap:8px;width:max-content;will-change:transform}
.chay img{width:clamp(78px,7.4vw,108px);height:clamp(78px,7.4vw,108px);
  object-fit:contain;background:#0d0d0d;border:1px solid var(--vien);padding:6px}

.hud-day{margin-top:clamp(11px,1.7vh,16px);border-top:1px solid var(--vien);padding-top:11px;
  font-size:11px;letter-spacing:.06em;color:var(--chu2);line-height:1.75}
.hud-day i{font-style:normal;color:var(--chu)}
.hud-day s{text-decoration:none;color:var(--diem);margin:0 6px}

.day{display:flex;justify-content:space-between;gap:14px;font-size:10.5px;letter-spacing:.16em;
  color:var(--chu2);text-transform:uppercase;border-top:1px solid var(--vien);padding-top:11px}
.day .s{color:var(--diem)}

/* ⛔ LUẬT R9 — chữ HIỆN MẶC ĐỊNH; chỉ khi JS chạy được mới ẩn đi chờ hiệu ứng. */
.ja .ra-dan{opacity:0;transform:translateY(12px)}
.ja .ra-dan.ra{opacity:1;transform:none;
  transition:opacity .55s var(--may),transform .55s var(--may)}

/* ══ MÀN HẸP ════════════════════════════════════════════════════════ */
@media(max-width:960px){
  .san{grid-template-columns:minmax(0,1fr)}
  .loi{font-size:clamp(30px,8.8vw,54px)}
  .dinh{gap:12px}
}
@media(max-height:840px) and (min-width:961px){
  .loi{font-size:clamp(28px,5vw,62px)}
  .dem-lon b{font-size:clamp(32px,4vw,54px)}
  .chay img{width:80px;height:80px}
  .dan{line-height:1.72;min-height:0}
}

/* ⛔⛔ TẮT CHUYỂN ĐỘNG — ĐÍCH DANH, KHÔNG QUÉT CHỔI.
   Chỉ tắt phần GIẬT. Con trỏ nhấp nháy, nút thở và dải ảnh trôi VẪN CHẠY:
   đó là những thứ Sếp yêu cầu phải có, và không thuộc nhóm gây chóng mặt. */
@media(prefers-reduced-motion:reduce){
  .loi .d::before,.loi .d::after{animation:none!important}
  .ra-dan{opacity:1!important;transform:none!important}
}