/* VKDM V10-01 — trang tài khoản người chơi (/account). CSS chép theo VLH5 (C:\VLTKH5RE\h5server\web\login_public.html, account.html, security.html):
   bảng màu đỏ máu, tiêu đề Charm vàng kim, thẻ góc viền, tab viên trượt. body.pg-login = trang đăng nhập / quên mật khẩu; body.pg-acc = tài khoản / bảo mật. */
:root{--b200:#f5bcbc;--b300:#e98f8f;--b400:#d45e5e;--b500:#b93636;--b600:#9c2828;--b700:#8a2020;--b800:#6b1818;--b900:#4a0c0c;--b950:#2e0606;
  --ink:#15110a;--text:#fff0f0;--muted:#d9b4b0;--line:rgba(233,143,143,.3);--edge:#c85a5a;--ok:#7be0a5;--warn:#ffd28a;--gold:#ffd27a;--gold2:#e0a63a;--err:#ffb3a8}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);overflow-x:hidden}
html,body{margin:0;min-height:100%;color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{min-height:100vh;position:relative;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-2;background:#2b1010 url(/account/static/bg.jpg) center 38%/cover no-repeat;filter:saturate(.8)}
.shade{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,6,6,.82),rgba(21,6,6,.92))}
.svgdefs{position:absolute;width:0;height:0}

/* ================================================================= trang đăng nhập / quên mật khẩu (login_public.html) */
.pg-login{--line:rgba(233,143,143,.35)}
body.pg-login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.pg-login .bg{filter:none;transform:scale(1.04);animation:drift 40s ease-in-out infinite alternate}
@media (max-width:700px){.pg-login .bg{background-position:50% 30%}}
.pg-login .shade{background:radial-gradient(ellipse at 50% 48%,rgba(46,6,6,.25) 0%,rgba(46,6,6,.45) 55%,rgba(21,6,6,.8) 100%),linear-gradient(180deg,rgba(46,6,6,.15) 0%,rgba(46,6,6,.25) 60%,rgba(21,6,6,.65) 100%)}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}}

