/* Sanh Sam Loc — cung bo mau voi man ban (ban.css): nen toi, ni xanh, vang. */
:root{
  --bg:#0c1611; --surface:#16241c; --surface-2:#1f3127; --surface-3:#28402f;
  --felt:#1a4d2e; --felt-light:#23683f;
  --gold:#d4af37; --gold-dark:#a8862a; --on-gold:#1a1408;
  --text:#f4f1e8; --muted:#a8b5ac; --line:rgba(255,255,255,.1);
  --danger:#e5484d; --success:#3ccf73;
  --font:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;}
html{color-scheme:dark;}
[hidden]{display:none !important;}
body{margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--bg);
  background-image: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(35,104,63,.55) 0%, transparent 60%),
                    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(212,175,55,.06) 0%, transparent 70%);
  background-attachment:fixed; -webkit-tap-highlight-color:transparent;}
button{font-family:inherit; cursor:pointer; border:none;}
button:focus-visible, input:focus-visible, summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* dau trang */
.dau-trang{max-width:1080px; margin:0 auto; padding:18px 16px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.logo{display:flex; align-items:center; gap:10px;}
.o-logo{width:38px; height:38px; border-radius:10px; background:linear-gradient(145deg,#e6c55a,var(--gold-dark)); color:var(--on-gold);
  display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 6px 16px rgba(212,175,55,.25);}
.chu-logo{font-size:22px; font-weight:800; letter-spacing:-.01em;}
.ban-than{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:22px; padding:4px;}
.anh-nho{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex:none;}
.ten-toi{font-size:14px; font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nut-thoat{height:32px; padding:0 12px; border-radius:16px; background:rgba(255,255,255,.08); color:var(--muted); font-size:12px; font-weight:600;}
.nut-thoat:hover{color:var(--text);}

/* bang cam ca cuoc */
.cam{max-width:1048px; margin:4px auto 14px; display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:14px;
  background:linear-gradient(90deg, rgba(229,72,77,.18), rgba(229,72,77,.06)); border:1px solid rgba(229,72,77,.45); font-size:14px; line-height:1.5;}
.cam b{color:#ffb4b1;}
.bieu-cam{font-size:22px; flex:none;}
@media (max-width:1080px){ .cam{margin-left:16px; margin-right:16px;} }

/* khung */
.khung{max-width:1080px; margin:0 auto; padding:0 16px 40px;}
.luoi{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start;}
@media (max-width:820px){ .luoi{grid-template-columns:1fr;} }
.cot-trai,.cot-phai{display:flex; flex-direction:column; gap:16px; min-width:0;}
.the{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.the h2{margin:0 0 12px; font-size:15px; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; gap:8px;}
.mo{color:var(--muted); font-size:13px; margin:6px 0 0;}
.loi{color:#f87171; font-size:13px; min-height:1em; margin-top:8px;}
.loi:empty{display:none;}

/* the vao choi */
.the-choi{background: radial-gradient(ellipse 120% 90% at 85% 0%, var(--felt-light) 0%, var(--felt) 45%, #123a22 100%);
  border-color:rgba(212,175,55,.3); padding:22px; position:relative; overflow:hidden;}
.the-choi::after{content:""; position:absolute; inset:8px; border-radius:12px; border:1px solid rgba(255,255,255,.06); pointer-events:none;}
.choi-dau{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px;}
.nho-vang{font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase;}
.the-choi h1,.the-dang-nhap h1{margin:2px 0 0; font-size:30px; font-weight:800; letter-spacing:-.02em;}

.quat{position:relative; width:118px; height:86px; flex:none;}
.la-to{position:absolute; bottom:0; left:32px; width:54px; height:76px; border-radius:7px; background:#fffefb; color:#17181c;
  font-weight:800; font-size:18px; padding:5px 6px; line-height:1; box-shadow:0 6px 14px rgba(0,0,0,.4); transform-origin:50% 120%;}
.la-to i{display:block; font-style:normal; font-size:15px;}
.la-to.do{color:#d0142c;}
.la-to:nth-child(1){transform:rotate(-16deg);}
.la-to:nth-child(2){transform:rotate(0deg) translateY(-4px);}
.la-to:nth-child(3){transform:rotate(16deg);}

.muc-may{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; font-size:13px; font-weight:600; color:rgba(244,241,232,.8);}
.nhom-muc{display:inline-flex; background:rgba(0,0,0,.3); border-radius:12px; padding:3px; gap:2px;}
.chon-muc{height:34px; padding:0 14px; border-radius:9px; font-size:13px; font-weight:700; background:transparent; color:var(--muted);}
.chon-muc.bat{background:var(--gold); color:var(--on-gold); box-shadow:0 2px 8px rgba(0,0,0,.3);}

.hai-cua{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:520px){ .hai-cua{grid-template-columns:1fr;} }
.cua{display:flex; align-items:center; gap:12px; text-align:left; padding:14px; min-height:74px; border-radius:14px;
  background:rgba(0,0,0,.28); color:var(--text); border:1px solid rgba(255,255,255,.1); transition:transform .15s, background .15s;}
.cua:hover{background:rgba(0,0,0,.38); transform:translateY(-1px);}
.cua:active{transform:translateY(0);}
.cua:disabled{opacity:.5; cursor:wait;}
.cua-vang{background:linear-gradient(145deg,#e6c55a,var(--gold)); color:var(--on-gold); border-color:transparent; box-shadow:0 8px 20px rgba(212,175,55,.3);}
.cua-vang:hover{background:linear-gradient(145deg,#edd06a,#dcb843);}
.bieu-cua{font-size:28px; line-height:1; flex:none;}
.chu-cua{display:flex; flex-direction:column; gap:2px;}
.chu-cua b{font-size:15px; font-weight:800;}
.chu-cua small{font-size:12px; opacity:.75; font-weight:500;}

/* danh sach ban */
.ds-ban{display:flex; flex-direction:column; gap:8px;}
.dong-ban{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:12px;
  background:var(--surface-2); cursor:pointer; transition:background .15s;}
.dong-ban:hover{background:var(--surface-3);}
.dong-ban .ai{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dong-ban .mo{margin:2px 0 0; font-size:12px;}
.dong-ban > div{min-width:0;}
.nhan{flex:none; font-size:11px; font-weight:700; padding:4px 10px; border-radius:10px;}
.nhan-choi{background:rgba(60,207,115,.16); color:var(--success);}
.nhan-cho{background:rgba(212,175,55,.16); color:var(--gold);}

/* online */
.so-onl{font-size:12px; font-weight:700; color:var(--success); background:rgba(60,207,115,.14); padding:2px 8px; border-radius:10px;}
.so-onl:empty{display:none;}
.ds-onl{display:flex; flex-direction:column; gap:6px; max-height:360px; overflow:auto;}
.dong-onl{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--surface-2);}
.dong-onl.vao{cursor:pointer;} .dong-onl.vao:hover{background:var(--surface-3);}
.dong-onl .anh-nho{position:relative;}
.dong-onl .anh-nho::after{content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
  background:var(--success); border:2px solid var(--surface-2);}
.dong-onl .giua{flex:1; min-width:0;}
.dong-onl .ten{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dong-onl .tt{font-size:12px; color:var(--muted);}

/* luat */
.luat-the summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.luat-the summary::-webkit-details-marker{display:none;}
.luat-the summary::after{content:"▾"; color:var(--muted); transition:transform .2s;}
.luat-the[open] summary::after{transform:rotate(180deg);}
.luat-the summary h2{margin:0;}
.luat{margin:12px 0 0; padding-left:18px; font-size:13px; line-height:1.6; color:var(--muted);}
.luat b{color:var(--text);}

/* dang nhap */
.the-dang-nhap{max-width:400px; margin:20px auto; padding:26px;}
.the-dang-nhap .quat{margin:0 auto 10px;}
.the-dang-nhap h1{text-align:center;}
.the-dang-nhap > .mo{text-align:center; margin-bottom:16px;}
label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin:12px 0 6px;}
input{width:100%; height:46px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text);
  padding:0 14px; font-size:16px; font-family:inherit;}
input:focus{outline:2px solid var(--gold); border-color:transparent;}
.nut-chinh{height:48px; border-radius:12px; background:var(--gold); color:var(--on-gold); font-weight:800; font-size:15px; padding:0 18px;}
.nut-chinh:hover{background:#e0bd4a;}
.nut-chinh:disabled{opacity:.5;}
.nut-phu{height:48px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--text); font-weight:700; font-size:14px; padding:0 16px;}
.rong-het{width:100%; margin-top:18px;}

/* loi moi */
.thong-moi-sanh{display:flex; flex-direction:column; gap:8px;}
.thong-moi-sanh:empty{display:none;}
.the-moi-sanh{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 14px; border-radius:14px; border:1.5px solid var(--gold);
  background:rgba(212,175,55,.1); animation:hien .25s ease-out;}
.the-moi-sanh .chu{flex:1 1 180px; font-size:14px;}
.the-moi-sanh .chu b{color:var(--gold);}
.the-moi-sanh button{height:38px; font-size:13px;}
@keyframes hien{from{opacity:0; transform:translateY(-6px);}}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }