/* style.css — dung chung cho trang khach va trang quan tri
   Giao dien v2 (2026-10-11): phong Be Vietnam Pro, the bo tron co bong, nut noi,
   nhan trang thai co cham mau. Mau phu (nen nhat cua xanh/vang/do...) deu tinh tu
   bien mau bang color-mix() nen 11 bo mau tu an theo, khong phai khai rieng.
   2026-10-13: da gop — bo ~105 khai bao bi de hoan toan, kiem chung bang so sanh
   getComputedStyle cu/moi tren moi man, 10 co man, nen sang/toi: 0 khac biet. */
:root{
  --nen:#0f1216; --the:#171c22; --vien:#262e37; --chu:#e6edf3; --mo:#94a2b0;
  --xanh:#2ea043; --vang:#d29922; --do:#da3633; --lam:#1f6feb;
  --chu-thuong:"Be Vietnam Pro","Inter","Segoe UI Variable Text","Segoe UI",system-ui,
               -apple-system,"Noto Sans",Roboto,Arial,sans-serif;
  --chu-so:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,
           "Liberation Mono",monospace;
  --bo:14px;                         /* bo goc the */
  --bo-nho:10px;                     /* bo goc nut, o nhap */
  --bong:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -12px rgba(0,0,0,.55);
  --mo-nhe:rgba(255,255,255,.04);    /* lop phu rat nhe tren nen toi */
}
html[data-sang]{
  --bong:0 1px 2px rgba(20,20,40,.05),0 10px 30px -14px rgba(20,20,40,.18);
  --mo-nhe:rgba(0,0,0,.035);
}
*{box-sizing:border-box}
html{background:var(--nen)}
body{margin:0;min-height:100vh;color:var(--chu);background:transparent;  /* nền: body::before (v45) */
     font:400 14.5px/1.6 var(--chu-thuong);-webkit-text-size-adjust:100%;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     text-rendering:optimizeLegibility}
a{color:var(--lam);text-underline-offset:3px}
::selection{background:color-mix(in srgb,var(--lam) 35%,transparent)}

/* ====================================================================== đầu trang === */
header{display:flex;align-items:center;gap:14px;padding:12px 24px;flex-wrap:wrap;
       position:sticky;top:0;z-index:5;
       -webkit-backdrop-filter:blur(14px) saturate(1.4);
       backdrop-filter:blur(14px) saturate(1.4);
       border-bottom:1px solid var(--vien)}
h1{margin:0;
   display:flex;align-items:center;flex-wrap:wrap}
/* logo + ten trang + nhan su kien: xem khoi "thuong hieu" o cuoi tep */
.trang-thai{margin-left:auto;display:flex;align-items:center;font-size:13px;
            color:var(--mo);flex-wrap:wrap}
.cham{width:8px;height:8px;border-radius:50%;background:var(--mo);flex:0 0 auto;
      margin-left:4px}
.cham.on{background:var(--xanh);
         box-shadow:0 0 0 4px color-mix(in srgb,var(--xanh) 22%,transparent);
         animation:nhip 2s ease-in-out infinite}
.cham.off{background:var(--do)}
.cham.cho{background:var(--vang)}
@keyframes nhip{50%{box-shadow:0 0 0 7px transparent}}

/* ============================================================================ thẻ === */
main{padding:24px;max-width:1120px;margin:0 auto}
.the{border:1px solid var(--vien);
     padding:20px 22px;margin-bottom:18px}
.the h2{margin:0 0 4px}
.the p.chu-thich{margin:0 0 16px;color:var(--mo)}
.the p.chu-thich b{color:var(--chu);font-weight:600}

/* ======================================================================== ô nhập === */
label{display:block;font-weight:600;color:var(--mo);
      margin-bottom:6px;text-transform:uppercase}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;color:var(--chu);border:1px solid var(--vien);border-radius:var(--bo-nho);
  padding:10px 13px;font:400 14.5px/1.5 var(--chu-thuong)}
input::placeholder,textarea::placeholder{color:var(--mo);opacity:.7}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
       background-image:linear-gradient(45deg,transparent 50%,var(--mo) 50%),
                        linear-gradient(135deg,var(--mo) 50%,transparent 50%);
       background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;
       background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea{font:13px/1.7 var(--chu-so);resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lam)}
.o{margin-bottom:14px}
.hang{display:flex;gap:12px;flex-wrap:wrap}
.hang>.o{flex:1 1 200px}
code{font:500 12.5px var(--chu-so);background:var(--mo-nhe);padding:1px 6px;
     border-radius:5px}

/* =========================================================================== nút === */
button.nut,a.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:#fff;border:1px solid transparent;border-radius:var(--bo-nho);
  padding:10px 18px;cursor:pointer;text-decoration:none;text-align:center;
  font:600 14px/1.35 var(--chu-thuong);letter-spacing:-.005em;
  background:var(--lam);
  background:linear-gradient(180deg,color-mix(in srgb,var(--lam) 86%,#fff),var(--lam));
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--lam) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s,filter .15s,box-shadow .15s,border-color .15s}
button.nut:hover,a.nut:hover{filter:brightness(1.08);transform:translateY(-1px)}
button.nut:active,a.nut:active{transform:translateY(0)}
button.nut.phu,a.nut.phu{color:var(--chu);background:var(--mo-nhe);
  border-color:var(--vien);box-shadow:none}
button.nut.phu:hover,a.nut.phu:hover{filter:none;
  border-color:color-mix(in srgb,var(--lam) 55%,var(--vien))}
button.nut.do{background:var(--do);
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--do) 70%,transparent)}
button.nut:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.hang-nut{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ======================================================================= ô đếm === */
.dem{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;
     margin-bottom:14px}
.dem div{
         border:1px solid var(--vien);color:var(--mo)}
.dem b{color:var(--chu);display:block;line-height:1.2;margin-bottom:2px;font-variant-numeric:tabular-nums}
.dem div.xong{
              border-color:color-mix(in srgb,var(--xanh) 30%,var(--vien))}
.dem div.loi{
             border-color:color-mix(in srgb,var(--do) 30%,var(--vien))}
.dem div.dangchay{
                  border-color:color-mix(in srgb,var(--vang) 30%,var(--vien))}
.dem div.xong b{color:var(--xanh)} .dem div.loi b{color:var(--do)}
.dem div.dangchay b{color:var(--vang)}

/* ================================================================ thanh tiến độ === */
.thanh{border-radius:99px;overflow:hidden;margin:10px 0 10px;border:1px solid var(--vien)}
.thanh i{display:block;height:100%;width:0;border-radius:99px;
         background:var(--xanh);
         background:linear-gradient(90deg,color-mix(in srgb,var(--xanh) 70%,#fff),var(--xanh));
         box-shadow:0 0 12px color-mix(in srgb,var(--xanh) 55%,transparent);
         transition:width .6s cubic-bezier(.2,.8,.2,1)}
.phan-tram{display:flex;justify-content:space-between;align-items:baseline;color:var(--mo);font-variant-numeric:tabular-nums}
.phan-tram b{color:var(--chu);font-weight:700}

/* ========================================================================= bảng === */
.bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px;
      font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--vien);
      vertical-align:middle;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.dai{white-space:normal;min-width:180px}
th{color:var(--mo);font-weight:600;text-transform:uppercase;position:sticky;top:0;background:var(--the)}
td.tk{font:500 13px var(--chu-so);letter-spacing:-.01em}
td.tk a{font-weight:600}

/* ================================================================ nhãn trạng thái === */
.nhan{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 9px;
      border-radius:99px;font-size:12px;white-space:nowrap;
      color:var(--mo);background:var(--mo-nhe)}
.nhan::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nhan.dang_chay{color:var(--vang);background:color-mix(in srgb,var(--vang) 13%,transparent);
                border-color:color-mix(in srgb,var(--vang) 30%,transparent)}
.nhan.dang_chay::before{animation:chop 1.2s ease-in-out infinite}
.nhan.xong{color:var(--xanh);background:color-mix(in srgb,var(--xanh) 13%,transparent);
           border-color:color-mix(in srgb,var(--xanh) 30%,transparent)}
.nhan.loi{color:var(--do);background:color-mix(in srgb,var(--do) 13%,transparent);
          border-color:color-mix(in srgb,var(--do) 30%,transparent)}
.nhan.bo_qua{text-decoration:line-through}
@keyframes chop{50%{opacity:.25}}

/* ======================================================================= bộ lọc === */
.loc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 14px}
.loc button{background:var(--mo-nhe);border:1px solid var(--vien);color:var(--mo);
            border-radius:99px;padding:6px 14px;cursor:pointer;
            font:500 13px var(--chu-thuong)}
.loc button:hover{color:var(--chu)}
.loc button.chon{background:var(--lam);border-color:var(--lam);color:#fff;
                 box-shadow:0 4px 12px -4px color-mix(in srgb,var(--lam) 70%,transparent)}
.loc input{max-width:240px;padding:7px 14px;border-radius:99px;margin-left:auto}

pre.log{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-nho);
        padding:14px;max-height:300px;overflow:auto;margin:0;
        font:12px/1.7 var(--chu-so);white-space:pre-wrap}

/* ========================================================================= báo === */
.bao{border-radius:var(--bo-nho);padding:12px 14px;font-size:13.5px;margin-bottom:14px;
     border:1px solid var(--vien)}
.bao.vang{color:var(--vang);background:color-mix(in srgb,var(--vang) 11%,transparent);
          border-color:color-mix(in srgb,var(--vang) 35%,transparent)}
.bao.do{color:var(--do);background:color-mix(in srgb,var(--do) 11%,transparent);
        border-color:color-mix(in srgb,var(--do) 35%,transparent)}
.bao.xanh{color:var(--xanh);background:color-mix(in srgb,var(--xanh) 11%,transparent);
          border-color:color-mix(in srgb,var(--xanh) 35%,transparent)}
.an{display:none!important}

/* ================================================== thanh tab (trang quản trị) === */
nav{display:flex;gap:4px;padding:10px 24px 0;border-bottom:1px solid var(--vien)}
nav button{background:none;border:none;color:var(--mo);padding:10px 16px;
           cursor:pointer;font:500 14px var(--chu-thuong);
           border-bottom:2px solid transparent}
nav button:hover{color:var(--chu)}
nav button.chon{color:var(--chu);border-bottom-color:var(--lam)}
section{display:none} section.hien{display:block}

.lien-ket{display:flex;gap:8px;align-items:center;background:var(--nen);
          border:1px solid var(--vien);border-radius:var(--bo-nho);padding:9px 12px;
          font-family:var(--chu-so);font-size:12.5px;word-break:break-all}
.giua{max-width:440px;margin:60px auto}
.ghi-chu{color:var(--mo);margin-top:8px}

/* ====================================================== màn đăng nhập / đăng ký === */
#khung-tk .the{padding:28px 28px 24px}
#khung-tk .the h2{margin-bottom:6px}
#khung-tk .hang-nut{flex-direction:column;align-items:stretch}
#khung-tk .hang-nut .nut{width:100%;padding:12px}