.brand{text-align:center;margin-bottom:18px;text-shadow:0 2px 14px rgba(0,0,0,.6);position:relative;padding:6px 28px}
.brand::before{content:"";position:absolute;inset:-18px -40px;z-index:-1;background:radial-gradient(ellipse at center,rgba(30,4,4,.75) 0%,rgba(30,4,4,.45) 45%,rgba(30,4,4,0) 72%);pointer-events:none}
.brand h1{position:relative;margin:0;font-family:"Charm","Noto Serif","Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:700;letter-spacing:.5px;line-height:1.3;padding:.08em .2em .32em;margin-bottom:-.06em;
  font-size:clamp(28px,7.6vw,68px);white-space:nowrap;text-shadow:none;color:transparent;filter:url(#bold-l)}
.brand h1::before,.brand h1::after{content:attr(data-t);position:absolute;inset:0;padding:inherit;pointer-events:none}
.brand h1::before{color:#3b0a04;-webkit-text-stroke:.09em #2a0502;text-shadow:0 0 .1em #ff9a3c,0 0 .42em rgba(255,110,30,.6),0 .08em .18em rgba(0,0,0,.85)}
.brand h1::after{color:transparent;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.9) 50%,transparent 56%) no-repeat,linear-gradient(180deg,#fffbe8 0%,#ffeaa6 20%,#f9cd6a 40%,#e39a2c 55%,#f6cf72 70%,#c06d14 88%,#8a4208 100%);background-size:300% 100%,100% 100%;background-position:100% 0,0 0;-webkit-background-clip:text;background-clip:text;animation:tp-shine 5s ease-in-out 1s infinite}
@keyframes tp-shine{0%{background-position:100% 0,0 0}40%,100%{background-position:0 0,0 0}}
@media (max-width:819px){.brand h1{filter:url(#bold-m)}}
@media (max-width:520px){.brand h1{filter:url(#bold-s)}.brand h1::before{text-shadow:0 0 .1em #ff9a3c,0 0 .3em rgba(255,110,30,.55),0 .06em .14em rgba(0,0,0,.85)}}
.brand .sub{position:relative;margin-top:-2px;display:inline-flex;align-items:center;gap:12px;color:#ffe3a0;font-family:"Charm",Georgia,serif;font-weight:700;letter-spacing:3px;font-size:30px;line-height:1;text-shadow:0 0 1px #2a0502,0 0 2px #2a0502,0 0 8px rgba(255,140,40,.7),0 2px 3px rgba(0,0,0,.85);filter:url(#bold-s)}
.brand .sub::before,.brand .sub::after{content:"";width:58px;height:7px;background:radial-gradient(circle at calc(100% - 3.5px) 50%,#fff6d0 0 2.6px,transparent 3.2px),linear-gradient(90deg,transparent,#e9b450 60%,#fff0b8) center/100% 2px no-repeat}
.brand .sub::after{transform:scaleX(-1)}
.brand .embers{position:absolute;left:6%;right:6%;top:0;bottom:0;pointer-events:none;z-index:1}
.brand .embers i{position:absolute;bottom:22%;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#fffbe6 0,#ffd060 38%,#ff8a1e 60%,rgba(255,110,20,0) 74%);box-shadow:0 0 8px 3px rgba(255,150,40,.6),0 0 2px 1px rgba(255,240,200,.8);opacity:0;animation:ember 5.2s linear infinite}
.brand .embers i:nth-child(1){left:4%;animation-delay:-.4s;--dx:14px}.brand .embers i:nth-child(2){left:13%;animation-delay:-2.9s;animation-duration:6.1s;--dx:-10px}
.brand .embers i:nth-child(3){left:22%;animation-delay:-1.6s;width:5px;height:5px;--dx:8px}.brand .embers i:nth-child(4){left:31%;animation-delay:-4.1s;animation-duration:4.6s;--dx:-16px}
.brand .embers i:nth-child(5){left:40%;animation-delay:-.9s;animation-duration:5.8s;width:6px;height:6px;--dx:18px}.brand .embers i:nth-child(6){left:49%;animation-delay:-3.4s;--dx:-6px}
.brand .embers i:nth-child(7){left:57%;animation-delay:-2.2s;animation-duration:6.4s;width:5px;height:5px;--dx:12px}.brand .embers i:nth-child(8){left:65%;animation-delay:-4.7s;animation-duration:4.9s;--dx:-14px}
.brand .embers i:nth-child(9){left:73%;animation-delay:-1.2s;width:9px;height:9px;--dx:10px}.brand .embers i:nth-child(10){left:81%;animation-delay:-3.8s;animation-duration:5.6s;--dx:-12px}
.brand .embers i:nth-child(11){left:89%;animation-delay:-2.6s;animation-duration:4.8s;width:6px;height:6px;--dx:16px}.brand .embers i:nth-child(12){left:96%;animation-delay:-.1s;animation-duration:6.2s;width:5px;height:5px;--dx:-8px}
@keyframes ember{0%{transform:translate3d(0,0,0) scale(calc(var(--s,1)*.7));opacity:0}10%{opacity:1}60%{opacity:.8}100%{transform:translate3d(var(--dx,10px),var(--up,-150px),0) scale(calc(var(--s,1)*.25));opacity:0}}
@media (min-width:820px){.brand .embers i{--s:1.6;--up:-210px}}

.pg-login .card{width:min(420px,100%);position:relative;padding:26px 26px 20px;border-radius:16px;background:linear-gradient(180deg,rgba(58,12,12,.8),rgba(26,8,8,.9));
  border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,200,200,.1);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.pg-login .card::before,.pg-login .card::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--edge);opacity:.85}
.pg-login .card::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:16px}
.pg-login .card::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:16px}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:18px;background:rgba(0,0,0,.35);border:1px solid rgba(233,143,143,.18);border-radius:10px}
.tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:7px;background:linear-gradient(135deg,var(--b500) 0%,var(--b700) 55%,var(--b900) 100%);box-shadow:inset 0 1px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s}
.tabs.reg::before{transform:translateX(calc(100% + 4px))}.tabs.none::before{opacity:0}
.tabs button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font:inherit;font-weight:600;padding:9px 6px;border-radius:7px;cursor:pointer;transition:color .25s,background .25s}
.tabs button:hover{color:#fff0f0;background:rgba(233,143,143,.1)}
.tabs button[aria-selected=true]{color:#fff0f0}.tabs button[aria-selected=true]:hover{background:none}
.tabs button:focus-visible{outline:2px solid var(--b300);outline-offset:2px}
.pg-login form{display:none}.pg-login form.on{display:block;animation:fin .32s cubic-bezier(.4,0,.2,1)}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pg-login .card.sizing{overflow:hidden;transition:height .32s cubic-bezier(.4,0,.2,1)}
h2.ft{margin:0 0 6px;font-size:17px;color:var(--b200)}
.lead{margin:0 0 14px;font-size:13px;color:var(--muted)}
.pg-login .field{margin-bottom:13px}
.pg-login .field label{align-items:baseline;margin-bottom:6px}
.pg-login .field label small{text-align:right}
.input{position:relative}
.input input{width:100%;padding:11px 14px;font:inherit;color:var(--text);background:rgba(15,4,4,.6);border:1px solid rgba(233,143,143,.28);border-radius:9px;outline:none;transition:border-color .2s,box-shadow .2s}
.input input::placeholder{color:rgba(217,180,176,.55)}
.input input:focus{border-color:var(--b300);box-shadow:0 0 0 3px rgba(233,143,143,.2)}
.input input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 40px #240909 inset;caret-color:var(--text)}
.input.pw input{padding-right:46px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:6px;display:grid;place-items:center;padding:0}
.eye:hover{color:var(--b200)}.eye:focus-visible{outline:2px solid var(--b300)}
.eye svg{width:19px;height:19px}
.pg-login .note{display:flex;gap:8px;margin:-2px 0 12px;line-height:1.45}
.pg-login .note::before{content:"🔒";flex:none}
.pg-login .btn{width:100%;margin-top:6px;padding:13px;font-size:16px;letter-spacing:.5px;
  box-shadow:inset 0 1px rgba(255,255,255,.35),inset 0 -2px 6px rgba(74,12,12,.35),0 6px 18px rgba(180,20,20,.3);transition:transform .15s,box-shadow .2s,filter .2s}
.pg-login .btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:inset 0 1px rgba(255,255,255,.4),0 10px 26px rgba(212,68,58,.5)}
.pg-login .btn:active{transform:translateY(1px);filter:brightness(.97)}.pg-login .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-login .btn[disabled]{opacity:.7;cursor:wait}
.msg{display:flex;gap:8px;align-items:flex-start;background:rgba(120,18,18,.6);border:1px solid rgba(255,140,120,.5);color:#ffe2d9;padding:10px 12px;border-radius:9px;margin-bottom:14px;font-size:13.5px}
.msg::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#e2563e;color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:1px}
.msg.ok{background:rgba(20,90,50,.55);border-color:rgba(120,220,160,.5);color:#dcffe9}.msg.ok::before{content:"✓";background:#2f9e5e}
.msg.warn{background:rgba(120,70,10,.55);border-color:rgba(255,210,138,.5);color:#ffeccc}.msg.warn::before{background:#c98a1e}
.hint{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.hint button,.lnk{border:0;background:none;color:var(--b300);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.hint button:hover,.lnk:hover{color:#fff0f0}
.row-r{display:flex;justify-content:flex-end;margin:-6px 0 10px}.row-r .lnk{font-size:12.5px}
footer{margin-top:16px;font-size:12px;color:rgba(255,240,240,.9);text-align:center;padding:5px 14px;border-radius:999px;background:rgba(30,6,6,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.petals{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.petals i{position:absolute;top:-6%;width:12px;height:9px;background:radial-gradient(circle at 30% 30%,#ffd6dc,#e0606e 70%);border-radius:70% 0 70% 0;opacity:.8;animation:fall linear infinite}
.petals i:nth-child(1){left:8%;animation-duration:14s;animation-delay:-2s}.petals i:nth-child(2){left:22%;animation-duration:17s;animation-delay:-9s;transform:scale(.8)}
.petals i:nth-child(3){left:39%;animation-duration:13s;animation-delay:-5s}.petals i:nth-child(4){left:57%;animation-duration:19s;animation-delay:-12s;transform:scale(1.2)}
.petals i:nth-child(5){left:71%;animation-duration:15s;animation-delay:-1s}.petals i:nth-child(6){left:84%;animation-duration:18s;animation-delay:-7s;transform:scale(.7)}
.petals i:nth-child(7){left:93%;animation-duration:16s;animation-delay:-14s}
@keyframes fall{0%{transform:translate3d(0,-5vh,0) rotate(0)}50%{transform:translate3d(-6vw,50vh,0) rotate(200deg)}100%{transform:translate3d(4vw,110vh,0) rotate(420deg)}}
@media (prefers-reduced-motion:reduce){.pg-login .bg,.petals i,.pg-login form.on{animation:none}.petals{display:none}.tabs::before,.pg-login .card.sizing{transition:none}}
@media (max-width:420px){.pg-login .card{padding:22px 18px 18px}.brand{padding:6px 4px}.brand .sub{letter-spacing:2px;font-size:24px}}
@media (max-height:760px){body.pg-login{justify-content:flex-start}.brand{margin-bottom:12px}}

/* ================================================================= trang tài khoản / bảo mật (account.html, security.html) */
header.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(135deg,rgba(138,32,32,.92),rgba(46,6,6,.95));border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.4)}
header.top .logo{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none}
header.top .logo img{flex:0 0 auto;height:44px;width:auto;border-radius:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
header.top .logo span{font-family:"Charm","Noto Serif","Palatino Linotype",Georgia,serif;font-weight:700;font-size:26px;line-height:1.2;padding:0 .1em;text-decoration:none;background:linear-gradient(180deg,#fff0f0,var(--b200) 30%,var(--b400));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
header.top .sp{flex:1}
header.top .who{font-size:13px;color:var(--muted)}header.top .who b{color:var(--text)}
a.hbtn,button.hbtn{display:inline-flex;align-items:center;padding:7px 14px;border-radius:8px;font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;color:#fff0f0;border:1px solid #c94c42;background:linear-gradient(180deg,#d4443a 0%,#661e16 125%)}
a.hbtn.ghost{background:rgba(0,0,0,.25);border-color:var(--line)}
a.hbtn{white-space:nowrap}
a.hbtn.sm{color:var(--b200);background:rgba(0,0,0,.3);border-color:var(--line)}a.hbtn.sm:hover{color:#fff0f0;border-color:var(--b300)}
header.top .acts{display:flex;align-items:center;gap:8px}header.top .acts a.hbtn{min-width:96px;justify-content:center}
header.top .logo span br.m{display:none}
@media (max-width:440px){header.top .acts a.hbtn{min-width:0}header.top{gap:6px;padding:10px 8px}header.top .logo{gap:5px}header.top .logo img{height:30px}header.top .logo span{font-size:15px;padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.15;padding-bottom:2px}header.top .logo span br.m{display:inline}header.top .acts{gap:4px;flex:0 0 auto}a.hbtn{padding:6px 8px;font-size:12px}}
@media (max-width:370px){header.top{gap:4px;padding:10px 6px}a.hbtn{padding:6px 6px;font-size:11.5px}header.top .logo span{font-size:14px}}
@media (max-width:340px){header.top .logo span{display:none}}
.pg-acc main{max-width:1180px;margin:0 auto;padding:20px 16px 40px;display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:820px){.pg-acc main{grid-template-columns:1fr}header.top .who{display:none}}
.full{grid-column:1/-1}main>*{min-width:0}
.pg-acc .card{position:relative;padding:20px;border-radius:14px;background:linear-gradient(145deg,rgba(58,12,12,.82),rgba(20,6,6,.9));border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.card h2{margin:0 0 14px;font-size:18px;color:var(--b200);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .tag{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(185,54,54,.3);color:var(--b200)}
.card h2 .more{margin-left:auto;font-size:13px;font-weight:600;color:var(--b300);text-decoration:none}.card h2 .more:hover{color:var(--text)}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
dt{color:var(--muted)}dd{margin:0;word-break:break-word}
.ok{color:var(--ok)}.warn{color:var(--warn)}
.alert{grid-column:1/-1;display:block;padding:12px 14px;border-radius:10px;font-size:14px}
.alert a{color:inherit;font-weight:700}
.alert.warn{background:rgba(160,100,10,.25);border:1px solid rgba(255,210,138,.45);color:#ffeccc}
.alert.good{background:rgba(20,90,50,.45);border:1px solid rgba(120,220,160,.45);color:#dcffe9}
.field{margin-bottom:12px}
.field label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--b300);margin-bottom:5px}
.field label small{font-weight:400;color:var(--muted);font-size:12px}
.pg-acc input{width:100%;padding:10px 12px;font:inherit;color:var(--text);background:rgba(15,4,4,.65);border:1px solid rgba(233,143,143,.28);border-radius:9px;outline:none}
.pg-acc input:focus{border-color:var(--b300);box-shadow:0 0 0 3px rgba(233,143,143,.2)}
.pg-acc input::placeholder{color:rgba(217,180,176,.55)}
.btn{padding:11px 18px;border:1px solid #c94c42;border-radius:10px;cursor:pointer;font:inherit;font-weight:700;color:#fff0f0;text-decoration:none;display:inline-block;background:linear-gradient(180deg,#d4443a 0%,#661e16 125%);box-shadow:inset 0 1px rgba(255,255,255,.3),0 4px 14px rgba(180,20,20,.28)}
.btn:hover{filter:brightness(1.08)}.btn[disabled]{opacity:.6;cursor:not-allowed}
.note{margin:0 0 12px;padding:9px 11px;border-radius:9px;font-size:12.5px;color:#ffe3df;background:rgba(185,54,54,.16);border:1px dashed rgba(233,143,143,.45)}
.res{margin-top:10px;font-size:13.5px;min-height:1.2em}.res.e{color:var(--err)}.res.s{color:var(--ok)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid rgba(233,143,143,.15)}th{color:var(--b300);font-weight:600;font-size:12.5px}
.tw{overflow-x:auto}
.muted{color:var(--muted)}.small{font-size:12.5px}
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.pager button{min-width:34px;padding:5px 10px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);background:rgba(0,0,0,.3);border:1px solid var(--line)}
.pager button.on{color:#fff0f0;background:var(--b600);border-color:#c94c42}.pager button[disabled]{opacity:.4;cursor:default}
.pager span{font-size:12.5px;color:var(--muted);margin:0 4px}
.pg-acc main.sec{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.pg-acc main.sec{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.pg-acc main.sec{grid-template-columns:1fr}}
main.sec .card:not(.full){display:flex;flex-direction:column}main.sec form{flex:1;display:flex;flex-direction:column}main.sec form .btn{margin-top:auto;align-self:flex-start}
/* thông tin tài khoản (account.html) */
.prof{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ava{flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff0f0;background:radial-gradient(circle at 50% 35%,#d4443a,#6b1818 70%);border:2px solid rgba(255,190,190,.55);box-shadow:0 0 0 4px rgba(138,32,32,.4)}
.prof .nm{font-size:24px;font-weight:800;line-height:1.2;word-break:break-all}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.badge{font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid}
.badge.g{color:var(--ok);border-color:rgba(123,224,165,.45);background:rgba(40,160,90,.15)}.badge.w{color:var(--warn);border-color:rgba(255,210,138,.45);background:rgba(200,140,30,.15)}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stat{padding:12px 14px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid rgba(233,143,143,.18)}
.stat .k{font-size:12.5px;color:var(--muted)}.stat .v{font-size:17px;font-weight:700;margin-top:2px;word-break:break-word}
.chars{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.char{padding:14px;border-radius:12px;background:linear-gradient(160deg,rgba(185,54,54,.14),rgba(0,0,0,.3));border:1px solid var(--line)}
.char .t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.char .t b{font-size:18px}.char .lv{font-size:13px;font-weight:700;color:var(--gold)}
.char .on{margin-left:auto;font-size:12px;font-weight:700}.char .on.y{color:var(--ok)}.char .on.n{color:var(--muted)}
.char dl{margin-top:10px;font-size:13.5px;gap:4px 12px}
.sub-h{margin:18px 0 0;font-size:15px;color:var(--b300);display:flex;align-items:center;justify-content:space-between;gap:10px}
.char.top{border-color:rgba(212,94,94,.6);background:linear-gradient(160deg,rgba(185,54,54,.24),rgba(0,0,0,.3))}
.char .sv{font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;color:var(--b200);background:rgba(185,54,54,.3)}
.char .fpv{color:var(--gold);font-weight:700}
.allbtn{flex:0 0 auto;padding:4px 12px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--b200);background:rgba(0,0,0,.3);border:1px solid var(--line)}
.allbtn:hover{color:#fff0f0;border-color:var(--b300)}
#info-card{display:flex;flex-direction:column}#info{flex:1;display:flex;flex-direction:column}
.nochar{flex:1;min-height:150px;margin-top:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;border-radius:12px;text-align:center;color:var(--muted);background:rgba(0,0,0,.22);border:1px dashed var(--line)}.nochar p{margin:0}
/* thẻ "Bảo mật tài khoản" ở cột phải (chỗ thẻ Ví của VLH5) */
.secl{display:grid;gap:10px}
.secr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid rgba(233,143,143,.18)}
.secr .k{flex:1;min-width:0}.secr .k b{display:block;font-size:15px}.secr .k span{font-size:12.5px}
.secr a{flex:0 0 auto;padding:6px 12px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;color:var(--b200);background:rgba(0,0,0,.3);border:1px solid var(--line)}
.secr a:hover{color:#fff0f0;border-color:var(--b300)}

/* ===== V10-06: thẻ ví / nạp — chép nguyên VLH5 account.html (chữ ví màu vàng) ===== */
.card.pay{border-color:rgba(212,94,94,.5)}
.card.pay h2{font-size:21px;color:var(--gold)}
.card.pay h2 svg{width:24px;height:24px;fill:var(--gold)}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:6px 0 12px}
.pack{position:relative;text-align:left;padding:10px 9px 9px;border-radius:11px;cursor:pointer;font:inherit;color:var(--text);background:rgba(185,54,54,.12);border:1px solid var(--line);transition:transform .12s,border-color .12s,box-shadow .12s}
.pack:hover{transform:translateY(-2px);border-color:var(--b300)}
.pack b{display:block;font-size:14.5px;color:var(--gold);white-space:nowrap}.pack .p{display:block;margin-top:2px;font-size:15px;font-weight:700;color:var(--text)}.pack .bn{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:rgba(123,224,165,.18);color:var(--ok)}
.pack .kn{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--muted)}.pack .kn:empty{display:none}.pack.on .kn{color:#fff0f0}
.conv{margin:0;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid var(--line)}
.conv .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:3px 0;font-size:13.5px;color:var(--muted)}.conv .r b{color:var(--text);white-space:nowrap}
.conv .r.tot{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:15px;font-weight:700;color:var(--text)}.conv .r.tot b{font-size:19px;color:var(--gold)}
.conv p{margin:6px 0 0;font-size:12px;color:var(--muted)}
.bal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;padding:10px 14px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid rgba(233,143,143,.18)}.bal span{font-size:13px;color:var(--muted)}.bal b{font-size:24px;color:var(--gold)}
.pack.on{border-color:var(--b400);background:rgba(185,54,54,.4);box-shadow:0 0 0 2px rgba(212,94,94,.45),0 6px 18px rgba(120,10,10,.35)}
.btn.gold{color:var(--gold);font-size:15px;padding:10px 18px;white-space:nowrap}
.payrow{display:flex;gap:10px}.payrow input{flex:1;min-width:0}
@media (max-width:480px){.payrow{flex-direction:column}.payrow .btn{align-self:flex-start}}
.order{margin-top:14px;padding:14px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.order .hot{display:inline-block;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px;animation:payhot 1s ease-in-out infinite}
@keyframes payhot{0%,100%{color:#ff6a5e;background:rgba(200,30,30,.15);box-shadow:0 0 0 1px rgba(255,90,80,.45)}50%{color:#fff0f0;background:rgba(220,40,40,.6);box-shadow:0 0 12px 2px rgba(255,70,60,.75)}}
@media (prefers-reduced-motion:reduce){.order .hot{animation:none;color:#ff6a5e;box-shadow:0 0 0 1px rgba(255,90,80,.6)}}
.order .code{font-family:ui-monospace,Consolas,monospace;font-size:20px;font-weight:700;color:var(--gold);letter-spacing:1px}
.ch{display:grid;grid-template-columns:auto 1fr;gap:14px;margin-top:12px;align-items:start}.ch img{width:190px;border-radius:8px;background:#fff}
@media (max-width:520px){.ch{grid-template-columns:1fr}.ch img{width:100%;max-width:260px}}
.st{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.08);white-space:nowrap}
.st.credited{background:rgba(40,160,90,.25);color:var(--ok)}.st.pending{background:rgba(200,140,30,.25);color:var(--warn)}.st.paid{background:rgba(60,120,220,.25);color:#a9c8ff}
/* V10-06 riêng VKDM: nút chép + bảng gói trong game */
.cp{margin-left:6px;padding:1px 8px;border-radius:6px;border:0;font:inherit;font-size:12px;font-weight:700;cursor:pointer;color:#fff0f0;background:var(--b600)}
.gp td.v{color:var(--gold);font-weight:700;white-space:nowrap}.gp-note{margin:10px 0 0}.x2{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:700;padding:0 7px;border-radius:999px;background:rgba(123,224,165,.18);color:var(--ok)}

/* =====================================================================================================================
   V27-17 (07/11/2026): giao diện mới theo trang chủ tải game (tools\web_vkdm): tím đêm + vàng kim, tiêu đề Grenze Gotisch, chữ Be Vietnam Pro,
   thanh trên kiểu nav trang chủ (Trang chủ / Tải game / Tài khoản / Bảo mật + nút Nạp lục giác), thẻ kính tối viền vàng, nút đỏ viền vàng.
   Chỉ PHỦ lên bản V10 ở trên (giữ nguyên id / class mà acc.js dùng); đổi bảng màu qua biến --b*. */
:root{--b200:#f6dca0;--b300:#f2c66d;--b400:#d9a441;--b500:#c8202e;--b600:#9c1424;--b700:#6d0f1c;--b800:#3a1430;--b900:#1c0f2a;--b950:#0f0a18;
  --ink:#0f0a18;--text:#f1ecf7;--muted:#bdb6cd;--line:rgba(217,164,65,.32);--edge:#d9a441;--gold:#f2c66d;--gold2:#d9a441;--kim3:#8a5a16;
  --chu:"Be Vietnam Pro",system-ui,"Segoe UI",Roboto,Arial,sans-serif;--gothic:"Grenze Gotisch","Palatino Linotype",Georgia,serif}
html,body{font-family:var(--chu)}
.bg{background:#0f0a18 url(/account/static/bg.jpg) center 22%/cover no-repeat;filter:blur(2px) saturate(1.05) brightness(.62)}
.shade{background:radial-gradient(ellipse 90% 70% at 50% 30%,rgba(15,10,24,.35),rgba(15,10,24,.86) 75%),linear-gradient(180deg,rgba(15,10,24,.45),rgba(15,10,24,.92))}
.pg-acc .shade{background:linear-gradient(180deg,rgba(15,10,24,.8),rgba(15,10,24,.95))}
.petals,.brand .embers{display:none}
/* tiêu đề trang đăng nhập: logo mới + dòng phụ */
.brand::before{background:radial-gradient(ellipse at center,rgba(15,10,24,.7) 0%,rgba(15,10,24,.4) 45%,rgba(15,10,24,0) 72%)}
.brand-logo{display:block;width:min(70vw,300px);height:auto;margin:0 auto -4px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.65)) drop-shadow(0 0 20px rgba(255,120,40,.3))}
.brand .sub{font-family:var(--gothic);font-weight:800;letter-spacing:2px;font-size:28px;color:#ffe9b0;filter:none;text-shadow:0 2px 0 #3c0a0a,0 0 14px rgba(255,170,60,.45)}
.brand .sub::before,.brand .sub::after{background:radial-gradient(circle at calc(100% - 3.5px) 50%,#fff1c4 0 2.6px,transparent 3.2px),linear-gradient(90deg,transparent,var(--b400) 60%,#fff1c4) center/100% 2px no-repeat}
/* thẻ */
.pg-login .card,.pg-acc .card{background:linear-gradient(180deg,rgba(30,18,46,.9),rgba(14,8,24,.94));border:1px solid rgba(217,164,65,.42);
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,236,190,.12)}
.pg-login .card::before,.pg-login .card::after{border-color:var(--b300)}
.pg-acc .card::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--b300) 30%,#fff1c4 50%,var(--b300) 70%,transparent)}
.card h2{font-family:var(--gothic);font-weight:800;font-size:24px;letter-spacing:.02em;color:var(--gold);text-shadow:0 2px 0 rgba(60,10,10,.8)}
.card h2 .more{font-family:var(--chu);letter-spacing:0;text-shadow:none;color:var(--b300)}
.card.pay h2{font-size:26px}
h2.ft{font-family:var(--gothic);font-weight:800;font-size:22px;color:var(--gold)}
/* tab đăng nhập / quên mật khẩu: viên vàng như tab thiết bị trang tải game */
.tabs{background:rgba(0,0,0,.45);border-color:rgba(217,164,65,.4)}
.tabs::before{background:linear-gradient(180deg,#fff1bd,var(--b400));box-shadow:0 2px 10px rgba(242,198,109,.35)}
.tabs button{color:#cfc6dc}.tabs button:hover{color:var(--gold);background:rgba(242,198,109,.08)}
.tabs button[aria-selected=true]{color:#2a1405}
/* ô nhập */
.input input,.pg-acc input{background:rgba(10,6,18,.72);border-color:rgba(217,164,65,.3)}
.input input::placeholder,.pg-acc input::placeholder{color:rgba(189,182,205,.6)}
.input input:focus,.pg-acc input:focus{border-color:var(--b300);box-shadow:0 0 0 3px rgba(242,198,109,.18)}
.input input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #160d24 inset}
.field label{color:var(--b300)}
/* nút chính: đỏ viền vàng như nút Tải game */
.btn,.pg-login .btn{color:#fff8e6;border:1px solid var(--b400);background:linear-gradient(180deg,#e33a33,#b0111c 55%,#6e0912);
  box-shadow:inset 0 1px rgba(255,230,190,.35),0 6px 18px rgba(200,30,40,.3),0 0 0 1px rgba(242,198,109,.2);text-shadow:0 1px 0 #5c0810}
.btn:hover,.pg-login .btn:hover{filter:brightness(1.1);box-shadow:inset 0 1px rgba(255,230,190,.4),0 8px 24px rgba(220,50,40,.45),0 0 14px rgba(242,198,109,.35)}
.btn.gold{color:var(--gold)}
.hint button,.lnk{color:var(--b300)}.hint button:hover,.lnk:hover{color:#fff}
.note{color:#efe6f7;background:rgba(242,198,109,.08);border-color:rgba(217,164,65,.4)}
.msg{background:rgba(120,18,30,.6)}
/* bảng, khối số liệu, thẻ nhân vật, gói nạp */
th{color:var(--b300)}th,td{border-bottom-color:rgba(217,164,65,.16)}
.stat,.secr,.bal,.conv,.order{background:rgba(0,0,0,.32);border-color:rgba(217,164,65,.22)}
.char{background:linear-gradient(160deg,rgba(242,198,109,.06),rgba(0,0,0,.32));border-color:rgba(217,164,65,.3)}
.char.top{border-color:var(--b400);background:linear-gradient(160deg,rgba(200,32,46,.18),rgba(0,0,0,.32))}
.char .sv{color:var(--gold);background:rgba(242,198,109,.12)}
.ava{color:#2a1405;background:radial-gradient(circle at 50% 35%,#fff1bd,var(--b400) 70%);border-color:rgba(255,236,190,.7);box-shadow:0 0 0 4px rgba(217,164,65,.25),0 0 18px rgba(242,198,109,.35)}
.pack{background:rgba(242,198,109,.06);border-color:rgba(217,164,65,.3)}.pack:hover{border-color:var(--b300)}
.pack.on{border-color:var(--b300);background:rgba(200,32,46,.32);box-shadow:0 0 0 2px rgba(242,198,109,.45),0 6px 18px rgba(120,10,20,.35)}
.allbtn,.secr a,.pager button{color:var(--b300);border-color:rgba(217,164,65,.35)}.allbtn:hover,.secr a:hover{color:#fff;border-color:var(--b300)}
.pager button.on{color:#2a1405;background:linear-gradient(180deg,#fff1bd,var(--b400));border-color:var(--b300)}
.cp{color:#2a1405;background:var(--b300)}
.nochar{border-color:rgba(217,164,65,.3)}
/* thanh trên (account / security / nap): như nav trang chủ */
header.top{gap:14px;padding:0 clamp(12px,3vw,40px);min-height:62px;background:linear-gradient(180deg,rgba(16,9,28,.97),rgba(14,8,24,.92));border-bottom:0;box-shadow:0 8px 26px rgba(0,0,0,.5)}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,164,65,.5) 15%,rgba(255,241,196,.9) 50%,rgba(217,164,65,.5) 85%,transparent);box-shadow:0 0 10px rgba(242,198,109,.35)}
header.top .logo img{height:40px;border-radius:10px;box-shadow:0 0 0 1px rgba(242,198,109,.55),0 0 14px rgba(255,140,40,.35);filter:none}
header.top .logo span{font-family:var(--gothic);font-weight:800;font-size:22px;background:linear-gradient(180deg,#fff3c9,var(--gold) 50%,var(--b400));-webkit-background-clip:text;background-clip:text;color:transparent}
header.top .logo span br.m{display:none}
.tnav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);margin-left:auto}   /* V27-20: menu dồn sang phải như trang chủ */
header.top .sp{display:none}
header.top .who{padding-left:clamp(14px,2vw,28px);border-left:1px solid rgba(217,164,65,.3)}
.tnav a{position:relative;padding:8px 2px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#eadfcb;white-space:nowrap;transition:color .2s,text-shadow .2s}
.tnav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 30%,#fff1c4 50%,var(--gold) 70%,transparent);transition:left .3s,right .3s}
.tnav a:hover,.tnav a[aria-current=page]{color:var(--gold);text-shadow:0 0 12px rgba(255,170,60,.55)}
.tnav a:hover::after,.tnav a[aria-current=page]::after{left:-6px;right:-6px}
header.top .who{color:var(--muted)}
a.hbtn,button.hbtn{border-radius:99px;font-weight:700;color:#eadfcb;border:1px solid rgba(242,198,109,.38);background:rgba(20,12,32,.6);transition:color .2s,border-color .2s,box-shadow .2s}
a.hbtn:hover{color:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(242,198,109,.3)}
a.hbtn.nap{position:relative;isolation:isolate;border:0;border-radius:0;color:#2a1405;background:none;padding:7px 22px;transition:transform .25s,filter .25s}
a.hbtn.nap::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);background:linear-gradient(180deg,#fff3c7,var(--gold) 45%,var(--b400))}
a.hbtn.nap:hover{color:#2a1405;box-shadow:none;transform:translateY(-1px) scale(1.05);filter:drop-shadow(0 0 8px rgba(255,200,90,.8))}
a.hbtn.ghost{background:transparent}
header.top .acts a.hbtn{min-width:0}
/* chân trang: link cộng đồng (V27-15) */
footer,.aft{background:rgba(15,10,24,.7);border:1px solid rgba(217,164,65,.25);color:var(--muted)}
.aft{max-width:1180px;margin:0 auto 28px;width:calc(100% - 32px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 16px;border-radius:14px;font-size:13px}
.aft p{margin:0}
.ft-lk{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ft-lk a{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;font-size:13px;font-weight:700;text-decoration:none;color:#eadfcb;background:rgba(30,18,44,.8);border:1px solid rgba(242,198,109,.35);transition:color .2s,border-color .2s}
.ft-lk a:hover{color:#fff;border-color:var(--gold)}
.ft-lk svg{width:16px;height:16px;fill:var(--gold)}
.pg-login footer{display:grid;justify-items:center;gap:8px;padding:10px 16px;border-radius:14px}
.pg-login .site-lk{display:flex;gap:16px;font-size:13px}.pg-login .site-lk a{color:var(--b300);font-weight:700;text-underline-offset:3px}
@media (max-width:900px){header.top .sp{display:block}header.top{flex-wrap:wrap;row-gap:0;padding-top:8px}.tnav{order:5;width:100%;margin:0;padding:2px 0 6px;justify-content:space-between;gap:8px;overflow-x:auto;scrollbar-width:none}.tnav::-webkit-scrollbar{display:none}}
@media (max-width:440px){header.top .logo span{font-size:17px;white-space:nowrap}header.top .logo img{height:32px}.tnav a{font-size:12px;letter-spacing:.02em}a.hbtn.nap{padding:6px 16px}}
@media (max-width:370px){header.top .logo span{display:none}}
@media (prefers-reduced-motion:reduce){a.hbtn.nap,.tnav a::after{transition:none}}