/* ====================================================== màn tablet ============= */
@media(max-width:900px){
  .dem{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* ============================================================ điện thoại ======= */
@media(max-width:700px){
  main{padding:14px 12px}
  .the{padding:16px 15px;margin-bottom:14px}
  th,td{padding:8px 9px}
  .giua{margin:24px auto}

  /* --- đầu trang --- */
  header{padding:12px 12px 10px;gap:10px;flex-wrap:wrap}
  h1{flex:1 1 100%}

  /* --- ô đếm: 2 cột --- */
  .dem{grid-template-columns:repeat(2,1fr);gap:10px}
  .dem div{line-height:1.35;word-break:break-word}

  /* --- bảng nhập mã: mỗi dòng thành một thẻ, ô mã rộng hết bề ngang --- */
  .bang-cuon.o-nhap-ma{overflow:visible}
  table.bang-nhap,
  table.bang-nhap tbody,
  table.bang-nhap tfoot,
  table.bang-nhap tr,
  table.bang-nhap td,
  table.bang-nhap tfoot th{display:block;width:auto}
  table.bang-nhap thead{display:none}
  table.bang-nhap tr{border:1px solid var(--vien);border-radius:12px;
                     padding:11px;margin-bottom:10px;background:var(--mo-nhe);
                     display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
  table.bang-nhap td{border:none;white-space:normal}
  table.bang-nhap td:first-child{flex:1 1 100%;margin-bottom:1px}
  table.bang-nhap input.ma{font-size:15px;padding:11px 12px}
  table.bang-nhap td.token-o{flex:1 1 100%;width:auto;margin-bottom:1px}
  table.bang-nhap td.token-o::before{content:attr(data-nhan);display:block;
                                     color:var(--mo);font-size:11.5px;font-weight:600;
                                     text-transform:uppercase;letter-spacing:.08em;
                                     margin-bottom:4px}
  table.bang-nhap input.token{font-size:15px;padding:11px 12px}
  table.bang-nhap td.luot-o{flex:0 0 auto;width:auto}
  table.bang-nhap input.luot{width:74px;font-size:15px;padding:9px 6px}
  table.bang-nhap td.tien{flex:1 1 100%;order:2;min-width:0;width:auto;
                          font-size:14px;margin-top:-2px}
  table.bang-nhap td.tien::before{content:attr(data-nhan) " ";color:var(--mo);
                                  font-size:12px;font-weight:400}
  table.bang-nhap td.luot-o::before{content:attr(data-nhan) " ";color:var(--mo);
                                    font-size:12px;margin-right:4px}
  table.bang-nhap td.xoa-o{flex:0 0 auto;order:1;width:auto;margin-left:auto}
  table.bang-nhap button.xoa-dong{width:36px;height:36px;font-size:21px}
  table.bang-nhap tfoot tr{border:none;background:none;padding:0;margin:0;
                           display:flex;gap:14px;flex-wrap:wrap}
  table.bang-nhap tfoot th{border:none;padding:0}

  /* --- bảng thông tin chuyển khoản: nhãn trên, nội dung dưới --- */
  .bang-cuon.o-nap-tt{overflow:visible}
  table.bang-doc,table.bang-doc tbody,table.bang-doc tr,
  table.bang-doc th,table.bang-doc td{display:block;width:auto!important}
  table.bang-doc tr{border-bottom:1px solid var(--vien);padding:9px 0}
  table.bang-doc tr:last-child{border-bottom:none}
  table.bang-doc th{position:static;border:none;padding:0 0 3px;background:none}
  table.bang-doc td{border:none;padding:0;white-space:normal;word-break:break-word;
                    font-size:15px}

  /* --- thanh lọc --- */
  .loc input{max-width:none;flex:1 1 140px;margin-left:0}
  .loc{gap:6px}
  .loc button{padding:6px 12px}

  .the>.hang>div:not(.o){flex:1 1 auto;min-width:calc(50% - 14px)}
  #dong-tieu-de th:first-child{width:34px!important}

  table{font-size:13px}
  .hang-nut button,
  .hang-nut a.nut{flex:1 1 auto}
  input[type=text],input[type=password],input[type=number],select,textarea{
    font-size:16px}          /* 16px để iPhone không tự phóng to khi gõ */
  #khung-tk .the{padding:22px 18px 18px}
}

/* ======================================================= điện thoại nhỏ ======== */
@media(max-width:340px){
  .dem{grid-template-columns:1fr}
}

/* ============================================================ bảng nhập mã ===== */
table.bang-nhap{table-layout:fixed}
table.bang-nhap td{padding:6px 6px;vertical-align:middle}
table.bang-nhap tbody tr:hover td{background:none}
table.bang-nhap td:first-child{width:auto}
table.bang-nhap input{padding:10px 12px;font:500 14px/1.4 var(--chu-so);width:100%}
table.bang-nhap input.luot{text-align:center;font-family:var(--chu-thuong)}
table.bang-nhap td.tien{color:var(--chu);font-weight:600;
                        font-variant-numeric:tabular-nums;white-space:nowrap}
table.bang-nhap tfoot th{color:var(--chu);font-size:13.5px;font-weight:700;
                         text-transform:none;letter-spacing:0;
                         border-top:1px dashed var(--vien);border-bottom:none;
                         padding-top:12px}
button.xoa-dong{background:none;border:1px solid var(--vien);color:var(--mo);
                border-radius:9px;width:32px;height:32px;padding:0;line-height:1;
                font-size:19px;cursor:pointer;transition:all .15s}
button.xoa-dong:hover{border-color:var(--do);color:var(--do);
                      background:color-mix(in srgb,var(--do) 10%,transparent)}

/* thanh tien do nho trong o bang */
.thanh.nho{border:none}
.thanh.nho i{box-shadow:none}

/* the hep, can giua — dung cho man dang nhap / dang ky */
.the.hep{max-width:440px;margin-left:auto;margin-right:auto}

/* ===================================================== các bộ màu chọn được ===
   Đổi ở trang quản trị → tab Giao diện. Mặc định là "toi". */

/* than — đen sâu */
html[data-mau="than"]{
  --nen:#07090c; --the:#0f1318; --vien:#1e242c; --chu:#e6edf3; --mo:#94a2b0;
}
/* xanh đêm */
html[data-mau="xanhdem"]{
  --nen:#0b1a2b; --the:#12283f; --vien:#1e3a57; --chu:#e8f1fa; --mo:#8fa9c2;
  --lam:#2f81f7;
}
/* tím đêm */
html[data-mau="timdem"]{
  --nen:#140f22; --the:#1e1733; --vien:#2f2550; --chu:#ece7fa; --mo:#a294c4;
  --lam:#7c5cff;
}
/* rừng — xanh lá đậm */
html[data-mau="rung"]{
  --nen:#0a1712; --the:#11241c; --vien:#1d3a2c; --chu:#e6f3ec; --mo:#8fb3a1;
  --lam:#2ea043;
}
/* ngọc — xanh ngọc sâu */
html[data-mau="ngoc"]{
  --nen:#07171a; --the:#0e262b; --vien:#1b3d44; --chu:#e2f2f3; --mo:#8fb4b9;
  --xanh:#2bb673; --lam:#14b8a6;
}
/* hổ phách — nâu cam ấm */
html[data-mau="cam"]{
  --nen:#161009; --the:#231a10; --vien:#3b2c1a; --chu:#f4ebdc; --mo:#b8a285;
  --xanh:#4aa864; --vang:#e0a13a; --lam:#e08a2e;
}
/* hồng đào */
html[data-mau="hong"]{
  --nen:#170f13; --the:#221720; --vien:#3a2632; --chu:#f8ecf2; --mo:#c09fae;
  --xanh:#43b875; --vang:#e3a640; --do:#ee5d6c; --lam:#e8579a;
}
/* khói — xám trung tính, không ngả xanh */
html[data-mau="khoi"]{
  --nen:#141414; --the:#1e1e1e; --vien:#323232; --chu:#ededed; --mo:#9e9e9e;
  --lam:#3b82f6;
}
/* kem — nền giấy ấm, chữ đen */
html[data-mau="kem"]{
  --nen:#f3efe7; --the:#fffdf7; --vien:#e2dacb; --chu:#2b2621; --mo:#6d6355;
  --xanh:#15803d; --vang:#92660a; --do:#b91c1c; --lam:#0f766e;
}
/* sáng — nền trắng, chữ đen */
html[data-mau="sang"]{
  --nen:#eef1f5; --the:#ffffff; --vien:#d7dee7; --chu:#1b2430; --mo:#5c6b7e;
  --xanh:#1a7f37; --vang:#9a6700; --do:#cf222e; --lam:#0969da;
}
/* Bo mau nen sang ("sang", "kem"): o nhap nen trang cho noi len khoi nen giay */
html[data-sang] input,
html[data-sang] select,
html[data-sang] textarea{background-color:var(--the)}
html[data-sang] pre.log{background:var(--nen);color:var(--chu)}

/* ================================================ trang khách: tối ưu điện thoại ===
   bảng .bang-the: máy tính vẫn là bảng; điện thoại mỗi dòng thành một thẻ gọn */
tr.bam-duoc{cursor:pointer}
@media(max-width:700px){
  /* --- đầu trang: không dính trên đầu (chiếm nhiều chỗ), nút xếp lưới thấy hết --- */
  .trang-thai{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
              overflow:visible;width:100%;margin-left:0}
  .trang-thai button.nut{width:100%;padding:9px 4px;font-size:13px;
                     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trang-thai .cham{display:none}
  .trang-thai #chu-trang-thai{grid-column:1/-1;font-size:12px}

  /* --- ô đếm tiến độ: 3 cột cho gọn --- */
  .dem.dem-5{grid-template-columns:repeat(3,1fr);gap:8px}
  .dem.dem-5 div{padding:9px 10px}

  /* --- bảng thành thẻ --- */
  .bang-cuon:has(table.bang-the){overflow:visible}
  table.bang-the,table.bang-the tbody,table.bang-the tr,table.bang-the td{display:block}
  table.bang-the thead{display:none}
  table.bang-the tr{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
                    border:1px solid var(--vien);padding:12px 13px;
                    margin-bottom:9px;background:var(--mo-nhe)}
  table.bang-the td{border:none;padding:0;white-space:normal;min-width:0}
  table.bang-the td[colspan]{flex:1 1 100%;text-align:center}
  table.bang-the td[data-nhan]{font-size:12.5px}
  table.bang-the td[data-nhan]::before{content:attr(data-nhan) ": ";color:var(--mo)}

  /* thẻ một mã: "#12  MÃ ......  [Xong]" / tiến độ / thời gian · chép link */
  #than-bang td.o-stt{color:var(--mo);font-size:12px;min-width:22px}
  #than-bang td.o-ma{font-size:13.5px}
  #than-bang td.o-tt{text-align:right}
  #than-bang td.o-buoc{flex:1 1 100%;min-width:0;font-size:12.5px}
  #than-bang td.o-buoc .thanh.nho{max-width:none}
  #than-bang tr.dong-loi{border-color:color-mix(in srgb,var(--do) 55%,var(--vien))}
  #than-bang tr.dong-dang_chay{border-color:color-mix(in srgb,var(--vang) 55%,var(--vien))}

  /* thẻ một đơn: mã + trạng thái ở trên, các số ở dưới */
  #bang-don-khach td.o-ma,#bang-lich-su td.o-ma{flex:1 1 auto;font-size:14px}
  #bang-don-khach td.o-tt,#bang-lich-su td.o-tt{margin-left:auto;order:1}
  #bang-don-khach td.o-sk,#bang-lich-su td.o-sk{order:2;flex:1 1 100%;font-weight:600}
  #bang-don-khach td[data-nhan]:not(.o-sk),
  #bang-lich-su td[data-nhan]:not(.o-sk){order:3}

  /* thẻ ví: việc + số tiền ở trên, thời điểm / số dư, ghi chú */
  #bang-nap td.o-viec,#bang-vi td.o-viec{flex:1 1 55%;font-weight:600}
  #bang-nap td.o-tien,#bang-vi td.o-tien{margin-left:auto;font-weight:700}
  #bang-nap td[data-nhan],#bang-vi td[data-nhan]{flex:1 1 40%}
  #bang-nap td.o-ghi,#bang-vi td.o-ghi{flex:1 1 100%;min-width:0;color:var(--mo);
                                       font-size:12px}
}

/* ===================== trang tiến độ đơn: form đặt đơn bên trái, tiến độ bên phải ===
   màn rộng: 2 cột. Màn hẹp: bỏ khung 2 cột (display:contents) rồi xếp lại bằng
   order — form nằm ngay dưới Danh sách mã, trên Đơn khác của bạn. */
@media(min-width:1000px){
  .hai-cot{display:grid;align-items:start}
  /* cot trai hep: thu cot so luot / thanh tien cho o ma rong ra */
  .cot-trai table.bang-nhap thead th:nth-child(3){width:72px!important}
  .cot-trai table.bang-nhap thead th:nth-child(4){width:92px!important}
  .cot-trai table.bang-nhap thead th:nth-child(5){width:42px!important}
}
@media(max-width:999px){
  #khung-don,#khung-chu{display:flex;flex-direction:column}
  .hai-cot,.cot-trai,.cot-phai{display:contents}
  #the-thong-bao{order:-2}
  #cho-dat-don,#cho-dat-chu{order:-1}
  #the-tong-quan{order:0}
  #the-ma-gan-day{order:1}
  #the-lich-su,#khung-don .cot-phai>.hang-nut{order:2}
}

/* ma don nho canh chu "Tien do" (da bo khung thong tin don) */
h2 .ma-don{color:var(--mo);font:500 12.5px var(--chu-so);margin-left:6px;
           padding:2px 8px;border-radius:6px;background:var(--mo-nhe);
           vertical-align:2px}
h2 .ma-don:empty{display:none}
@media(min-width:701px){
  .dem.dem-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* chuyen dong nhe khi doi man (chi chay luc khung vua hien ra) */
@media(prefers-reduced-motion:no-preference){
  main>div:not(.an){animation:hien-len .35s ease both}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ====================================================== chữ: v22 (2026-10-11) =====
   Tieu de co o bieu tuong mau chu dao, so lieu dam va lon, phan tram co dai mau.
   Bieu tuong: SVG net (kieu Lucide) dat lam mask -> to bang var(--lam), tu doi mau
   theo bo mau. Them tieu de moi thi gan class i-<ten> co san ben duoi. */
.the h2{font-size:18px;font-weight:700;letter-spacing:-.025em;line-height:1.3;
        margin-bottom:6px}
.the h2[class*="i-"]{position:relative;padding-left:44px;min-height:32px;
                     display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.the h2[class*="i-"]::before{content:"";position:absolute;left:0;
  width:32px;height:32px;margin-top:-16px;border-radius:10px}
.the h2[class*="i-"]::after{content:"";position:absolute;left:8px;
  width:16px;height:16px;margin-top:-8px;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.the p.chu-thich{font-size:14px;line-height:1.65;max-width:68ch}
.the h2.i-may{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/svg%3E")}
.the h2.i-dat{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.the h2.i-dang-nhap{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.the h2.i-dang-ky{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M19 8v6M16 11h6'/%3E%3C/svg%3E")}
.the h2.i-vi{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E")}
.the h2.i-nap{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2l9 5H3z'/%3E%3C/svg%3E")}
.the h2.i-vao{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12l4 4 4-4'/%3E%3C/svg%3E")}
.the h2.i-so{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 3-2 3 2 3-2 1 1V2l-1 1-3-2-3 2-3-2-3 2-3-2z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")}
.the h2.i-tim{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
.the h2.i-tien-do{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E")}
.the h2.i-ds{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.the h2.i-gio{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
.the h2.i-ma{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E")}

/* dau trang: ten trang dam, ten su kien thanh nhan mau */
h1{font-size:18px;font-weight:800;letter-spacing:-.03em}

/* so lieu */
.dem b{letter-spacing:-.04em}
.dem div{font-size:12.5px;font-weight:600;letter-spacing:.01em}
.phan-tram{font-size:14px}
.phan-tram>span>b{font-size:16px}
.phan-tram>b{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--xanh) 65%,#fff),var(--xanh));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* nhan o nhap, cot bang, ghi chu */
label{font-size:11px;letter-spacing:.1em}
.ghi-chu{font-size:13.5px;line-height:1.6}
th{font-size:10.5px;letter-spacing:.1em}
td.tk{font-weight:600}
.bao{line-height:1.6}
.bao b{font-weight:700}

/* man dang nhap: tieu de lon hon */
#khung-tk .the h2{font-size:24px}
#khung-tk .the h2[class*="i-"]{padding-left:50px;min-height:38px}
#khung-tk .the h2[class*="i-"]::before{width:38px;height:38px;margin-top:-19px;
                                       border-radius:12px}
#khung-tk .the h2[class*="i-"]::after{left:10px;width:18px;height:18px;margin-top:-9px}
#khung-tk .the h2 + p.chu-thich{margin-left:0;margin-top:10px}

@media(max-width:700px){
  .the h2{font-size:16.5px}
  .the h2[class*="i-"]{padding-left:40px;min-height:30px}
  .the h2[class*="i-"]::before{width:30px;height:30px;margin-top:-15px;border-radius:9px}
  .the h2[class*="i-"]::after{left:7px}
  .the p.chu-thich{font-size:13.5px}
  h1{font-size:16.5px}
  .dem.dem-5 b{font-size:20px}
  .phan-tram>b{font-size:26px}
  #khung-tk .the h2{font-size:21px}
}

/* nut Zalo trong menu Ho tro dau trang */
a.nut.lh-zalo{background:#0068ff;
  background:linear-gradient(180deg,#2b82ff,#0068ff);
  box-shadow:0 6px 16px -6px rgba(0,104,255,.6),inset 0 1px 0 rgba(255,255,255,.22)}
@media(max-width:700px){
  .trang-thai #chu-trang-thai{order:10}
}

/* hang nut dau trang gon lai cho vua mot hang tren man 1366 */
@media(min-width:701px){
  .trang-thai{justify-content:flex-end}
  .trang-thai button.nut{padding:6px 12px;font-size:13px}
}

/* trang quan tri: trai het be ngang man hinh (main dung sau thanh tab nav).
   Man dang nhap quan tri (#khung-dn) khong co nav dung truoc nen van hep o giua. */
nav ~ main{max-width:none;padding:24px 28px}
nav{padding-left:28px;padding-right:28px}
@media(max-width:700px){
  nav ~ main{padding:14px 12px}
  nav{padding-left:12px;padding-right:12px}
}

/* dien thoai, chua dang nhap: bo 2 nut Dang nhap / Tao tai khoan o dau trang —
   man dang nhap ngay ben duoi da co du ca hai */
@media(max-width:700px){
  body.chua-dn #nut-tk,body.chua-dn #nut-tao-tk{display:none}
}

/* ================================= menu Ho tro (gom nut Zalo / Goi cua admin) ===
   <details> nen khong can JS de mo/dong; khach.js chi dong lai khi bam ra ngoai */
.ho-tro{position:relative}
.ho-tro>summary{list-style:none;cursor:pointer;user-select:none;justify-content:center;
  color:var(--chu);background:var(--mo-nhe);border:1px solid var(--vien);
  border-radius:var(--bo-nho);padding:6px 12px;font:600 13px/1.35 var(--chu-thuong);
  transition:border-color .15s}
.ho-tro>summary:hover{border-color:color-mix(in srgb,var(--lam) 55%,var(--vien))}
.ho-tro>summary::after{display:inline-block}
.ho-tro>summary::-webkit-details-marker{display:none}
.ho-tro>summary::after{content:"";width:6px;height:6px;margin-left:8px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.ho-tro[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.ho-tro[open]>summary{border-color:var(--lam)}
.menu-ho-tro{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:220px;
  display:flex;flex-direction:column;gap:6px;padding:8px;
  background:var(--the);border:1px solid var(--vien);border-radius:12px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
.menu-ho-tro a.nut{width:100%;justify-content:flex-start;padding:10px 14px!important;
  font-size:14px!important}
/* nut Trang chu khi dang o trang chu */
#nut-ve-chu.dang-o{border-color:var(--lam);color:var(--lam)}
@media(max-width:700px){
  .ho-tro>summary{width:100%;padding:9px 4px;font-size:13px}
  .menu-ho-tro{left:auto;right:0;min-width:200px}
  /* dau trang khong con sticky tren dien thoai -> phai tu nang lop, khong thi menu
     bi cac the ben duoi (co animation) de len */
  header{position:relative;z-index:10}
}

/* hang cho gop trong khung Tien do */
.hang-doi-gon{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:end;
  margin:14px 0 4px;padding:13px 15px;border-radius:12px;
  background:color-mix(in srgb,var(--lam) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--lam) 28%,var(--vien))}
.hd-nhan-nho{display:block;font-size:11px;font-weight:600;color:var(--mo);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.hd-o b{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--chu);
  font-variant-numeric:tabular-nums}
.hd-o span#hd-nhan{font-size:13.5px;font-weight:600;color:var(--mo)}
.hd-phai{text-align:right}
.hd-chu{grid-column:1/-1;font-size:12.5px;color:var(--mo);margin-top:4px}
@media(max-width:700px){
  .hang-doi-gon{padding:11px 12px}
  .hd-o b{font-size:21px}
}

/* ============================================ tối ưu không gian (v32, 2026-10-11) ===
   Màn rộng: cột trái (form + đơn khác) dính theo khi cuộn, tự cuộn bên trong nếu dài;
   bảng mã thấp dòng hơn; nút làm mới lên góc khung Tiến độ. */
.the:has(>.nut-goc){position:relative}
.nut-goc{display:flex;gap:6px;position:absolute;top:18px;right:20px}
.nut-goc .nut{padding:6px 12px;font-size:12.5px}
@media(min-width:1000px){
  main:has(#khung-don:not(.an)){max-width:1560px;padding-top:18px}
  .hai-cot{grid-template-columns:minmax(360px,420px) minmax(0,1fr);gap:16px}
  .cot-trai{position:sticky;top:74px;max-height:calc(100vh - 90px);overflow-y:auto;
            overscroll-behavior:contain}
  .hai-cot .the{margin-bottom:14px;padding:18px 20px}
  /* don khac o cot trai: the gon thay cho bang 7 cot */
  .cot-trai table.bang-the,.cot-trai table.bang-the tbody,
  .cot-trai table.bang-the tr,.cot-trai table.bang-the td{display:block}
  .cot-trai table.bang-the thead{display:none}
  .cot-trai .bang-cuon{overflow:visible}
  .cot-trai table.bang-the tr{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;
    border:1px solid var(--vien);border-radius:10px;padding:10px 12px;margin-bottom:8px;
    background:var(--mo-nhe)}
  .cot-trai table.bang-the tr:hover{border-color:color-mix(in srgb,var(--lam) 50%,var(--vien))}
  .cot-trai table.bang-the td{border:none;padding:0;white-space:normal;font-size:12.5px}
  .cot-trai table.bang-the tbody tr:hover td{background:none}
  .cot-trai table.bang-the td[data-nhan]::before{content:attr(data-nhan) ": ";color:var(--mo)}
  .cot-trai #bang-lich-su td.o-ma{flex:1 1 auto;font-size:13.5px}
  .cot-trai #bang-lich-su td.o-tt{order:1;margin-left:auto}
  .cot-trai #bang-lich-su td.o-sk{order:2;flex:1 1 100%;font-weight:600}
  .cot-trai #bang-lich-su td.o-sk::before{content:none}
  .cot-trai #bang-lich-su td[data-nhan]:not(.o-sk){order:3}
  /* bang ma: dong thap hon */
  #than-bang td{padding-top:7px;padding-bottom:7px}
  /* o dem gon hon */
  .dem.dem-5 div{padding:10px 13px}
  .dem.dem-5 b{font-size:24px}
}
@media(max-width:999px){
  .nut-goc{position:static;margin:2px 0 10px}
}
@media(max-width:700px){
  .nut-goc .nut{flex:1 1 0}
}
/* dien thoai: the ma con 1 hang (so · ma · trang thai · chep link); ma dang chay/loi
   them 1 hang tien do ben duoi */
@media(max-width:700px){
  #than-bang tr{padding:9px 11px;margin-bottom:7px;gap:4px 8px}
  #than-bang td.o-ma{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;
                     white-space:nowrap;word-break:normal}
  #than-bang td.o-tt{margin-left:0}
  #than-bang td.o-link{margin-left:0;order:0}
  #than-bang td.o-link .nut{padding:4px 9px!important}
  #than-bang td.o-buoc{order:5}
  #than-bang tr.dong-cho td.o-buoc{display:none}       /* "Chưa tới lượt" da co nhan Chờ */
}

/* ============================================================= khung v35 (2026-10-11) ===
   The: bo 16px, bong nhieu lop mem, vien sang mep tren, dai mau manh dau the,
   tieu de tach bang duong ke. Moi mau phu tinh tu bien bo mau nen 11 bo mau an theo. */
.the{position:relative;border-radius:16px;
  border-color:color-mix(in srgb,var(--vien) 85%,var(--chu) 6%);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--lam) 4%,transparent),transparent 120px),
    var(--the);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent),
    0 1px 2px rgba(0,0,0,.06),
    0 8px 24px -10px rgba(0,0,0,.28),
    0 24px 48px -28px rgba(0,0,0,.22);
  transition:box-shadow .2s,border-color .2s}
html[data-sang] .the{
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(30,30,50,.05),
             0 8px 24px -12px rgba(30,30,50,.14),0 24px 48px -30px rgba(30,30,50,.12)}
/* dai mau manh o dau the */
.the::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;
  border-radius:0 0 3px 3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--lam) 70%,transparent) 20%,
    color-mix(in srgb,var(--lam) 70%,transparent) 80%,transparent)}
/* tieu de tach khoi noi dung */
.the>h2[class*="i-"]{padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--vien) 70%,transparent)}
.the>h2[class*="i-"]::before{top:calc(50% - 6px)}
.the>h2[class*="i-"]::after{top:calc(50% - 6px)}
.the>h2[class*="i-"]+p.chu-thich{margin:0 0 14px;margin-left:0}
/* the dat don: viec chinh cua khach -> anh mau ro hon */
#the-dat-don{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--lam) 9%,transparent),transparent 220px),
    var(--the);
  border-color:color-mix(in srgb,var(--lam) 28%,var(--vien))}
#the-dat-don::before{left:0;right:0;height:3px;border-radius:16px 16px 0 0;top:-1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--lam) 55%,#fff),var(--lam))}
/* o dem: vach mau canh trai theo trang thai, re chuot nhich len */
.dem div{position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.dem div::before{content:"";position:absolute;background:color-mix(in srgb,var(--mo) 45%,transparent)}
.dem div.dangchay::before{background:var(--vang)}
.dem div.xong::before{background:var(--xanh)}
.dem div.loi::before{background:var(--do)}
.dem div:hover{transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
/* the con (the ma tren dien thoai, don khac o cot trai): bo deu, vien mem */
table.bang-the tr{border-radius:12px}
/* the dang nhap: dai mau day hon cho ro la cua so chinh */
#khung-tk .the::before{left:0;right:0;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--lam) 55%,#fff),var(--lam))}
#khung-tk .the>h2[class*="i-"]{border-bottom:none;padding-bottom:0}
@media(max-width:700px){
  .the{border-radius:14px}
  .the::before{left:14px;right:14px}
  .the>h2[class*="i-"]{padding-bottom:10px;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.dem div:hover{transform:none}}
/* cot trai dinh: chua le cho bong + dai mau khong bi cat, thanh cuon chi hien khi re chuot */
@media(min-width:1000px){
  .cot-trai{padding:4px 12px 28px 6px;margin:-4px -12px -28px -6px;
            scrollbar-width:none}
  .cot-trai::-webkit-scrollbar{width:0}
  .cot-trai:hover{scrollbar-width:thin}
  .cot-trai:hover::-webkit-scrollbar{width:6px}
  .cot-trai::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--mo) 40%,transparent);
                                     border-radius:6px}
}

/* ======================================================= diem giup khach (v36) === */
.o-diem{margin:12px 0 4px;padding:13px 15px;border-radius:12px;
  background:color-mix(in srgb,var(--xanh) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--xanh) 26%,var(--vien))}
.od-tren{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  flex-wrap:wrap}
.od-tren b{font-size:24px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.od-tren-chu{font-size:13.5px;font-weight:600;color:var(--mo)}
.od-tt{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.od-tt:empty{display:none}
.od-tt.vang{color:var(--vang);background:color-mix(in srgb,var(--vang) 14%,transparent)}
.od-tt.lam{color:var(--lam);background:color-mix(in srgb,var(--lam) 14%,transparent)}
.od-tt.xanh{color:var(--xanh);background:color-mix(in srgb,var(--xanh) 14%,transparent)}
.thanh.nho.od-thanh{max-width:none;height:7px;margin:8px 0 6px}
.od-chu{font-size:12.5px;color:var(--mo)}
.od-ct{margin-top:8px}
.od-ct>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--lam);
  list-style:none;user-select:none}
.od-ct>summary::-webkit-details-marker{display:none}
.od-ct>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.od-ct[open]>summary::before{transform:rotate(90deg)}
.od-ds{margin-top:8px;max-height:260px;overflow:auto;display:grid;gap:4px}
.od-dong{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;
  align-items:center;padding:6px 10px;border-radius:8px;font-size:12.5px;
  background:var(--mo-nhe)}
.od-dong .tk{font:600 12.5px var(--chu-so);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.od-luot{color:var(--mo)}
.od-so{font-variant-numeric:tabular-nums}
.od-nhan{font-size:11.5px;font-weight:600;color:var(--mo);min-width:92px;text-align:right}
.od-dong.du .od-nhan{color:var(--xanh)}
.od-dong.thieu{background:color-mix(in srgb,var(--vang) 10%,transparent)}
.od-dong.thieu .od-nhan{color:var(--vang)}
.od-dong.dang_bu .od-nhan{color:var(--lam)}
.diem-luot{font-size:11.5px;font-weight:700;color:var(--xanh);
  padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--xanh) 12%,transparent)}
.diem-luot.thieu{color:var(--vang);background:color-mix(in srgb,var(--vang) 14%,transparent)}
.nhan-bu{font:700 10.5px var(--chu-thuong);color:var(--lam);padding:1px 6px;
  border-radius:6px;margin-left:4px;vertical-align:1px;
  background:color-mix(in srgb,var(--lam) 14%,transparent)}
@media(max-width:700px){
  .od-dong{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .od-luot{grid-column:1}
  .od-nhan{text-align:right;min-width:0}
}

/* ================================================================ thương hiệu ===
   v39 (2026-10-12): logo tia chớp trong ô bo tròn có ánh sáng, tên trang 2 dòng
   (tên + dòng phụ), "Reg68" tô gradient, nhãn sự kiện có chấm nhấp nháy.
   Mọi màu lấy từ --lam nên đổi bộ màu là logo đổi theo. */
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--lam) 75%,transparent) 30%,
    color-mix(in srgb,var(--lam) 35%,transparent) 70%,transparent)}
h1{gap:12px;line-height:1.15;user-select:none}
h1 .logo{position:relative;width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;color:#fff;
  background:var(--lam);
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.45),transparent 55%),
    linear-gradient(140deg,color-mix(in srgb,var(--lam) 55%,#fff) 0%,var(--lam) 48%,
                    color-mix(in srgb,var(--lam) 60%,#000) 100%);
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--lam) 75%,transparent),
             0 0 0 1px color-mix(in srgb,var(--lam) 60%,#000) ,
             inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.12);
  transition:transform .25s ease}
h1 .logo svg{width:23px;height:23px;fill:#fff;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* vệt sáng lướt qua logo mỗi vài giây */
h1 .logo::after{content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-70%);animation:loe 5s ease-in-out infinite}
@keyframes loe{0%,70%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
#ten-trang:hover .logo{transform:rotate(-6deg) scale(1.06)}
h1 .ten-web{display:flex;flex-direction:column;gap:3px;min-width:0}
h1 .ten-chinh{font-size:18.5px;font-weight:800;letter-spacing:-.035em;color:var(--chu);
  white-space:nowrap}
h1 .ten-chinh em{font-style:normal;color:var(--lam);
  background:linear-gradient(100deg,var(--lam),color-mix(in srgb,var(--lam) 55%,#6366f1));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1 small{font-size:11px;font-weight:600;color:var(--mo);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
/* nhãn tên sự kiện */
h1 .nhan-sk{display:inline-flex;align-items:center;gap:7px;align-self:center;
  padding:5px 12px 5px 10px;border-radius:99px;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;color:var(--lam);
  background:linear-gradient(180deg,color-mix(in srgb,var(--lam) 16%,transparent),
                                    color-mix(in srgb,var(--lam) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--lam) 35%,transparent);
  box-shadow:0 2px 8px -3px color-mix(in srgb,var(--lam) 45%,transparent)}
h1 .nhan-sk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lam);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lam) 25%,transparent);
  animation:nhip-sk 1.8s ease-in-out infinite}
@keyframes nhip-sk{50%{box-shadow:0 0 0 6px transparent}}
h1 .nhan-sk:empty{display:none}
@media(max-width:700px){
  h1{gap:10px;flex-wrap:nowrap}
  h1 .logo{width:36px;height:36px;border-radius:11px}
  h1 .logo svg{width:20px;height:20px}
  h1 .ten-web{flex:1 1 auto}
  h1 .ten-chinh{font-size:16px}
  h1 small{font-size:9.5px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
  h1 .nhan-sk{flex:0 0 auto;font-size:11.5px;padding:4px 9px 4px 8px;gap:6px}
}
@media(max-width:480px){ h1 small{display:none} }  /* dien thoai: dong phu bi cat cut, an luon */
@media(prefers-reduced-motion:reduce){
  h1 .logo::after,h1 .nhan-sk::before{animation:none}
}

/* ============================================================ thanh nút đầu trang ===
   v40 (2026-10-12): mỗi nút có biểu tượng (SVG làm mask, tô bằng currentColor nên
   JS đổi chữ bằng textContent không mất icon). Máy tính: nút phụ trong suốt kiểu
   thanh điều hướng, Ví thành chip màu, trạng thái tool thành viên thuốc. */
header{background:
  linear-gradient(90deg,color-mix(in srgb,var(--lam) 9%,color-mix(in srgb,var(--the) 84%,transparent)),
                  color-mix(in srgb,var(--the) 84%,transparent) 55%)}
@supports not (background:color-mix(in srgb,red 1%,blue)){header{background:var(--the)}}

.trang-thai .nut::before,.ho-tro>summary::before{content:"";width:16px;height:16px;
  flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#nut-ve-chu{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
#nut-vi{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E")}
#nut-nap-tien{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
#nut-lich-su{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 12h6M9 16h4'/%3E%3C/svg%3E")}
.ho-tro>summary{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
  display:inline-flex;align-items:center;gap:6px}
#nut-tk{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E")}
/* đã đăng nhập (nút Ví đang hiện) -> nút tài khoản là Thoát */
body:has(#nut-vi:not(.an)) #nut-tk{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
#nut-tao-tk{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E")}
/* ví: chip màu chủ đạo, số tiền đậm */
.trang-thai #nut-vi{color:var(--lam);font-weight:700;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--lam) 10%,transparent);
  border-color:color-mix(in srgb,var(--lam) 32%,transparent)}
.trang-thai #nut-vi:hover{background:color-mix(in srgb,var(--lam) 16%,transparent)}

@media(min-width:701px){
  .trang-thai{gap:4px}
  /* nút phụ trong suốt, sáng lên khi rê chuột */
  .trang-thai button.nut.phu:not(#nut-vi),.trang-thai .ho-tro>summary{
    background:transparent;border-color:transparent;color:var(--mo);font-weight:600}
  .trang-thai button.nut.phu:not(#nut-vi):hover,.trang-thai .ho-tro>summary:hover,
  .trang-thai .ho-tro[open]>summary{background:var(--mo-nhe);color:var(--chu);
    border-color:var(--vien);transform:none}
  #nut-ve-chu.dang-o{color:var(--lam)!important;
    background:color-mix(in srgb,var(--lam) 10%,transparent)!important;
    border-color:transparent!important}
  .trang-thai #nut-vi{margin:0 4px}
  .trang-thai #nut-nap-tien{margin-right:6px}
  /* trạng thái tool: viên thuốc, chấm nằm bên trong */
  .trang-thai #cham{position:relative;z-index:1;margin:0 -22px 0 10px}
  .trang-thai #chu-trang-thai{padding:5px 12px 5px 26px;border-radius:99px;
    font-size:12.5px;font-weight:600;white-space:nowrap;
    background:var(--mo-nhe);border:1px solid var(--vien)}
  .trang-thai #cham.on+#chu-trang-thai{color:var(--xanh);
    background:color-mix(in srgb,var(--xanh) 9%,transparent);
    border-color:color-mix(in srgb,var(--xanh) 28%,transparent)}
}
@media(max-width:700px){
  .trang-thai .nut::before,.ho-tro>summary::before{width:15px;height:15px}
  .trang-thai button.nut,.ho-tro>summary{gap:5px}
}
/* màn vừa (701–1439px) không đủ 1 hàng: chia 2 hàng có chủ đích —
   hàng 1 logo + trạng thái tool, hàng 2 thanh điều hướng (ví/nạp/thoát dạt phải) */
@media(min-width:701px) and (max-width:1439px){
  header{column-gap:4px;row-gap:10px;padding-bottom:10px}
  header::before{content:"";order:1;flex-basis:100%;height:0}
  .trang-thai{display:contents}
  .trang-thai #cham{order:0;margin-left:auto}
  .trang-thai #chu-trang-thai{order:0}
  #nut-ve-chu{order:2} #nut-lich-su{order:3} #ho-tro{order:4}
  .trang-thai #nut-vi{order:5;margin-left:auto} #nut-nap-tien{order:6}
  #nut-tk{order:7} #nut-tao-tk{order:8}
  /* chưa đăng nhập: Đăng nhập / Tạo tài khoản dạt phải */
  body:has(#nut-vi.an) #nut-tk{margin-left:auto}
}
@media(min-width:701px) and (max-width:959px){
  header{padding-left:16px;padding-right:16px}
  .trang-thai button.nut,.trang-thai .ho-tro>summary{padding:7px 9px;font-size:13px;gap:5px}
  .trang-thai #nut-vi{margin:0 2px 0 auto}
  .trang-thai #nut-nap-tien{margin-right:2px}
}

/* ===================================================================== v43 thân trang ===
   (2026-10-12) nền có lưới chấm mờ + quầng màu, biểu tượng khung là ô màu đặc như logo,
   thanh tiến độ sọc chạy, ô số liệu có chấm trạng thái, nút chính có vệt sáng. */

/* biểu tượng tiêu đề khung: ô gradient đặc, icon trắng */
.the h2[class*="i-"]::before{
  background:linear-gradient(140deg,color-mix(in srgb,var(--lam) 60%,#fff),var(--lam) 55%,
                             color-mix(in srgb,var(--lam) 70%,#000));
  border:none;
  box-shadow:0 6px 14px -5px color-mix(in srgb,var(--lam) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.4)}
.the h2[class*="i-"]::after{background:#fff}

/* khung hiện lên nhẹ khi mở trang */
@keyframes hien-len{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main .the{animation:hien-len .45s cubic-bezier(.2,.8,.2,1) both}
main .the:nth-of-type(2){animation-delay:.06s}
main .the:nth-of-type(3){animation-delay:.12s}

/* thanh tiến độ: dày hơn, rãnh lõm, phần chạy có sọc trôi */
.thanh{height:14px;padding:2px;background:color-mix(in srgb,var(--chu) 6%,transparent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.thanh i{position:relative;overflow:hidden}
/* sọc trượt bằng transform (lớp rộng hơn thanh 1 chu kỳ sọc 22.6px) — không vẽ lại */
.thanh i::after{content:"";position:absolute;inset:0 auto 0 -23px;width:calc(100% + 23px);
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 8px,transparent 8px 16px);
  animation:soc-troi 1s linear infinite;will-change:transform}
@keyframes soc-troi{to{transform:translateX(22.6px)}}

/* ô số liệu: bỏ vạch trái, thay chấm trạng thái góc phải + nền gradient nhẹ */
.dem div{border-radius:14px;padding:14px 16px 13px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--chu) 4%,transparent),transparent 70%),
             var(--mo-nhe)}
.dem div::before{left:auto;right:12px;top:14px;bottom:auto;width:8px;height:8px;
  border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--mo) 15%,transparent)}
.dem div.dangchay::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--vang) 22%,transparent);
  animation:nhip-o 1.6s ease-in-out infinite}
.dem div.xong::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--xanh) 22%,transparent)}
.dem div.loi::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--do) 22%,transparent)}
@keyframes nhip-o{50%{box-shadow:0 0 0 6px transparent}}
.dem div.xong{background:linear-gradient(160deg,color-mix(in srgb,var(--xanh) 14%,transparent),
  color-mix(in srgb,var(--xanh) 5%,transparent))}
.dem div.loi{background:linear-gradient(160deg,color-mix(in srgb,var(--do) 14%,transparent),
  color-mix(in srgb,var(--do) 5%,transparent))}
.dem div.dangchay{background:linear-gradient(160deg,color-mix(in srgb,var(--vang) 14%,transparent),
  color-mix(in srgb,var(--vang) 5%,transparent))}
.dem b{font-size:28px;font-weight:800}

/* nút chính: vệt sáng lướt qua khi rê chuột */
button.nut:not(.phu),a.nut:not(.phu){position:relative;overflow:hidden}
button.nut:not(.phu)::after,a.nut:not(.phu)::after{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .6s ease}
button.nut:not(.phu):hover::after,a.nut:not(.phu):hover::after{transform:translateX(120%)}
#nut-dat{padding:12px 30px;font-size:15px;border-radius:12px;
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--lam) 80%,transparent),
             inset 0 1px 0 rgba(255,255,255,.25)}

/* ô nhập: nền sáng hơn nền trang một chút, viền mềm, focus có quầng */
input[type=text],input[type=password],input[type=number],select,textarea{
  transition:border-color .15s,box-shadow .15s,background-color .15s}
input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,select:hover,textarea:hover{
  border-color:color-mix(in srgb,var(--lam) 35%,var(--vien))}

@media(max-width:700px){
  .dem b{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
  main .the,.thanh i::after,.dem div.dangchay::before{animation:none}
  button.nut::after,a.nut::after{display:none}
}
@media(min-width:701px) and (max-width:839px){
  header{column-gap:2px}
  .trang-thai button.nut,.trang-thai .ho-tro>summary{padding:7px 7px;font-size:12.5px;gap:4px}
  .trang-thai .nut::before,.ho-tro>summary::before{width:14px;height:14px}
  .ho-tro>summary::after{margin-left:5px}
}

/* ================================================================ v45 hiệu năng ===
   (2026-10-12) Chỉ để hiệu ứng chạy bằng transform/opacity (card đồ họa tự lo, không vẽ
   lại trang mỗi khung hình):
   - nền trang (lưới chấm + quầng) dời sang lớp cố định body::before thay cho
     background-attachment:fixed (cái này bắt vẽ lại cả nền mỗi lần cuộn);
   - bỏ quầng "thở" của logo (animate box-shadow = vẽ lại mỗi khung);
   - sọc thanh tiến độ trượt bằng transform (xem khối v43). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--nen);
  background-image:
    radial-gradient(color-mix(in srgb,var(--chu) 7%,transparent) 1px,transparent 1.4px),
    radial-gradient(900px 520px at 0% -8%,color-mix(in srgb,var(--lam) 18%,transparent),transparent 70%),
    radial-gradient(760px 460px at 100% 0%,color-mix(in srgb,var(--lam) 11%,transparent),transparent 70%),
    radial-gradient(900px 600px at 50% 110%,color-mix(in srgb,var(--lam) 8%,transparent),transparent 70%);
  background-size:22px 22px,auto,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat}
@media(max-width:700px){body::before{background-size:18px 18px,auto,auto,auto}}
/* header dính chỉ trên màn rộng mới cần làm mờ nền phía sau; điện thoại header không dính */
@media(max-width:700px){header{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ============================================== cột Tiến độ bảng mã: thanh chạy % ===
   v47 (2026-10-12, họ yêu cầu): mọi trạng thái đều là thanh + số %, chữ bước nằm dưới. */
.td-tien{min-width:150px}
.td-hang{display:flex;align-items:center;gap:8px}
.td-tien .thanh.nho{flex:1 1 auto;max-width:none;height:8px;margin:0;padding:0;
  background:color-mix(in srgb,var(--chu) 8%,transparent);border:none}
.td-tien .thanh.nho i{background:var(--vang)}
.td-tien.xong .thanh.nho i{background:linear-gradient(90deg,color-mix(in srgb,var(--xanh) 65%,#fff),var(--xanh))}
.td-tien.loi .thanh.nho i{background:var(--do)}
.td-tien.chay .thanh.nho i{background:linear-gradient(90deg,color-mix(in srgb,var(--vang) 65%,#fff),var(--vang))}
/* sọc chạy chỉ ở lượt đang chạy; xong/lỗi/chờ đứng yên cho đỡ rối mắt */
.td-tien:not(.chay) .thanh i::after{display:none}
.td-pt{flex:0 0 auto;min-width:38px;text-align:right;font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--mo)}
.td-tien.xong .td-pt{color:var(--xanh)}
.td-tien.chay .td-pt{color:var(--vang)}
.td-tien.loi .td-pt{color:var(--do)}
.td-tien .diem-luot{margin-left:0;flex:0 0 auto}
.td-chu{margin-top:3px;font-size:12px;color:var(--mo);line-height:1.35}
.td-tien.xong .td-chu{color:var(--xanh);font-weight:600}
.td-tien.loi .td-chu{color:var(--do)}
#than-bang .td-tien .thanh.nho{margin:0}
.td-tien .diem-luot{text-align:center}
@media(max-width:700px){#than-bang .td-tien.xong .td-chu{display:none}}
/* lượt / đơn xong nhưng thiếu điểm (sự kiện tính điểm): thanh vàng, không sọc */
.td-tien.thieu .thanh.nho i{background:var(--vang)}
.td-tien.thieu .td-pt,.td-tien.thieu .td-chu{color:var(--vang)}
.td-tien .diem-luot{min-width:52px}
@media(max-width:700px){table.bang-nhap td.tien:empty{display:none}}

/* ================================================== v56 rà trang quản trị (2026-10-13) === */
/* nút Thoát trang quản trị: biểu tượng cửa ra (trước đó hiện ô vuông đặc vì thiếu --ic) */
#nut-thoat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
/* thanh tab quản trị: vẫn vuốt ngang được nhưng ẩn thanh cuộn xấu */
nav{overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{white-space:nowrap;flex:0 0 auto}
/* ghi chú liên hệ trên cùng menu Hỗ trợ */
.menu-ghi-chu{font-size:12.5px;color:var(--mo);line-height:1.45;padding:4px 6px 8px;
  border-bottom:1px solid var(--vien);margin-bottom:2px}
/* nút trong menu Hỗ trợ cũng nằm trong .trang-thai nên dính luật icon -> gán hình riêng
   (trước đó hiện ô vuông đặc) */
a.nut.lh-zalo{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E")}
a.nut.lh-fb{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E")}
a.nut.lh-goi{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
/* nút lạ không khai --ic thì không vẽ ô vuông */
.trang-thai .nut:not([id]):not(.lh-zalo):not(.lh-fb):not(.lh-goi)::before{display:none}
/* đầu trang quản trị trên điện thoại: logo trái, trạng thái + Thoát phải, cùng một hàng
   (luật lưới 3 cột của trang khách không hợp với chỉ 1 nút) */
@media(max-width:700px){
  header:has(#nut-thoat){flex-wrap:nowrap}
  header:has(#nut-thoat) h1{flex:1 1 auto;min-width:0}
  header:has(#nut-thoat) .trang-thai{display:flex;width:auto;margin-left:auto;gap:8px;flex-wrap:nowrap}
  header:has(#nut-thoat) .trang-thai button.nut{width:auto;padding:7px 10px}
  header:has(#nut-thoat) #chu-trang-thai{display:none}
}

/* ======================================================== v58 màn phụ của khách ===
   (2026-10-13) Đơn của tôi: ô thống kê + cột Tiến độ dạng thanh; Ví: thẻ số dư kiểu thẻ
   ngân hàng; Nạp tiền: nút Chép từng dòng, nội dung chuyển khoản nổi bật. */
/* dòng đơn đang xem: trước tô cứng #1c222a (vệt đen ở bộ màu sáng) */
tr.dang-xem td{background:color-mix(in srgb,var(--lam) 8%,transparent)}
#bang-don-khach td.o-kq,#bang-lich-su td.o-kq{min-width:170px}
@media(max-width:700px){
  table.bang-the td.o-kq{flex:1 1 100%}
  table.bang-the td.o-kq::before{display:none}
}

/* thẻ số dư */
.the-so-du{position:relative;overflow:hidden;border-radius:16px;padding:20px 22px 18px;
  color:#fff;max-width:440px;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.22),transparent 55%),
    linear-gradient(135deg,color-mix(in srgb,var(--lam) 70%,#fff) 0%,var(--lam) 45%,
                    color-mix(in srgb,var(--lam) 65%,#000) 100%);
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--lam) 75%,transparent),
             inset 0 1px 0 rgba(255,255,255,.35)}
/* hai vòng tròn mờ trang trí góc phải, như thẻ ngân hàng */
.the-so-du::before,.the-so-du::after{content:"";position:absolute;border-radius:50%;
  background:rgba(255,255,255,.10);pointer-events:none}
.the-so-du::before{width:180px;height:180px;right:-60px;top:-70px}
.the-so-du::after{width:120px;height:120px;right:40px;bottom:-70px}
.sd-nhan{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  opacity:.85}
.the-so-du b{display:block;font-weight:800;letter-spacing:-.04em;
  line-height:1.15;margin:4px 0 14px;font-variant-numeric:tabular-nums}
.sd-duoi{font-size:12.5px;opacity:.9;display:flex;align-items:center;gap:8px}
.sd-duoi code{background:rgba(255,255,255,.18);color:#fff;font-size:13px;padding:2px 8px}
#vi-so-du{font-size:36px}

/* nạp tiền: nút chép nhỏ cạnh từng dòng, nội dung CK là ô viền nét đứt nổi bật */
.nut-chep-nho{padding:3px 10px!important;font-size:12px!important;margin-left:8px;
  vertical-align:1px}
.o-nd{display:inline-block;font:700 17px var(--chu-so);letter-spacing:.04em;
  color:var(--lam);padding:4px 12px;border-radius:8px;
  border:1.5px dashed color-mix(in srgb,var(--lam) 55%,transparent);
  background:color-mix(in srgb,var(--lam) 8%,transparent)}
tr.dong-nd td,tr.dong-nd th{padding-top:12px;padding-bottom:12px}
@media(max-width:700px){
  .the-so-du{max-width:none}
  .the-so-du b,#vi-so-du{font-size:30px}
  .o-nd{font-size:15px}
}
/* số tiền dài (1.650.000 đ) không rớt dòng trong ô thống kê */
#k-da-chi{font-size:22px;white-space:nowrap;line-height:1.6}
@media(max-width:700px){#k-da-chi{font-size:19px}}

/* ===================================================== v60 "đẹp nhất có thể" ===
   (2026-10-13) Màn đăng nhập 2 cột có phần giới thiệu, tinh chỉnh đồng bộ bảng, nhãn
   trạng thái, nút lọc, ô nhập, chân trang. Mọi màu vẫn lấy từ biến bộ màu. */

/* ---------- màn đăng nhập / tạo tài khoản ---------- */
.tk-bo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;
  max-width:960px;margin:28px auto 8px;align-items:stretch}
.tk-form{display:flex;flex-direction:column;justify-content:center}
.tk-form .the{margin:0}
.tk-gioi-thieu{position:relative;overflow:hidden;border-radius:20px;color:#fff;
  padding:34px 32px 30px;display:flex;flex-direction:column;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.20),transparent 60%),
    radial-gradient(80% 60% at 0% 100%,color-mix(in srgb,var(--lam) 40%,#000) 0%,transparent 70%),
    linear-gradient(150deg,color-mix(in srgb,var(--lam) 75%,#fff) 0%,var(--lam) 42%,
                    color-mix(in srgb,var(--lam) 55%,#000) 100%);
  box-shadow:0 24px 50px -22px color-mix(in srgb,var(--lam) 80%,transparent),
             inset 0 1px 0 rgba(255,255,255,.3);
  animation:hien-len .5s cubic-bezier(.2,.8,.2,1) both}
/* lưới chấm mờ + vòng tròn trang trí */
.tk-gioi-thieu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask:linear-gradient(160deg,#000 0%,transparent 65%);
  mask:linear-gradient(160deg,#000 0%,transparent 65%)}
.tk-gioi-thieu::after{content:"";position:absolute;width:260px;height:260px;right:-90px;
  bottom:-110px;border-radius:50%;border:40px solid rgba(255,255,255,.07);pointer-events:none}
.tk-gioi-thieu>*{position:relative;z-index:1}
.tkg-nhan{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25)}
.tkg-tieu-de{margin:16px 0 22px;font-size:28px;line-height:1.22;font-weight:800;
  letter-spacing:-.035em}
.tkg-tieu-de em{font-style:normal;color:#fff;
  background:linear-gradient(transparent 62%,rgba(255,255,255,.22) 62%)}
.tkg-ds{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px}
.tkg-ds li{position:relative;padding-left:46px;min-height:34px;display:flex;
  flex-direction:column;justify-content:center}
.tkg-ds li::before{content:"";position:absolute;left:0;top:50%;margin-top:-17px;
  width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22)}
.tkg-ds li::after{content:"";position:absolute;left:9px;top:50%;margin-top:-8px;
  width:16px;height:16px;background:#fff;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.tkg-ds li.i-nhanh{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2.5 5 13.6h6l-1.2 7.9 8.2-11.1h-6z'/%3E%3C/svg%3E")}
.tkg-ds li.i-theodoi{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E")}
.tkg-ds li.i-vi{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E")}
.tkg-ds b{font-size:14.5px;font-weight:700}
.tkg-ds span{font-size:13px;opacity:.85;line-height:1.45}
.tkg-sk{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tkg-sk:empty{display:none}
.tkg-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:12px;
  font-size:13px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.18)}
.tkg-chip b{font-weight:700}
.tkg-so{display:flex;gap:10px;margin-top:12px}
.tkg-so div{flex:1 1 0;padding:10px 12px;border-radius:12px;font-size:12px;opacity:.95;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.tkg-so b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
/* form bên phải: bỏ viền màu đầu thẻ cho sạch, ô nhập cao hơn */
#khung-tk .the{box-shadow:0 1px 2px rgba(0,0,0,.05),0 20px 44px -24px rgba(0,0,0,.35)}
#khung-tk input{padding:12px 14px;font-size:15px}
@media(max-width:860px){
  .tk-bo{grid-template-columns:1fr;gap:16px;margin-top:8px}
  .tk-gioi-thieu{padding:22px 20px 20px;border-radius:16px}
  .tkg-tieu-de{font-size:21px;margin:12px 0 14px}
  .tkg-ds{gap:10px;margin-bottom:14px}
  .tkg-ds span{display:none}            /* điện thoại: chỉ giữ dòng đậm cho gọn */
  .tkg-ds li{min-height:28px;padding-left:40px}
  .tkg-ds li::before{width:28px;height:28px;margin-top:-14px;border-radius:8px}
  .tkg-ds li::after{left:6px;width:15px;height:15px;margin-top:-7.5px}
  .tk-form{order:-1}                    /* điện thoại: form lên trước, giới thiệu xuống dưới */
}

/* ---------- bảng: khung bo tròn, hàng tiêu đề có nền, hover ngả màu chủ đạo ---------- */
.the .bang-cuon{border:1px solid var(--vien);border-radius:12px}
.the .bang-cuon.o-nhap-ma,.the .bang-cuon.o-nap-tt{border:none;border-radius:0}
.the .bang-cuon>table>thead th{background:color-mix(in srgb,var(--chu) 4%,var(--the))}
.the .bang-cuon>table>thead th:first-child{border-top-left-radius:11px}
.the .bang-cuon>table>thead th:last-child{border-top-right-radius:11px}
tbody tr:hover td{background:color-mix(in srgb,var(--lam) 6%,transparent)}
tbody tr{transition:background-color .12s}

/* ---------- nhãn trạng thái: viền mảnh cùng màu, chữ đậm hơn ---------- */
.nhan{font-weight:650;border:1px solid color-mix(in srgb,currentColor 28%,transparent)}

/* ---------- nút lọc: dạng thanh phân đoạn ---------- */
.loc button{font-weight:600;transition:all .15s}
.loc button:hover{border-color:color-mix(in srgb,var(--lam) 45%,var(--vien))}

/* ---------- ô nhập: nền nổi nhẹ, focus quầng rõ ---------- */
input[type=text],input[type=password],input[type=number],select,textarea{
  background-color:color-mix(in srgb,var(--chu) 3%,var(--the))}
input:focus,select:focus,textarea:focus{background-color:var(--the);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lam) 18%,transparent)}

/* ---------- tiêu đề khung lớn hơn chút, chú thích dịu ---------- */
.the>h2[class*="i-"]{font-size:18.5px}

/* ---------- chân trang ---------- */
.chan-trang{display:flex;justify-content:center;align-items:center;gap:10px;
  padding:8px 16px 28px;font-size:12.5px;color:var(--mo)}
.chan-trang b{color:var(--lam)}
.cham-nho{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
@media(max-width:700px){.chan-trang{padding-bottom:20px}}
/* thanh cuộn bảng: mảnh, theo màu giao diện (trước là thanh trắng chói trên nền tối) */
.bang-cuon{scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--mo) 45%,transparent) transparent}
.bang-cuon::-webkit-scrollbar{height:8px}
.bang-cuon::-webkit-scrollbar-track{background:transparent}
.bang-cuon::-webkit-scrollbar-thumb{border-radius:8px;
  background:color-mix(in srgb,var(--mo) 45%,transparent)}
html[data-sang]{color-scheme:light}
html:not([data-sang]){color-scheme:dark}

/* ======================================================= v63 logo huy hiệu (2026-10-13) ===
   Logo = khiên lục giác SVG (màu chuyển lấy từ --lam qua stop-color), viền sáng trong,
   tia chớp trắng nổi. "Reg68" thành thẻ nhãn màu chữ trắng. */
h1 .logo{width:44px;height:44px;border-radius:0;overflow:visible;background:none;
  box-shadow:none;filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--lam) 45%,transparent));
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
h1 .logo::after{display:none}
h1 .logo svg{width:44px;height:44px;fill:none;filter:none}
.lg-a{stop-color:color-mix(in srgb,var(--lam) 55%,#fff)}
.lg-b{stop-color:var(--lam)}
.lg-c{stop-color:color-mix(in srgb,var(--lam) 55%,#000)}
.lg-khien{fill:url(#lg-nen);stroke:url(#lg-nen);stroke-width:5;stroke-linejoin:round}
.lg-vien{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.3;stroke-linejoin:round}
.lg-chop{fill:#fff;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28))}
#ten-trang:hover .logo{transform:rotate(-8deg) scale(1.07)}

/* "Reg68": thẻ nhãn */
h1 .ten-chinh{display:inline-flex;align-items:center;gap:7px}
h1 .ten-chinh em{display:inline-block;font-size:.74em;font-weight:800;letter-spacing:.03em;
  line-height:1;padding:4px 8px 4px;border-radius:7px;color:#fff;-webkit-text-fill-color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--lam) 70%,#fff),var(--lam) 50%,
                             color-mix(in srgb,var(--lam) 70%,#000));
  box-shadow:0 3px 8px -2px color-mix(in srgb,var(--lam) 60%,transparent),
             inset 0 1px 0 rgba(255,255,255,.35)}
h1 small{letter-spacing:.09em}
@media(max-width:700px){
  h1 .logo,h1 .logo svg{width:38px;height:38px}
  h1 .ten-chinh{gap:5px}
  h1 .ten-chinh em{padding:3px 6px}
}
/* điện thoại hẹp: tên web giữ nguyên, nhãn sự kiện co lại có "…" (trước bị "Reg68" đè lên) */
@media(max-width:700px){
  header h1{min-width:0}                /* khong co thi h1 doi du chieu rong noi dung -> tran */
  h1 .ten-web{flex:0 0 auto}
  h1 .nhan-sk{display:block;min-width:0;flex:0 1 auto;margin-left:auto;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis}
  h1 .nhan-sk::before{display:inline-block;vertical-align:1px;margin-right:6px}
}
@media(max-width:360px){
  h1 .ten-chinh{font-size:15px}
  h1 .logo,h1 .logo svg{width:34px;height:34px}
}

/* ==================================================== v66 thương hiệu nâng cấp (2026-10-13) ===
   Logo: vòng lục giác ngoài mảnh phát sáng + vệt sáng lướt chéo (cắt theo khiên).
   Reg68: ánh sáng lướt cùng nhịp. Tên web có chiều sâu, "Liên Quân" tô màu nhấn. */
.lg-ngoai{fill:none;stroke:color-mix(in srgb,var(--lam) 45%,transparent);stroke-width:1;
  stroke-linejoin:round;opacity:.9}
.lg-luot{fill:rgba(255,255,255,.38);transform-box:fill-box;transform-origin:center;
  transform:skewX(-22deg) translateX(0);animation:lg-luot 4.5s ease-in-out infinite}
@keyframes lg-luot{0%,62%{transform:skewX(-22deg) translateX(0)}
  100%{transform:skewX(-22deg) translateX(90px)}}
/* vòng ngoài sáng dần khi rê chuột vào logo */
#ten-trang:hover .lg-ngoai{stroke:color-mix(in srgb,var(--lam) 80%,transparent)}

/* tên web: chữ đậm có bóng mờ cùng màu cho có chiều sâu */
h1 .ten-chinh{text-shadow:0 1px 0 color-mix(in srgb,var(--the) 60%,transparent),
                          0 6px 18px color-mix(in srgb,var(--lam) 18%,transparent)}
h1 small b{color:var(--lam);font-weight:800}

/* Reg68: ánh sáng lướt cùng nhịp với logo */
h1 .ten-chinh em{position:relative;overflow:hidden;text-shadow:none}
h1 .ten-chinh em::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-150%) skewX(-20deg);animation:reg-luot 4.5s ease-in-out infinite}
/* chi dung transform -> khong dan trang lai moi khung hinh (xem khoi v45) */
@keyframes reg-luot{0%,66%{transform:translateX(-150%) skewX(-20deg)}
  100%{transform:translateX(330%) skewX(-20deg)}}

@media(prefers-reduced-motion:reduce){
  .lg-luot,h1 .ten-chinh em::after{animation:none;display:none}
}

/* ======================================================= v67 thương hiệu kiểu game (2026-10-13) ===
   Họ chọn "game, rực rỡ": huy hiệu viền vàng ánh kim (như huy hiệu rank), tia chớp vàng,
   tên web phông Chakra Petch nghiêng đậm có chữ màu chuyển, REG68 là thẻ vàng cắt vát.
   Vàng là màu cố định (hợp mọi bộ màu); phần còn lại vẫn theo --lam. */
:root{--vang-kim:#f6c453}
.lg-ngoai{stroke:url(#lg-vang);stroke-width:2.6;opacity:1}
.lg-chop{fill:url(#lg-chop-mau);filter:drop-shadow(0 0 2px rgba(255,214,102,.9))
                                    drop-shadow(0 1.5px 1px rgba(0,0,0,.35))}
.lg-vien{stroke:rgba(255,230,160,.35)}
h1 .logo{filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--lam) 50%,transparent))
                drop-shadow(0 0 6px rgba(246,196,83,.35))}
#ten-trang:hover .lg-ngoai{stroke:url(#lg-vang)}
#ten-trang:hover .logo{filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--lam) 60%,transparent))
                             drop-shadow(0 0 10px rgba(246,196,83,.6))}

/* tên web */
h1 .ten-chinh{font:italic 700 21px/1.1 "Chakra Petch",var(--chu-thuong);letter-spacing:-.01em;
  text-transform:uppercase;text-shadow:none;gap:9px}
h1 .ten-chu{background:linear-gradient(180deg,var(--chu) 30%,
             color-mix(in srgb,var(--lam) 65%,var(--chu)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--lam) 25%,transparent));
  padding-right:2px}          /* chữ nghiêng: chừa chút để nét cuối không bị cắt */

/* REG68: thẻ vàng kim cắt vát kiểu game */
h1 .ten-chinh em{font:italic 700 .7em/1 "Chakra Petch",var(--chu-thuong);letter-spacing:.06em;
  padding:5px 12px 5px 11px;border-radius:0;color:#3b2604;-webkit-text-fill-color:#3b2604;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  background:linear-gradient(180deg,#fff3c4 0%,#f6c453 45%,#d79a26 72%,#ffe08a 100%);
  box-shadow:none;filter:none}   /* clip-path cat mat bong -> khong dung bong o day */
h1 .ten-chinh em::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent)}

h1 small{font-weight:700;letter-spacing:.12em}
@media(max-width:700px){
  h1 .ten-chinh{font-size:17px;gap:6px}
  h1 .ten-chinh em{padding:4px 9px 4px 8px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
}
@media(max-width:360px){ h1 .ten-chinh{font-size:15px} }

/* ====================================================== v68 giới thiệu (affiliate) ===
   (2026-10-13) Nút "Giới thiệu" + màn #khung-aff (khách), tab Giới thiệu (admin). */
#nut-aff{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
.the h2.i-aff{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
/* khung link giới thiệu nổi bật */
.the-aff-dau{background:
  radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--vang-kim) 14%,transparent),transparent 55%),
  linear-gradient(180deg,color-mix(in srgb,var(--lam) 9%,transparent),transparent 220px),var(--the)}
.the-aff-dau .lien-ket{padding:10px 10px 10px 14px}
#aff-link{font:600 14px var(--chu-so);color:var(--lam);word-break:break-all}
/* chấm đếm yêu cầu rút đang chờ trên tab admin */
.dem-nho{display:inline-flex;min-width:18px;height:18px;padding:0 5px;margin-left:4px;
  align-items:center;justify-content:center;border-radius:99px;font:700 11px var(--chu-thuong);
  color:#fff;background:var(--do);vertical-align:1px}
/* đầu trang 2 hàng (701–1439px): Giới thiệu đứng sau Đơn của tôi */
@media(min-width:701px) and (max-width:1439px){ #nut-aff{order:3} }
/* điện thoại: 7 nút trong lưới 3 cột -> Thoát trải hết hàng cuối cho khỏi lẻ */
@media(max-width:700px){
  body:has(#nut-aff:not(.an)) .trang-thai #nut-tk{grid-column:1/-1}
}
#nut-chep-aff{white-space:nowrap;flex:0 0 auto}

/* ================================================= v74 làm đẹp khung Đặt đơn & Số lượt rộng === */
@media(min-width:1000px){
  .hai-cot{grid-template-columns:minmax(460px,510px) minmax(0,1fr);gap:18px}
  .cot-trai table.bang-nhap thead th:nth-child(3){width:144px!important}
  .cot-trai table.bang-nhap thead th:nth-child(4){width:106px!important}
  .cot-trai table.bang-nhap thead th:nth-child(5){width:40px!important}
}

.dau-bang-nhap{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px 12px;flex-wrap:wrap;margin:6px 0 10px;
}
.chon-nhanh-luot{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.chon-nhanh-luot>span{
  font-size:12px;font-weight:600;color:var(--mo);margin-right:2px;
}
.chon-nhanh-luot button{
  background:var(--mo-nhe);border:1px solid var(--vien);color:var(--chu);
  border-radius:99px;padding:4px 10px;font:600 12px/1.3 var(--chu-thuong);
  cursor:pointer;transition:all .15s;
}
.chon-nhanh-luot button:hover{
  border-color:color-mix(in srgb,var(--lam) 60%,var(--vien));
  color:var(--lam);transform:translateY(-1px);
}
.chon-nhanh-luot button.chon{
  background:var(--lam);border-color:var(--lam);color:#fff;
  box-shadow:0 4px 10px -3px color-mix(in srgb,var(--lam) 65%,transparent);
}

/* Hộp chọn số lượt rộng rãi có nút − / + */
.hop-luot{
  display:inline-flex;align-items:stretch;width:100%;min-width:132px;
  background:var(--nen);border:1.5px solid var(--vien);border-radius:11px;
  overflow:hidden;transition:border-color .15s,box-shadow .15s;
}
html[data-sang] .hop-luot{background:var(--the)}
.hop-luot:focus-within{
  border-color:var(--lam);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lam) 18%,transparent);
}
.hop-luot .nut-luot{
  flex:0 0 36px;width:36px;border:none;background:color-mix(in srgb,var(--chu) 4%,transparent);
  color:var(--chu);font:700 17px/1 var(--chu-thuong);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;user-select:none;transition:background .12s,color .12s;
}
.hop-luot .nut-luot:hover{
  background:color-mix(in srgb,var(--lam) 18%,transparent);color:var(--lam);
}
.hop-luot .nut-luot:active{
  background:var(--lam);color:#fff;
}
.hop-luot .nut-luot.tru{border-right:1px solid var(--vien)}
.hop-luot .nut-luot.cong{border-left:1px solid var(--vien)}
table.bang-nhap .hop-luot input.luot{
  flex:1 1 auto;min-width:56px;width:100%;border:none!important;
  background:transparent!important;box-shadow:none!important;
  text-align:center;font:800 15.5px/1.3 var(--chu-so);color:var(--chu);
  padding:9px 4px;-moz-appearance:textfield;
}
table.bang-nhap .hop-luot input.luot::-webkit-outer-spin-button,
table.bang-nhap .hop-luot input.luot::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

/* Làm đẹp ô nhập mã sự kiện & bảng nhập */
table.bang-nhap input.ma,
table.bang-nhap input.token{
  border-radius:11px;border:1.5px solid var(--vien);
  padding:10px 13px;font:600 14.5px/1.35 var(--chu-so);
  transition:border-color .15s,box-shadow .15s;
}
table.bang-nhap input.ma:focus,
table.bang-nhap input.token:focus{
  border-color:var(--lam);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lam) 18%,transparent);
}
table.bang-nhap td.tien{
  text-align:right;font:700 14px/1.3 var(--chu-so);color:var(--lam);
  padding-right:8px;
}
table.bang-nhap tfoot th{
  padding:12px 8px 6px;font-size:14px;
}
#xt-tong-tien{color:var(--lam);font-size:15px;font-weight:800}
#nut-dat{
  padding:12px 26px;font-size:15px;font-weight:700;border-radius:12px;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--lam) 65%,transparent);
}

/* ================================================= v78 Dòng đăng ký CTV (HOT nhấp nháy) === */
header{z-index:200}

.dong-ctv{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;margin:0 0 14px;border-radius:14px;
  text-decoration:none;color:var(--chu);font-size:13.8px;line-height:1.45;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,#ff4d4d 12%,var(--nen-the)),
      color-mix(in srgb,var(--vang) 16%,var(--nen-the)) 55%,
      color-mix(in srgb,var(--lam) 12%,var(--nen-the)));
  border:1.5px solid color-mix(in srgb,var(--vang) 55%,var(--vien));
  box-shadow:
    0 6px 20px -8px color-mix(in srgb,var(--vang) 35%,transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.dong-ctv::before{
  content:"";position:absolute;top:0;left:-120%;width:65%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-22deg);
  animation:luot-sang-ctv 4.2s infinite ease-in-out;
  pointer-events:none;
}
.dong-ctv:hover{
  transform:translateY(-1.5px);
  border-color:var(--vang-kim);
  box-shadow:
    0 10px 26px -8px color-mix(in srgb,var(--vang) 55%,transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.dong-ctv .ctv-noi-dung{flex:1;min-width:0}
.dong-ctv b{
  color:var(--vang-kim);font-weight:800;
  text-shadow:0 0 12px color-mix(in srgb,var(--vang) 35%,transparent);
}
html[data-sang] .dong-ctv b{color:#b45309;text-shadow:none}
.dong-ctv .ctv-mui-ten{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:999px;
  background:color-mix(in srgb,var(--vang) 20%,transparent);
  color:var(--vang-kim);font-weight:800;font-size:16px;line-height:1;
  transition:transform .18s ease,background .18s ease;
}
.dong-ctv:hover .ctv-mui-ten{
  transform:translateX(3px);
  background:color-mix(in srgb,var(--vang) 32%,transparent);
}

.ctv-huy-hieu{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:4px 11px 4px 9px;border-radius:999px;
  font:800 11px/1.1 var(--chu-thuong);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#ff1f4b 0%,#ff5e00 55%,#ffae00 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 0 12px rgba(255,45,85,.65),0 2px 6px rgba(0,0,0,.25);
}
.ctv-huy-hieu .ic-set-hot{
  width:12px;height:12px;fill:#fff3b0;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ffd700);
  animation:chop-tia-set 1.1s infinite ease-in-out;
}
.ctv-huy-hieu.hot-nhap-nhay{
  animation:nhap-nhay-hot .95s infinite alternate ease-in-out;
}

/* ================================================= v80 Logo Tia Sét Nhấp Nháy (Bỏ Lục Giác) & Tối Ưu Trang Chủ === */
h1 .logo{
  width:36px;height:40px;
  background:none!important;border-radius:0!important;box-shadow:none!important;
  filter:drop-shadow(0 3px 10px rgba(255,168,0,.55));
}
h1 .logo svg{width:36px;height:40px;overflow:visible}
.lg-chop-bong{
  fill:rgba(120,53,15,.45);
  transform-box:fill-box;transform-origin:center;
}
.lg-chop{
  fill:url(#lg-chop-mau);
  stroke:url(#lg-chop-vien);stroke-width:.8;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 5px rgba(255,230,102,.95))
         drop-shadow(0 0 12px rgba(255,140,0,.85));
  animation:chop-tia-set 1.25s infinite ease-in-out;
}
.lg-quang{
  transform-box:fill-box;transform-origin:center;
  animation:quang-nhip 1.25s infinite ease-in-out;
}
.lg-tia{
  fill:#fff6b3;
  filter:drop-shadow(0 0 5px #ffd452);
  transform-box:fill-box;transform-origin:center;
  animation:tia-dien 1.25s infinite ease-in-out;
}
.lg-tia.t2{animation-delay:.4s}
.lg-tia.t3{animation-delay:.8s}

h1 .ten-chinh em{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px 5px 9px;
  background:linear-gradient(180deg,#fff6cc 0%,#ffd452 45%,#d9820b 75%,#ffe58f 100%);
}
h1 .ten-chinh em .ic-set-reg{
  width:13px;height:13px;fill:#3b2604;flex:0 0 auto;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9));
  animation:chop-set-reg 1.25s infinite ease-in-out;
}

/* Gọn phần Tình hình dàn máy ở trang chủ */
#the-tong-quan{padding:16px 20px;margin-bottom:14px}
#the-tong-quan>h2.i-may{margin-bottom:10px;padding-bottom:8px;font-size:16.5px}
#the-tong-quan .ghi-chu:empty{display:none}

@keyframes chop-tia-set{
  0%,100%{
    transform:scale(1);
    filter:drop-shadow(0 0 4px rgba(255,230,102,.9))
           drop-shadow(0 0 9px rgba(255,150,0,.65));
    opacity:.94;
  }
  38%{
    transform:scale(1.14) rotate(-3deg);
    filter:drop-shadow(0 0 8px #ffffff)
           drop-shadow(0 0 16px #ffd700)
           drop-shadow(0 0 26px #ff6a00);
    opacity:1;
  }
  50%{
    transform:scale(.96);
    opacity:.76;
  }
  66%{
    transform:scale(1.16) rotate(2deg);
    filter:drop-shadow(0 0 10px #ffffff)
           drop-shadow(0 0 20px #ffe066)
           drop-shadow(0 0 30px #ff7b00);
    opacity:1;
  }
}

@keyframes chop-set-reg{
  0%,100%{transform:scale(1);fill:#3b2604}
  45%,70%{transform:scale(1.18);fill:#b91c1c;filter:drop-shadow(0 0 5px #fff)}
}

@keyframes quang-nhip{
  0%,100%{transform:scale(.85);opacity:.5}
  45%,68%{transform:scale(1.22);opacity:1}
}

@keyframes tia-dien{
  0%,100%{transform:scale(.4);opacity:0}
  45%,68%{transform:scale(1.4);opacity:1}
}

@keyframes nhap-nhay-hot{
  0%{
    transform:scale(.95);
    opacity:.82;
    filter:brightness(.96);
    box-shadow:0 0 6px rgba(255,45,85,.45),0 2px 4px rgba(0,0,0,.2);
  }
  100%{
    transform:scale(1.07);
    opacity:1;
    filter:brightness(1.18);
    box-shadow:0 0 16px rgba(255,45,85,.95),0 0 26px rgba(255,149,0,.65);
  }
}

@keyframes luot-sang-ctv{
  0%,55%{left:-120%}
  100%{left:160%}
}

.menu-ctv-ghi{
  font-size:12.5px;color:var(--chu);line-height:1.45;
  padding:7px 10px;margin-bottom:4px;border-radius:8px;
  background:color-mix(in srgb,var(--vang) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--vang) 38%,var(--vien));
}
.menu-ctv-ghi b{color:var(--vang);font-weight:800}

/* Đã bỏ viên thuốc trạng thái thừa trên header khách -> thanh header nằm gọn 1 hàng */
@media(min-width:701px) and (max-width:1439px){
  header:not(:has(#nut-thoat))::before{display:none!important}
  header:not(:has(#nut-thoat)) .trang-thai{display:flex!important;margin-left:auto;align-items:center;gap:4px}
}

@media(max-width:700px){
  h1 .logo,h1 .logo svg{width:30px;height:34px}
  .hop-luot{min-width:148px}
  .hop-luot .nut-luot{flex:0 0 40px;width:40px;font-size:19px}
  table.bang-nhap .hop-luot input.luot{font-size:16px;padding:10px 6px}

  header{position:relative;z-index:200!important}
  .trang-thai{position:relative}
  .trang-thai .ho-tro{position:static}
  body.chua-dn .trang-thai #ho-tro{grid-column:1/-1}
  body.chua-dn .ho-tro>summary{padding:10px 14px;font-size:13.5px}
  .menu-ho-tro{
    left:0!important;right:0!important;width:100%!important;min-width:0!important;
    top:calc(100% + 6px)!important;z-index:999!important;
    box-shadow:0 20px 44px -10px rgba(0,0,0,.65)!important;
  }
}




/* thanh tab quan tri tren dien thoai: xuong dong thanh nut vien tron, thay du moi tab
   (truoc day cuon ngang + an thanh cuon -> tab "Giao dien" khuat ma khong ai biet) */
@media(max-width:700px){
  nav{flex-wrap:wrap;overflow:visible;gap:6px;padding:10px 12px;border-bottom:1px solid var(--vien)}
  nav button{padding:7px 12px;font-size:13px;border:1px solid var(--vien);border-radius:99px;
    background:var(--mo-nhe)}
  nav button.chon{color:#fff;background:var(--lam);border-color:var(--lam)}
}

/* ===== v91 "sang, tối giản" (2026-10-19) =====
   Ho chon phong "sang, toi gian": it mau, nhieu khoang trang, chu tinh, bong rat nhe,
   bo hieu ung on (luoi cham, quang mau, dai mau dau the, soc chay, vet sang lướt).
   Chi CSS, khong doi id/class. Logo + ten web + REG68 giu nguyen. Moi mau tu bien bo mau. */
:root{--v91-vien:color-mix(in srgb,var(--vien) 72%,transparent);
  --v91-nen-o:color-mix(in srgb,var(--chu) 2.5%,var(--the));
  --v91-bong:0 1px 2px rgba(0,0,0,.10),0 12px 32px -20px rgba(0,0,0,.45)}
html[data-sang]{--v91-bong:0 1px 2px rgba(40,30,20,.04),0 14px 34px -22px rgba(40,30,20,.16)}

/* nen trang: phang, chi mot quang mau rat nhat o tren cung */
body::before{background-image:
    radial-gradient(1200px 420px at 50% -12%,color-mix(in srgb,var(--lam) 6%,transparent),transparent 70%);
  background-size:auto;background-repeat:no-repeat}
@media(max-width:700px){body::before{background-size:auto}}
body{font-size:14.5px;line-height:1.65}

/* dau trang: bo vach mau duoi, nen trong, vien toc */
header{background:color-mix(in srgb,var(--the) 82%,transparent);
  border-bottom-color:var(--v91-vien)}
header::after{display:none}
h1 .nhan-sk{background:transparent;box-shadow:none;font-weight:600;
  border-color:color-mix(in srgb,var(--lam) 30%,var(--vien))}
h1 .nhan-sk::before{animation:none;box-shadow:none;width:6px;height:6px}

/* ---------- the: phang, vien toc, bong mem, nhieu khoang trang ---------- */
.the,html[data-sang] .the,#the-dat-don,#khung-tk .the{
  background:var(--the);border-color:var(--v91-vien);border-radius:18px;
  box-shadow:var(--v91-bong)}
.the::before,#the-dat-don::before,#khung-tk .the::before{display:none}
.the{padding:26px 28px;margin-bottom:20px}
.the>h2[class*="i-"]{border-bottom:none;padding-bottom:0;margin-bottom:6px}
.the h2,.the>h2[class*="i-"]{font-size:17.5px;font-weight:650;letter-spacing:-.02em}
.the h2[class*="i-"]::before{background:color-mix(in srgb,var(--lam) 10%,transparent);
  box-shadow:none;border:none;border-radius:10px}
.the h2[class*="i-"]::after{background:var(--lam)}
.the p.chu-thich{color:var(--mo);font-size:13.5px;line-height:1.7}
.the>h2[class*="i-"]+p.chu-thich{margin:2px 0 18px}
#the-tong-quan{padding:22px 26px;margin-bottom:20px}
#the-tong-quan>h2.i-may{font-size:15.5px;margin-bottom:16px;padding-bottom:0}
@media(max-width:700px){
  main{padding:16px}
  .the{padding:20px 18px;margin-bottom:16px;border-radius:16px}
  #the-tong-quan{padding:18px}
  .the h2,.the>h2[class*="i-"]{font-size:16px}
}

/* ---------- o so lieu: trung tinh, so manh, mau chi o so + cham nho ---------- */
.dem{gap:12px}
.dem div,.dem div.xong,.dem div.loi,.dem div.dangchay{
  background:var(--v91-nen-o);border:1px solid var(--v91-vien);border-radius:14px;
  padding:14px 16px 12px;font-size:12px;font-weight:500;color:var(--mo);letter-spacing:0}
.dem div::before{width:6px;height:6px;top:16px;right:14px;box-shadow:none!important;
  animation:none!important;opacity:.85}
.dem b{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px}
.dem div:hover{transform:none;box-shadow:none}
.dem.dem-5 b{font-size:22px}
#k-da-chi{font-size:20px}
@media(max-width:700px){
  .dem{gap:8px}
  .dem b{font-size:22px}
  .dem.dem-5 b{font-size:18px}
  .dem div,.dem div.xong,.dem div.loi,.dem div.dangchay{padding:12px 13px 10px}
}

/* ---------- nut: phang, khong vet sang, khong nhay ---------- */
button.nut,a.nut{background:var(--lam);box-shadow:none;font-weight:600;
  transition:opacity .15s,transform .15s,border-color .15s}
button.nut:hover,a.nut:hover{filter:none;transform:none;opacity:.9}
button.nut:not(.phu)::after,a.nut:not(.phu)::after{display:none}
button.nut.phu,a.nut.phu{background:transparent;border-color:var(--v91-vien)}
button.nut.phu:hover,a.nut.phu:hover{opacity:1;
  border-color:color-mix(in srgb,var(--chu) 30%,var(--vien))}
button.nut.do{background:var(--do);box-shadow:none}
#nut-dat{box-shadow:none;border-radius:12px;padding:12px 30px;letter-spacing:.01em}
a.nut.lh-zalo{box-shadow:none}

/* ---------- o nhap: vien toc, focus vong mong ---------- */
input[type=text],input[type=password],input[type=number],select,textarea{
  border-color:var(--v91-vien)}
input:focus,select:focus,textarea:focus{border-color:var(--lam);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lam) 13%,transparent)}
label{font-size:10.5px;letter-spacing:.12em;font-weight:600}
table.bang-nhap input.ma,table.bang-nhap input.token,.hop-luot{border-width:1px;
  border-color:var(--v91-vien)}

/* ---------- form dat don ---------- */
.chon-nhanh-luot button{background:transparent;border-color:var(--v91-vien);
  font-weight:500;color:var(--mo)}
.chon-nhanh-luot button:hover{transform:none;color:var(--chu);
  border-color:color-mix(in srgb,var(--chu) 30%,var(--vien))}
.chon-nhanh-luot button.chon{background:var(--chu);border-color:var(--chu);
  color:var(--the);box-shadow:none}
table.bang-nhap td.tien{font-weight:600}
#xt-tong-tien{font-weight:700}
@media(min-width:701px){table.bang-nhap tfoot th{border-top-style:solid;border-top-color:var(--v91-vien)}}
@media(max-width:700px){
  table.bang-nhap tr{background:var(--v91-nen-o);border-color:var(--v91-vien);border-radius:14px}
}
/* dong CTV: giu chu HOT nhung bot on — nen nhat, khong vet sang, khong toa sang */
.dong-ctv{background:color-mix(in srgb,var(--vang) 6%,var(--the));
  border:1px solid color-mix(in srgb,var(--vang) 28%,var(--vien));box-shadow:none;
  border-radius:14px}
.dong-ctv::before{display:none}
.dong-ctv:hover{transform:none;box-shadow:none;
  border-color:color-mix(in srgb,var(--vang) 50%,var(--vien))}
.dong-ctv b,html[data-sang] .dong-ctv b{color:var(--vang);text-shadow:none;font-weight:700}
.dong-ctv .ctv-mui-ten{background:transparent;color:var(--vang)}
.ctv-huy-hieu{background:var(--do);border:none;box-shadow:none;letter-spacing:.1em;
  font-weight:700}
.ctv-huy-hieu .ic-set-hot{fill:#fff;filter:none;animation:none}
.ctv-huy-hieu.hot-nhap-nhay{animation:v91-hot 2.4s ease-in-out infinite}
@keyframes v91-hot{0%,100%{opacity:1}50%{opacity:.72}}

/* ---------- tien do: thanh mong, khong soc, khong toa sang ---------- */
.thanh{height:8px;padding:0;border:none;box-shadow:none;
  background:color-mix(in srgb,var(--chu) 8%,transparent)}
.thanh i{background:var(--xanh);box-shadow:none}
.thanh i::after{display:none}
.td-tien.chay .thanh i::after{display:block;opacity:.5}
.td-tien.xong .thanh.nho i{background:var(--xanh)}
.td-tien.chay .thanh.nho i{background:var(--vang)}
.td-tien .thanh.nho{height:6px}
.td-pt{font-weight:600}
.phan-tram>b{background:none;-webkit-text-fill-color:currentColor;color:var(--chu);
  font-weight:600;letter-spacing:-.03em}
.hang-doi-gon,.o-diem{background:var(--v91-nen-o);border-color:var(--v91-vien);border-radius:14px}
.hd-o b,.od-tren b{font-weight:600}

/* ---------- bang, nhan, loc ---------- */
.the .bang-cuon{border-color:var(--v91-vien);border-radius:14px}
.the .bang-cuon>table>thead th{background:var(--v91-nen-o)}
th,td{border-bottom-color:var(--v91-vien)}
th{font-weight:600;letter-spacing:.11em}
.nhan{border:none;font-weight:600}
.loc button{background:transparent;border-color:var(--v91-vien);font-weight:500}
.loc button.chon{background:var(--chu);border-color:var(--chu);color:var(--the);box-shadow:none}
@media(max-width:700px){
  table.bang-the tr{background:var(--v91-nen-o);border-color:var(--v91-vien);border-radius:14px}
}
@media(min-width:1000px){
  .cot-trai table.bang-the tr{background:var(--v91-nen-o);border-color:var(--v91-vien)}
}
.bao{border-radius:12px}
.the-so-du{box-shadow:none}

/* ---------- man dang nhap / tao tai khoan ---------- */
.tk-bo{gap:24px;margin-top:36px;max-width:980px}
/* khoi gioi thieu: anh thich lai nen xanh (v60) -> khong ghi de o day nua */
#khung-tk .the{padding:34px 32px 28px}
#khung-tk .the h2{font-size:22px;font-weight:650;letter-spacing:-.025em}
#khung-tk input{padding:12px 14px}
#khung-tk .hang-nut .nut{padding:13px}
@media(max-width:860px){
  .tk-bo{margin-top:12px;gap:16px}
}
@media(max-width:700px){
  #khung-tk .the{padding:24px 20px 20px}
  #khung-tk .the h2{font-size:20px}
}

/* ---------- trang quan tri ---------- */
nav{border-bottom-color:var(--v91-vien)}
nav button{font-weight:500}
nav button.chon{border-bottom-color:var(--chu)}
@media(max-width:700px){
  nav{gap:6px;padding:12px 16px 14px}
  nav button{background:transparent;border-color:var(--v91-vien);padding:7px 13px;
    font-size:13px;color:var(--mo)}
  nav button.chon{background:var(--chu);border-color:var(--chu);color:var(--the)}
  nav ~ main{padding:16px}
  nav button.chon .dem-nho{box-shadow:0 0 0 1.5px var(--chu)}
}

@media(prefers-reduced-motion:reduce){.ctv-huy-hieu.hot-nhap-nhay{animation:none}}

/* ======================================== v93 khung Dat don nen xanh (2026-10-19) ===
   Anh thich nen xanh nhu khoi gioi thieu man dang nhap -> khung Dat don cung kieu do:
   nen gradient --lam, chu trang, o nhap nen trang de go, nut Gui don trang noi bat. */
#the-dat-don{position:relative;overflow:hidden;color:#fff;border:none;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(80% 60% at 0% 100%,color-mix(in srgb,var(--lam) 45%,#000) 0%,transparent 70%),
    linear-gradient(150deg,color-mix(in srgb,var(--lam) 78%,#fff) 0%,var(--lam) 45%,
                    color-mix(in srgb,var(--lam) 58%,#000) 100%);
  box-shadow:0 22px 46px -22px color-mix(in srgb,var(--lam) 80%,transparent),
             inset 0 1px 0 rgba(255,255,255,.25)}
#the-dat-don::before{content:"";position:absolute;inset:0;pointer-events:none;display:block;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);
  background-size:18px 18px;height:auto;border-radius:0;left:0;right:0;top:0;
  -webkit-mask:linear-gradient(160deg,#000 0%,transparent 60%);
  mask:linear-gradient(160deg,#000 0%,transparent 60%)}
#the-dat-don>*{position:relative;z-index:1}
/* chu */
#the-dat-don h2{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
#the-dat-don h2[class*="i-"]::before{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);box-shadow:none}
#the-dat-don h2[class*="i-"]::after{background:#fff}
#the-dat-don p.chu-thich,#the-dat-don .ghi-chu{color:rgba(255,255,255,.82)}
#the-dat-don p.chu-thich b,#the-dat-don .ghi-chu b{color:#fff}
#the-dat-don label,#the-dat-don .chon-nhanh-luot{color:rgba(255,255,255,.78)}
#the-dat-don a{color:#fff}
/* o nhap trang */
#the-dat-don input[type=text],#the-dat-don input[type=number],#the-dat-don select,
#the-dat-don textarea{background-color:#fff;color:#1f2a2a;border-color:transparent}
#the-dat-don input:focus,#the-dat-don select:focus,#the-dat-don textarea:focus{
  box-shadow:0 0 0 4px rgba(255,255,255,.35)}
#the-dat-don ::placeholder{color:#8a9696}
/* bang nhap ma */
#the-dat-don table,#the-dat-don th,#the-dat-don td{color:#fff;background:transparent!important}
#the-dat-don .bang-cuon{border-color:rgba(255,255,255,.2)}
#the-dat-don thead th{background:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.85)}
#the-dat-don tfoot th{color:#fff;border-top-color:rgba(255,255,255,.3)}
#the-dat-don button.xoa-dong{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
/* nut phu + chon nhanh: trong suot vien trang */
#the-dat-don .nut.phu,#the-dat-don .chon-nhanh-luot button{color:#fff;
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
#the-dat-don .nut.phu:hover,#the-dat-don .chon-nhanh-luot button:hover{background:rgba(255,255,255,.2)}
#the-dat-don .chon-nhanh-luot button.chon,#the-dat-don .chon-nhanh-luot button[aria-pressed="true"]{
  background:#fff;color:var(--lam);border-color:#fff}
/* nut tru/cong so luot */
#the-dat-don .luot-o button{background:rgba(255,255,255,.9);color:#1f2a2a;border-color:transparent}
/* nut Gui don: trang, chu xanh */
#the-dat-don #nut-dat{background:#fff;color:var(--lam);border:none;font-weight:700;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
#the-dat-don #nut-dat:hover{background:#f3fffd}
/* dong CTV/HOT: kinh mo tren nen xanh */
#the-dat-don .dong-ctv{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
#the-dat-don .dong-ctv b{color:var(--vang-kim)}
/* bao loi/thanh cong trong khung van doc duoc */
#the-dat-don .bao{color:#1f2a2a}

/* ===== v94 o "Dan ma su kien" de nhin hon (2026-10-19) ===== */
#the-dat-don #bang-nhap td input.ma,
#the-dat-don #bang-nhap td input.token{
  background:#fff;color:#14231d;border:2px solid color-mix(in srgb,var(--lam) 55%,#fff);
  border-radius:12px;padding:13px 14px;font-size:15px;font-weight:600;min-height:48px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
#the-dat-don #bang-nhap td input.ma::placeholder,
#the-dat-don #bang-nhap td input.token::placeholder{color:#5d6f67;font-weight:500;opacity:1}
#the-dat-don #bang-nhap td input.ma:focus,
#the-dat-don #bang-nhap td input.token:focus{outline:none;border-color:var(--lam);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lam) 22%,transparent)}
#the-dat-don .chon-nhanh-luot>span{color:rgba(255,255,255,.85);font-weight:600}
#the-dat-don #bang-nhap .xoa-dong{color:#6b7c75;background:#f1f4f2;border-radius:8px}
#the-dat-don #bang-nhap .xoa-dong:hover{color:#fff;background:var(--do)}
#the-dat-don .bang-nhap tfoot th{border:none!important;background:none}

/* ===== v95 o nhap ma + tieu de bang dep hon (2026-10-19) ===== */
#the-dat-don #bang-nhap td input.ma,
#the-dat-don #bang-nhap td input.token{font-family:inherit;letter-spacing:.2px;
  padding-left:40px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f7a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2M16 7l3 3M18 5l2 2'/%3E%3C/svg%3E") no-repeat 14px 50%}
#the-dat-don .bang-nhap thead th{background:rgba(255,255,255,.14);color:#fff;
  font-size:11.5px;letter-spacing:.8px;padding:10px 12px;border:none}
#the-dat-don .bang-nhap thead th:first-child{border-radius:10px 0 0 10px}
#the-dat-don .bang-nhap thead th:last-child{border-radius:0 10px 10px 0}

/* ===== v96 chu ten web dep hon (2026-10-19) =====
   Chakra Petch dau tieng Viet bi chong cheo -> Be Vietnam Pro nghieng 900, chu xanh bong nhu kim loai */
h1 .ten-chinh{font:italic 900 21px/1.1 "Be Vietnam Pro",var(--chu-thuong);letter-spacing:.005em}
h1 .ten-chu{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--lam) 55%,#0a1f17) 0%,
    color-mix(in srgb,var(--lam) 85%,#0a1f17) 48%,
    var(--lam) 52%,
    color-mix(in srgb,var(--lam) 70%,#7fe0b8) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))
         drop-shadow(0 3px 6px color-mix(in srgb,var(--lam) 28%,transparent));
  padding:1px 3px 1px 0}
h1 small{font:600 10.5px/1.2 "Be Vietnam Pro",var(--chu-thuong);letter-spacing:.2em;
  color:color-mix(in srgb,var(--chu) 55%,var(--the))}
h1 small b{font-weight:800;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(90deg,#d08a10,#f2b632 50%,#c47a06);
  -webkit-background-clip:text;background-clip:text}
@media(max-width:700px){ h1 .ten-chinh{font-size:17px} }
@media(max-width:360px){ h1 .ten-chinh{font-size:15px} }

/* ===== v97 the REG68 gon gang (2026-10-19) =====
   Anh thay the vat cheo + chu nghieng "cu the nao" -> thanh nhan bo tron, chu dung, vang kim phang */
h1 .ten-chinh em{
  display:inline-flex;align-items:center;gap:3px;
  font:800 11px/1 "Be Vietnam Pro",var(--chu-thuong);font-style:normal;letter-spacing:.06em;
  padding:5px 8px 5px 6px;border-radius:7px;clip-path:none;
  color:#4a2f00;-webkit-text-fill-color:#4a2f00;
  background:linear-gradient(180deg,#ffe28a 0%,#f7bd38 100%);
  border:1px solid #e0a325;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(215,150,20,.28);
  transform:translateY(-1px)}
h1 .ten-chinh em .ic-set-reg{width:11px;height:11px;fill:#c25b00;filter:none;animation:none}
h1 .ten-chinh em::after{display:none}
@media(max-width:700px){
  h1 .ten-chinh em{font-size:10px;padding:4px 7px 4px 5px;clip-path:none}
}
@media(min-width:701px){ h1 .ten-chinh em{font-size:12.5px;padding:5px 9px 5px 7px} h1 .ten-chinh em .ic-set-reg{width:12px;height:12px} }

/* ===== v98 REG68 kieu 2 (anh chon 2026-10-19): chu vang to lien ten, khong khung ===== */
h1 .ten-chinh{gap:7px}
h1 .ten-chinh em,
h1 .ten-chinh em:hover{font:italic 900 1em/1.1 "Be Vietnam Pro",var(--chu-thuong);letter-spacing:.005em;
  padding:1px 3px 1px 0;border:none;border-radius:0;clip-path:none;box-shadow:none;transform:none;
  background:linear-gradient(180deg,#ffd76a 0%,#f0a516 52%,#c97a00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 2px 5px rgba(201,122,0,.25));
  animation:none}
h1 .ten-chinh em .ic-set-reg,h1 .ten-chinh em::after{display:none}
@media(max-width:700px){ h1 .ten-chinh em{font-size:1em;padding:1px 3px 1px 0} }
@media(min-width:701px){ h1 .ten-chinh em{font-size:1em;padding:1px 3px 1px 0} }

/* ===== v99 ten web + REG68 sac net hon (2026-10-19) ===== */
h1 .ten-chinh em{
  background:linear-gradient(180deg,#fff1b8 0%,#ffd451 30%,#f5a812 55%,#d98600 72%,#ffcf4a 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.5px #b56d00;
  filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 6px rgba(214,140,0,.35))}
h1 .ten-chu{-webkit-text-stroke:.4px color-mix(in srgb,var(--lam) 60%,#06281c)}

/* ===== v100 nut Chon nhanh an la doi ngay (2026-10-19) =====
   anh bao "nhan vao bat cham": bo transition, bo hover dinh tren dien thoai, an xuong co phan hoi tuc thi */
.chon-nhanh-luot button{transition:none!important;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none}
.chon-nhanh-luot button:active{transform:scale(.94)}
@media(hover:none){
  .chon-nhanh-luot button:hover{transform:none}
  #the-dat-don .chon-nhanh-luot button:not(.chon):hover{background:rgba(255,255,255,.12)}
}
.luot-o button,#nut-them-dong,#nut-dan-nhieu,#nut-dat{touch-action:manipulation}

/* ===== v101 nut "Nap tien" canh so du o khung Dat don (2026-10-19) ===== */
a.nut-nap-nho{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  margin-left:2px;padding:5px 11px 5px 8px;border-radius:99px;text-decoration:none!important;
  font:700 12.5px/1 var(--chu-thuong);color:#4a2f00!important;
  background:linear-gradient(180deg,#ffe28a,#f5b52e);border:1px solid #e0a325;
  box-shadow:0 2px 8px rgba(0,0,0,.18);touch-action:manipulation}
a.nut-nap-nho svg{width:12px;height:12px;stroke:#4a2f00;stroke-width:2.4;stroke-linecap:round;fill:none}
a.nut-nap-nho:hover{background:linear-gradient(180deg,#fff0b3,#f7c048)}
a.nut-nap-nho:active{transform:scale(.95)}

/* ===== v102 lam dep tong the (2026-10-19) ===================================== */
/* --- 1. thanh tren cung dien thoai: hang 1 = Vi + Nap tien, hang 2 = thanh tab icon --- */
@media(max-width:700px){
  body:not(.chua-dn) .trang-thai{display:flex!important;flex-wrap:wrap;gap:6px;width:100%;margin:0}
  body:not(.chua-dn) .trang-thai::before{content:"";order:2;flex:0 0 100%;height:0}
  body:not(.chua-dn) .trang-thai #nut-vi,
  body:not(.chua-dn) .trang-thai #nut-nap-tien{order:1;flex:1 1 40%;margin:0;min-height:42px;
    font-size:14px;border-radius:12px;padding:8px 10px}
  body:not(.chua-dn) .trang-thai #nut-vi{background:color-mix(in srgb,var(--lam) 9%,var(--the));
    border:1px solid color-mix(in srgb,var(--lam) 30%,var(--vien))}
  body:not(.chua-dn) .trang-thai #nut-nap-tien{color:#4a2f00;border:1px solid #e0a325;
    background:linear-gradient(180deg,#ffe28a,#f5b52e);box-shadow:0 3px 10px -3px rgba(214,140,0,.55)}
  body:not(.chua-dn) .trang-thai #nut-nap-tien::before{background:#4a2f00}
  body:not(.chua-dn) .trang-thai #nut-ve-chu,
  body:not(.chua-dn) .trang-thai #nut-lich-su,
  body:not(.chua-dn) .trang-thai #nut-aff,
  body:not(.chua-dn) .trang-thai #ho-tro,
  body:not(.chua-dn) .trang-thai #nut-tk{order:3;flex:1 1 0;min-width:0;width:auto;grid-column:auto}
  body:not(.chua-dn) .trang-thai #nut-ve-chu,
  body:not(.chua-dn) .trang-thai #nut-lich-su,
  body:not(.chua-dn) .trang-thai #nut-aff,
  body:not(.chua-dn) .trang-thai #nut-tk,
  body:not(.chua-dn) .trang-thai #ho-tro>summary{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:7px 2px 6px;font-size:11px;font-weight:600;line-height:1.15;border-radius:12px;
    border:1px solid var(--vien);background:var(--the);color:var(--mo);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;min-height:50px}
  body:not(.chua-dn) .trang-thai #ho-tro>summary::after{display:none}
  body:not(.chua-dn) .trang-thai #nut-ve-chu::before,
  body:not(.chua-dn) .trang-thai #nut-lich-su::before,
  body:not(.chua-dn) .trang-thai #nut-aff::before,
  body:not(.chua-dn) .trang-thai #nut-tk::before,
  body:not(.chua-dn) .trang-thai #ho-tro>summary::before{width:18px;height:18px;margin:0}
  body:not(.chua-dn) .trang-thai #nut-tk{color:color-mix(in srgb,var(--do) 75%,var(--mo))}
}

/* --- 2. dong Vi + nut Gui don cuoi khung Dat don --- */
#the-dat-don #so-du-o-day{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:6px 6px 6px 12px;border-radius:99px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px}
#the-dat-don #so-du-o-day b{color:#ffe08a;font-size:14px}
#the-dat-don #nut-dat{min-height:46px;font-size:15.5px;letter-spacing:.01em;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
#the-dat-don #nut-dat:active{transform:scale(.98)}

/* --- 3. trang Nap tien --- */
#the-nap .o-nap-tt{background:var(--mo-nhe);border:1px solid var(--vien);border-radius:16px;
  padding:4px 16px}
#the-nap .o-nap-tt table.bang-doc tr{border-bottom:1px dashed var(--vien)}
#the-nap .o-nap-tt table.bang-doc tr:last-child{border-bottom:none}
#the-nap .o-nap-tt th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mo);font-weight:700;background:none;border:none}
#the-nap .o-nap-tt td{font-size:16px;font-weight:700;color:var(--chu);border:none}
#the-nap #nap-stk{font:700 19px var(--chu-so);letter-spacing:.06em}
#the-nap .o-nd{font-size:18px;padding:7px 14px;border-radius:10px;
  color:#7a4b00;background:linear-gradient(180deg,#fff6d6,#ffe59a);border:1.5px dashed #e0a325}
#the-nap .nut-chep-nho{color:#fff!important;background:var(--lam)!important;
  border-color:var(--lam)!important;border-radius:99px!important;padding:5px 12px!important;
  font-weight:700!important;touch-action:manipulation}
#the-nap .nut-chep-nho:active{transform:scale(.94)}
#the-nap #nut-da-chuyen{width:100%;min-height:48px;font-size:15.5px;border-radius:14px}
@media(max-width:700px){
  body:not(.chua-dn) .trang-thai #ho-tro>summary::before{display:block!important}
  body:not(.chua-dn) .trang-thai #nut-tk .tk-ten{display:none}
}
/* nut Nap tien tren thanh dau trang: vang kim o moi man, dong bo voi nut Nap tien trong khung Dat don */
.trang-thai #nut-nap-tien{color:#4a2f00;border:1px solid #e0a325;
  background:linear-gradient(180deg,#ffe28a,#f5b52e);box-shadow:0 3px 10px -4px rgba(214,140,0,.55)}
.trang-thai #nut-nap-tien:hover{background:linear-gradient(180deg,#fff0b3,#f7c048)}
.trang-thai #nut-nap-tien::before{background:#4a2f00}

/* ===== v103 nap tu dong: dong "Dang cho tien ve" (2026-10-19) ===== */
.cho-tien{display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px 14px;
  border-radius:12px;font-size:13px;font-weight:600;color:var(--lam);
  background:color-mix(in srgb,var(--lam) 8%,var(--the));
  border:1px solid color-mix(in srgb,var(--lam) 25%,var(--vien))}
.cham-cho{position:relative;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--lam)}
.cham-cho::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lam);
  animation:cham-cho 1.6s ease-out infinite}
@keyframes cham-cho{from{transform:scale(1);opacity:.6}to{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.cham-cho::after{animation:none}}
#the-nap #nut-da-chuyen{min-height:42px;font-size:14px}

/* ===== v104 trang Gioi thieu dep hon (2026-10-19): khung dau nen xanh nhu khung Dat don ===== */
#khung-aff .the-aff-dau{position:relative;overflow:hidden;color:#fff;border:none;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(80% 60% at 0% 100%,color-mix(in srgb,var(--lam) 45%,#000) 0%,transparent 70%),
    linear-gradient(150deg,color-mix(in srgb,var(--lam) 78%,#fff) 0%,var(--lam) 45%,
                    color-mix(in srgb,var(--lam) 58%,#000) 100%);
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--lam) 70%,transparent)}
#khung-aff .the-aff-dau::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:16px 16px}
#khung-aff .the-aff-dau>*{position:relative;z-index:1}
#khung-aff .the-aff-dau h2{color:#fff}
#khung-aff .the-aff-dau h2::before{background-color:rgba(255,255,255,.18)!important}
#khung-aff .the-aff-dau .chu-thich{color:rgba(255,255,255,.88)}
#khung-aff .the-aff-dau .chu-thich b{color:#ffe08a}
#khung-aff .the-aff-dau .lien-ket{background:#fff;border:none;border-radius:14px;padding:8px 8px 8px 14px;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.45)}
#aff-link{font:600 15px var(--chu-thuong);color:#14231d;word-break:break-all;line-height:1.35}
#aff-link .aff-goc{color:#6b7c75;font-weight:500}
#aff-link .aff-ten{color:var(--lam);font-weight:800;font-size:16px}
#khung-aff .the-aff-dau #nut-chep-aff{background:var(--lam);border-color:var(--lam);color:#fff;
  border-radius:11px;min-height:42px;padding:8px 16px;flex:0 0 auto;touch-action:manipulation}
#khung-aff .the-aff-dau #nut-chep-aff:active{transform:scale(.96)}
#khung-aff .the-aff-dau #aff-tam-dung{color:#5a3d00}
/* so du gioi thieu: o noi bat vang kim */
#khung-aff .dem .xong{background:linear-gradient(180deg,#fff6d6,#ffe9a6);
  border-color:#e8bd4a}
#khung-aff .dem .xong b{color:#8a5a00}
#khung-aff .dem .xong::after{background:#e0a325}

/* ===== v106 trang Nap tien dep nhat: 3 buoc + ma QR VietQR (2026-10-19) ===== */
#the-nap .buoc-nap{list-style:none;margin:4px 0 14px;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:8px}
#the-nap .buoc-nap li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;
  background:color-mix(in srgb,var(--lam) 7%,var(--the));
  border:1px solid color-mix(in srgb,var(--lam) 22%,var(--vien));font-size:12.5px;font-weight:600;
  color:var(--chu);line-height:1.3}
#the-nap .buoc-nap b{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--lam);color:#fff;font-size:12.5px}
#the-nap .nap-luoi{display:block}
#the-nap.co-qr .nap-luoi{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.qr-o{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 14px 14px;border-radius:18px;
  text-align:center;color:#fff;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.18),transparent 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--lam) 78%,#fff) 0%,var(--lam) 45%,
                    color-mix(in srgb,var(--lam) 58%,#000) 100%);
  box-shadow:0 16px 36px -18px color-mix(in srgb,var(--lam) 75%,transparent)}
.qr-khung{position:relative;width:100%;max-width:218px;aspect-ratio:1;padding:12px;border-radius:16px;background:#fff;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
/* 4 goc ngam kieu khung quet */
.qr-khung::before,.qr-khung::after{content:"";position:absolute;inset:5px;pointer-events:none;border-radius:12px;
  background:
    linear-gradient(var(--lam),var(--lam)) top left/22px 3px,linear-gradient(var(--lam),var(--lam)) top left/3px 22px,
    linear-gradient(var(--lam),var(--lam)) top right/22px 3px,linear-gradient(var(--lam),var(--lam)) top right/3px 22px,
    linear-gradient(var(--lam),var(--lam)) bottom left/22px 3px,linear-gradient(var(--lam),var(--lam)) bottom left/3px 22px,
    linear-gradient(var(--lam),var(--lam)) bottom right/22px 3px,linear-gradient(var(--lam),var(--lam)) bottom right/3px 22px;
  background-repeat:no-repeat}
.qr-khung::after{display:none}
#qr-nap,#qr-nap svg{display:block;width:100%;height:100%}
.qr-nh{font-weight:800;font-size:14px;letter-spacing:.01em}
.qr-chu{font-size:12px;line-height:1.45;color:rgba(255,255,255,.88)}
.qr-chu b{color:#ffe08a}
a.qr-luu{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.35)!important;color:#fff!important;
  border-radius:99px;padding:7px 14px;font-size:12.5px;text-decoration:none;touch-action:manipulation}
a.qr-luu:hover{background:rgba(255,255,255,.24)!important}
@media(max-width:700px){
  #the-nap .buoc-nap{grid-template-columns:1fr;gap:6px}
  #the-nap .buoc-nap li{padding:8px 10px}
  #the-nap.co-qr .nap-luoi{grid-template-columns:1fr;gap:12px}
  .qr-khung{max-width:230px}
}

/* ===== v108 menu Ho tro dep hon (2026-10-19) ===== */
.ho-tro .menu-ho-tro{min-width:270px;padding:10px;border-radius:18px;gap:7px;
  border:1px solid var(--vien);background:var(--the);
  box-shadow:0 22px 50px -18px rgba(30,40,35,.35),0 2px 6px rgba(30,40,35,.06)}
.menu-ho-tro .menu-tieu-de{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mo);padding:2px 6px 0}
.menu-ho-tro .menu-ctv-ghi{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:13px;
  font-size:12.5px;line-height:1.35;color:#5a3d00;border:1px solid #ecc76a;
  background:linear-gradient(135deg,#fff7dc,#ffe9a8)}
.menu-ho-tro .menu-ctv-ghi b{color:#8a5a00}
.menu-ho-tro .ctv-kc{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:#fff;box-shadow:0 2px 6px rgba(200,140,20,.25);font-size:15px}
.menu-ho-tro a.nut{display:flex!important;align-items:center;gap:11px;width:100%;
  padding:9px 12px 9px 9px!important;border-radius:14px!important;text-align:left;
  white-space:normal;line-height:1.25;touch-action:manipulation;transition:transform .1s,background .15s}
.menu-ho-tro a.nut:active{transform:scale(.98)}
.menu-ho-tro a.nut::before{content:"";flex:0 0 auto;width:34px!important;height:34px!important;border-radius:11px;
  -webkit-mask:none!important;mask:none!important;background-repeat:no-repeat!important;
  background-position:center!important;background-size:18px 18px!important}
.menu-ho-tro .lh-chu{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.menu-ho-tro .lh-chu b{font-size:14px;font-weight:800}
.menu-ho-tro .lh-chu small{font-size:12px;font-weight:500;opacity:.85}
.menu-ho-tro .lh-mt{flex:0 0 auto;font-size:20px;line-height:1;opacity:.6}
/* Zalo: xanh Zalo, o icon trang trong */
.menu-ho-tro a.nut.lh-zalo{background:linear-gradient(180deg,#1a7dff,#0062f0)!important;color:#fff!important;
  border:none!important;box-shadow:0 8px 18px -8px rgba(0,98,240,.7)!important}
.menu-ho-tro a.nut.lh-zalo::before{background-color:rgba(255,255,255,.2)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E")!important}
/* Facebook + Goi: the trang, o icon mau */
.menu-ho-tro a.nut.lh-fb,.menu-ho-tro a.nut.lh-goi{background:var(--the)!important;color:var(--chu)!important;
  border:1px solid var(--vien)!important}
.menu-ho-tro a.nut.lh-fb:hover,.menu-ho-tro a.nut.lh-goi:hover{
  border-color:color-mix(in srgb,var(--lam) 45%,var(--vien))!important;background:var(--mo-nhe)!important}
.menu-ho-tro a.nut.lh-fb::before{background-color:#e8f0ff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231877f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E")!important}
.menu-ho-tro a.nut.lh-goi::before{background-color:color-mix(in srgb,var(--lam) 12%,var(--the))!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")!important}
.menu-ho-tro a.nut.lh-goi .lh-chu small{font:700 13px var(--chu-so);letter-spacing:.03em;color:var(--lam);opacity:1}
.menu-ho-tro .menu-ghi-chu{font-size:12px;color:var(--mo);padding:0 6px}

/* ===== v109 menu Ho tro: dau xanh, nut to hon, o Zalo chu "Zalo" (2026-10-19) ===== */
.ho-tro .menu-ho-tro{min-width:290px;padding:0 0 10px;overflow:hidden;gap:8px}
.ho-tro .menu-ho-tro>*:not(.menu-dau-xanh){margin-left:10px;margin-right:10px;width:auto}
.menu-ho-tro .menu-dau-xanh{display:flex;align-items:center;gap:11px;padding:14px 14px 13px;color:#fff;
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(255,255,255,.2),transparent 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--lam) 78%,#fff),var(--lam) 50%,color-mix(in srgb,var(--lam) 62%,#000))}
.menu-ho-tro .mdx-ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:21px}
.menu-ho-tro .mdx-chu{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-ho-tro .mdx-chu b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.menu-ho-tro .mdx-chu small{font-size:12px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-ho-tro .menu-ctv-ghi{margin-top:2px}
.menu-ho-tro a.nut{min-height:58px;padding:10px 12px 10px 10px!important;border-radius:15px!important}
.menu-ho-tro a.nut::before{width:38px!important;height:38px!important;border-radius:12px}
.menu-ho-tro .lh-chu b{font-size:14.5px}
.menu-ho-tro a.nut .lh-mt{transition:transform .15s}
.menu-ho-tro a.nut:hover .lh-mt{transform:translateX(3px)}
/* o Zalo: chu "Zalo" xanh tren nen trang, giong logo */
.menu-ho-tro a.nut.lh-zalo::before{content:"Zalo";background:#fff!important;background-image:none!important;
  color:#0068ff;font:800 11.5px/38px var(--chu-thuong);text-align:center;letter-spacing:-.02em;
  box-shadow:0 2px 6px rgba(0,40,120,.25)}
.menu-ho-tro a.nut.lh-zalo:hover{background:linear-gradient(180deg,#3a90ff,#0a6cf5)!important}

/* khung API cho CTV: vi du goi API */
pre.api-vd{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-nho);
  padding:14px;overflow:auto;margin:0;font:12px/1.6 var(--chu-so);white-space:pre}
#khung-api code{font-family:var(--chu-so);font-size:.92em}

/* ===================================================== dai bao tri (v112) === */
/* admin bat o tab Giao dien; khach.js ve_bao_tri() bo .an */
.dai-bao-tri{display:flex;align-items:flex-start;gap:12px;max-width:1240px;
  margin:12px auto 0;padding:13px 16px;border-radius:var(--bo);
  width:calc(100% - 32px);box-sizing:border-box;
  color:var(--chu);font-size:14px;line-height:1.5;
  background:color-mix(in srgb,var(--vang) 16%,var(--the));
  border:1px solid color-mix(in srgb,var(--vang) 55%,transparent)}
.dai-bao-tri b{display:block;color:var(--vang);font-size:15px;font-weight:800}
.dai-bao-tri #bt-du-kien{font-weight:600}
.dai-bao-tri .bt-icon{flex:0 0 22px;height:22px;margin-top:1px;background:var(--vang);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19.3 13.6 10.2c.9-2.3.4-5-1.5-6.9C10.1 1.3 7 .9 4.6 2.1l4.3 4.3-3 3-4.4-4.3C.3 7.5.8 10.6 2.8 12.6c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.5-2.5c.4-.4.4-1 0-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19.3 13.6 10.2c.9-2.3.4-5-1.5-6.9C10.1 1.3 7 .9 4.6 2.1l4.3 4.3-3 3-4.4-4.3C.3 7.5.8 10.6 2.8 12.6c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.5-2.5c.4-.4.4-1 0-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
body.dang-bao-tri #nut-dat{opacity:.5}
@media (max-width:700px){.dai-bao-tri{width:calc(100% - 24px);margin-top:10px;font-size:13.5px}}

/* bang Ma gan nhat (2026-10-25) */
.bang-gan-day td{vertical-align:middle}
.bang-gan-day .tk{font-weight:700;letter-spacing:.2px}
.bang-gan-day td .td-chu{white-space:nowrap}
@media(max-width:700px){
  /* the dien thoai: dong 1 = ma + trang thai, dong 2 = thanh tien do, dong 3 = thoi gian */
  #bang-gan-day td{font-size:13px}
  #bang-gan-day td::before{display:none}
  #bang-gan-day td:nth-child(1){flex:1 1 auto;font-size:14.5px}
  #bang-gan-day td:nth-child(2){flex:0 0 auto}
  #bang-gan-day td.td-tien{flex:1 1 100%;min-width:0}
  #bang-gan-day td:nth-child(4){flex:1 1 100%;text-align:right}
}


/* Acc Khach (2026-10-25) */
#the-dat-don.ak-che-do > *:not(h2):not(#ak-tab):not(#ak-o):not(#cc-o){display:none !important}
.ak-tieu-de{font-size:15px;margin:22px 0 10px}
#ak-o textarea,#cc-o textarea{font-family:ui-monospace,Consolas,monospace;font-size:13px}


/* 6 nut chon hang muc: 2 cot gon ro, nhan vao muc nao moi hien thong tin muc do ben duoi (2026-10-26) */
.ak-tab{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 8px}
.ak-tab button.ak-tab-rong{grid-column:1 / -1}
.gd-tab{grid-template-columns:repeat(3,1fr)}
.ak-tab button{display:flex;align-items:center;justify-content:space-between;gap:6px;text-align:left;min-width:0;
  padding:8px 11px;border-radius:10px;cursor:pointer;font:inherit;color:inherit;
  background:color-mix(in srgb,currentColor 6%,transparent);
  border:2px solid color-mix(in srgb,currentColor 22%,transparent);transition:.15s}
.ak-tab.gd-tab button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.ak-tab button b{font-size:13.8px;font-weight:800;letter-spacing:.1px;line-height:1.2;min-width:0}
.ak-tab button span{font-size:12px;opacity:.78;line-height:1.3}
.ak-tab button:hover{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.ak-tab button.chon{background:#fff;color:#0f3d36;border-color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ak-tab button.chon b::before{content:"✓ ";color:#15803d}
.ak-tab button.chon span{opacity:.85}
.ak-tab button.dang-bt-muc{opacity:.78;border-style:dashed}
.ak-gia-nut.bt-nut{background:#ef4444!important;color:#fff!important}
/* gia Acc Admin / Acc Khach & Cong Cu (hien khi nhan vao muc do — mau vang 1 dong gon) */
#the-dat-don{padding:14px 16px}
#the-dat-don > h2{margin-bottom:4px;font-size:17px}
#the-dat-don .bao.vang{background:#fef3c7;color:#78350f;border:1px solid #f59e0b;padding:7px 11px;font-size:12.5px}
.ak-gia{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin:0 0 6px;padding:5px 12px;border-radius:10px;
  background:#facc15;color:#422006;font-size:13.5px;font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.16)}
.ak-gia b{font-size:16.5px;font-weight:900;color:#422006;white-space:nowrap}
.ak-gia small{font-size:12px;font-weight:600;color:#422006;opacity:.88}
.ak-gia-nut{font-style:normal;font-weight:800;font-size:11px;padding:2px 7px;border-radius:99px;
  background:#facc15;color:#422006;white-space:nowrap;flex:0 0 auto}
#the-dat-don td.tien,#the-dat-don #xt-tong-tien,#the-dat-don #ak-dem b,#the-dat-don #cc-dem b{color:#fde047}
@media(max-width:640px){
  #the-dat-don{padding:12px 12px}
  #the-dat-don > h2{font-size:16px;margin-bottom:3px}
  .ak-tab{grid-template-columns:1fr 1fr;gap:5px;margin:3px 0 6px}
  .gd-tab{grid-template-columns:1fr}
  .ak-tab button.ak-tab-rong{grid-column:auto}
  .ak-tab button{padding:7px 8px;gap:4px;border-radius:9px}
  .ak-tab button b{font-size:12px;line-height:1.2}
  .ak-gia-nut{font-size:10px;padding:1.5px 5.5px}
  .ak-gia{padding:4px 10px;font-size:12.5px;margin-bottom:5px}
  .ak-gia b{font-size:15px}
  .ak-gia small{font-size:11.5px}
  #the-dat-don table.bang-nhap tr{padding:8px;margin-bottom:6px;gap:6px 8px}
  #the-dat-don #bang-nhap td input.ma{min-height:42px;padding:9px 12px 9px 36px;font-size:14.5px}
  #the-dat-don .chon-nhanh-luot{gap:4px}
  #the-dat-don .chon-nhanh-luot button{padding:4px 8px;font-size:12px}
}

/* tab Acc Admin / Acc Khach trong bang "Ma dang chay & gan nhat" (the nen sang) */
.gd-tab{margin:4px 0 10px}
.gd-tab button{padding:10px 14px}
.gd-tab button b{font-size:15.5px}
.gd-tab button.chon{background:#0f3d36;color:#fff;border-color:#0f3d36}
.gd-tab button.chon b::before{color:#86efac}
#gd-cb-dem .cb-o-loc,.dem .cb-o-loc{transition:border-color .15s,box-shadow .15s}
#gd-cb-dem .cb-o-loc.chon,.dem .cb-o-loc.chon{border-color:var(--lam);box-shadow:0 0 0 2px color-mix(in srgb,var(--lam) 30%,transparent)}

/* nut chay bu Acc Khach */
button.ak-bu,button.nut.ak-bu{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:4px 10px;min-height:0;font-size:12px;line-height:1.2;border-radius:99px;background:#f59e0b;color:#1c1917;border:none;cursor:pointer;font-weight:700;vertical-align:middle}
button.ak-bu:hover,button.nut.ak-bu:hover{background:#fbbf24;opacity:1}



/* ===== v135 Bang thong bao trang chu + Khuyen mai nap tien (thu gon 1 dong 2026-10-26) ===== */
.the-thong-bao{position:relative;overflow:hidden;padding:10px 14px;margin-bottom:12px;border-radius:14px;
  border:1.5px solid color-mix(in srgb,var(--lam) 35%,var(--vien));
  background:
    radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--vang) 14%,transparent),transparent 60%),
    linear-gradient(135deg,color-mix(in srgb,var(--lam) 8%,var(--the)) 0%,var(--the) 100%);
  box-shadow:0 8px 20px -16px color-mix(in srgb,var(--lam) 45%,transparent)}
.tb-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tb-dau .tb-ic,.tb-ic-nho{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;
  font-size:14px;background:color-mix(in srgb,var(--lam) 14%,var(--the));
  border:1px solid color-mix(in srgb,var(--lam) 30%,var(--vien))}
.tb-dau h2{margin:0!important;padding:0!important;border:none!important;font-size:15px;font-weight:800;color:var(--chu)}
.tb-dau h2::before,.tb-dau h2::after{display:none!important}
.tb-km-nhan{margin-left:auto;flex:0 0 auto;white-space:nowrap;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:800;
  color:#4a2f00;background:linear-gradient(180deg,#ffe58f,#f5b52e);border:1px solid #e0a325}
.tb-noi-dung{display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.5;color:var(--chu)}
.tb-muc{display:flex;align-items:flex-start;gap:8px}
.tb-cham{flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-top:7px;background:var(--lam)}
.tb-km-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:8px;padding:8px 12px;border-radius:11px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vang) 16%,var(--the)),color-mix(in srgb,var(--lam) 10%,var(--the)));
  border:1px dashed color-mix(in srgb,var(--vang) 65%,var(--vien))}
.tb-noi-dung.an + .tb-km-dong{margin-top:0;padding:0;border:none;background:none}
.tb-km-trai{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.tb-km-tieu{font-size:13px;color:var(--chu);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.tb-km-tieu b{color:var(--lam)}
.tb-km-ghi{font-size:12px;color:var(--mo)}
.km-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;
  font-size:12px;font-weight:600;color:#4a2f00;background:#fef08a;border:1px solid #facc15}
.km-chip b{color:#b45309;font-weight:800}
button.nut.nut-km-nap{flex:0 0 auto;padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:800;min-height:0;
  color:#4a2f00;background:linear-gradient(180deg,#ffe28a,#f5b52e);border:1px solid #e0a325}
button.nut.nut-km-nap:hover{background:linear-gradient(180deg,#fff0b3,#f7c048);opacity:1}
.nhan-km-nut{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:99px;
  font-size:11px;font-weight:800;color:#fff;background:#dc2626;line-height:1.1}
.hop-km-nap{margin:4px 0 14px;padding:13px 16px;border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vang) 16%,var(--the)),color-mix(in srgb,var(--lam) 9%,var(--the)));
  border:1.5px dashed color-mix(in srgb,var(--vang) 65%,var(--vien))}
.hop-km-nap .hkn-dau{font-size:14px;color:var(--chu);margin-bottom:6px}
.hop-km-nap .hkn-dau b{color:var(--lam)}
.hop-km-nap .hkn-ds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.hop-km-nap .hkn-ghi{font-size:12.5px;color:var(--mo);margin-top:4px}


/* ===== v136 Thong bao noi (Popup modal giua man hinh) (2026-10-25) ===== */
.nen-tb-noi{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(9,13,22,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:tbn-mo .18s ease-out}
.nen-tb-noi.an{display:none!important}
@keyframes tbn-mo{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.khung-tb-noi{width:min(540px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;background:var(--the);color:var(--chu);
  border:1.5px solid color-mix(in srgb,var(--lam) 42%,var(--vien));
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset}
.tbn-dau{display:flex;align-items:center;gap:12px;padding:18px 20px 15px;
  border-bottom:1px solid var(--v91-vien);
  background:
    radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--vang) 18%,transparent),transparent 65%),
    linear-gradient(135deg,color-mix(in srgb,var(--lam) 12%,var(--the)),var(--the))}
.tbn-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:21px;background:color-mix(in srgb,var(--lam) 16%,var(--the));
  border:1px solid color-mix(in srgb,var(--lam) 35%,var(--vien))}
.tbn-dau-chu{min-width:0;flex:1 1 auto}
.tbn-dau-chu small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--lam);margin-bottom:2px}
.tbn-dau-chu h3{margin:0;font-size:17.5px;font-weight:800;line-height:1.25;color:var(--chu)}
.tbn-x{flex:0 0 auto;width:32px;height:32px;border-radius:99px;border:1px solid var(--v91-vien);
  background:var(--v91-nen-o);color:var(--mo);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.tbn-x:hover{color:var(--chu);border-color:color-mix(in srgb,var(--chu) 35%,var(--vien))}
.tbn-than{padding:18px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.tbn-than .tb-noi-dung{font-size:14.5px;gap:9px}
.tbn-than .tb-muc{padding:8px 12px;border-radius:11px;background:var(--v91-nen-o);
  border:1px solid var(--v91-vien)}
.tbn-than .tb-km-dong{margin-top:0}
.tbn-chan{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px 20px;
  border-top:1px solid var(--v91-vien);background:var(--v91-nen-o)}
.tbn-chan button.nut{padding:9px 18px;font-size:13.5px;border-radius:11px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;min-height:40px}
@media(max-width:520px){
  .the-thong-bao{padding:16px}
  .the-thong-bao .tb-km-nhan{margin-left:0}
  .tb-km-dong button.nut.nut-km-nap{width:100%;display:inline-flex;align-items:center;justify-content:center}
  #tbn-km-nhan{display:none!important}
  .tbn-dau{padding:15px 16px 13px;gap:10px}
  .tbn-dau-chu h3{font-size:16.5px}
  .tbn-than{padding:14px 15px;gap:12px}
  .tbn-than .tb-noi-dung{font-size:13.8px;gap:8px}
  .tbn-chan{padding:12px 15px;justify-content:space-between;gap:8px}
  .tbn-chan button.nut{flex:1 1 0;padding:10px 8px;font-size:13px;min-height:42px}
}


/* ===== v137 Link Tang Don Mien Phi (2026-10-25) ===== */
.khung-tang-don .td-ic-qua{background:linear-gradient(135deg,#fef08a,#f59e0b);border-color:#d97706}
.td-thong-so{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.td-ts-o{padding:11px 12px;border-radius:13px;background:var(--v91-nen-o);border:1px solid var(--v91-vien);
  display:flex;flex-direction:column;gap:3px;text-align:center}
.td-ts-o small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mo)}
.td-ts-o b{font-size:15px;font-weight:800;color:var(--chu)}
.td-ds-nhan{display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;
  padding:9px 12px;border-radius:12px;background:var(--v91-nen-o);border:1px solid var(--v91-vien)}
.td-dong-nhan{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
@media(max-width:520px){
  .td-thong-so{gap:7px}
  .td-ts-o{padding:9px 8px}
  .td-ts-o b{font-size:13.5px}
}


/* ===== v187: nut Dung chay / Them acc / Xoa acc dep hon ===== */
#ak-dung-chay, #cc-dung-chay, #admin-dung-chay, #gd-dung-chay,
#ls-cc-dung-chay, #ls-admin-dung-chay, .nut-dung-don {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 55%, #be123c 100%) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#ak-dung-chay:hover, #cc-dung-chay:hover, #admin-dung-chay:hover, #gd-dung-chay:hover,
#ls-cc-dung-chay:hover, #ls-admin-dung-chay:hover, .nut-dung-don:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(225, 29, 72, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
#ak-dung-chay:active, #cc-dung-chay:active, #admin-dung-chay:active, #gd-dung-chay:active,
#ls-cc-dung-chay:active, #ls-admin-dung-chay:active, .nut-dung-don:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(225, 29, 72, .35);
}
#ak-dung-chay:disabled, #cc-dung-chay:disabled, #admin-dung-chay:disabled, #gd-dung-chay:disabled,
#ls-cc-dung-chay:disabled, #ls-admin-dung-chay:disabled, .nut-dung-don:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

#ak-them-acc, #ak-nut-mo-them {
  color: #fff !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, filter .15s ease;
}
#ak-them-acc:hover, #ak-nut-mo-them:hover { transform: translateY(-1px); filter: brightness(1.08); }

#ak-xoa-acc, #ak-xoa-acc-dau, #cc-xoa-acc {
  color: #fda4af !important;
  font-weight: 700 !important;
  background: rgba(244, 63, 94, .08) !important;
  border: 1px solid rgba(244, 63, 94, .45) !important;
  border-radius: 999px !important;
  transition: background .15s ease, color .15s ease;
}
#ak-xoa-acc:hover, #ak-xoa-acc-dau:hover, #cc-xoa-acc:hover {
  color: #fff !important;
  background: rgba(244, 63, 94, .85) !important;
}

#ak-hop-them-acc {
  border: 1px dashed rgba(16, 185, 129, .55) !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, .09), rgba(16, 185, 129, .03)) !important;
  border-radius: 14px !important;
}

/* ===== v187: hop thong bao trong o Dat don de doc hon ===== */
#the-dat-don .bao.xanh, #cc-xong.bao, #ak-xong.bao {
  background: #ecfdf5 !important;
  color: #064e3b !important;
  border: 1px solid #10b981 !important;
  border-left: 5px solid #10b981 !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .18);
}
#the-dat-don .bao.xanh b { color: #047857 !important; }
#the-dat-don .bao.xanh a { color: #047857 !important; text-decoration: underline; }
#the-dat-don .bao.do {
  background: #fff1f2 !important;
  color: #881337 !important;
  border: 1px solid #f43f5e !important;
  border-left: 5px solid #f43f5e !important;
  font-size: 14px !important;
  font-weight: 500;
}
#the-dat-don .bao.do b { color: #be123c !important; }
#ak-acc-bao {
  background: #f0fdfa;
  color: #134e4a !important;
  border: 1px solid #5eead4;
  border-radius: 10px;
  padding: 7px 11px;
  margin-top: 6px;
  font-size: 13px;
}
#ak-acc-bao b { color: #0f766e; }

/* ===== v189: nut Chay lai ===== */
.nut-chay-lai {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.nut-chay-lai:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(37, 99, 235, .5);
}
.nut-chay-lai:disabled { opacity: .65; cursor: wait; transform: none; }
.nut-chay-lai-don { padding: 2px 9px !important; font-size: 11.5px !important; margin-left: 4px; }

/* 2026-11-03: Trang chu chia 2 cot — Dat don (trai) + Tien do Ma dang chay & gan nhat (phai) */
#chu-hai-cot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:16px;align-items:start}
#chu-hai-cot>#cho-dat-chu,#chu-hai-cot>#chu-cot-phai{min-width:0}
#chu-hai-cot .the{margin-bottom:14px}
#chu-cot-phai{position:sticky;top:74px;max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain}
#chu-cot-phai .bang-cuon,#chu-cot-phai table{max-width:100%}
@media(max-width:860px){
  #chu-hai-cot,#chu-cot-phai{display:contents}
}
/* 2026-11-03b: Trang chu rong ra cho can doi (giong man xem don) */
@media(min-width:861px){
  main:has(#khung-chu:not(.an)){max-width:1560px;padding-left:28px;padding-right:28px}
  #chu-hai-cot{grid-template-columns:minmax(420px,0.9fr) minmax(0,1.25fr);gap:20px}
}
@media(min-width:1600px){
  main:has(#khung-chu:not(.an)){max-width:1760px}
}