@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{
  --kem:#FFE9D2; --kem2:#FFF6EA; --muc:#2A1512; --do:#A80500; --do2:#7E0400;
  --xam:#7A6A62; --vien:#EBD3B9; --xanh:#2F7A4B; --vang:#B7791F; --trang:#fff;
  --r:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--kem:#1E100D;--kem2:#2A1815;--muc:#FBEBDD;--do:#FF6A5C;--do2:#E0483A;--xam:#C2AEA3;--vien:#4A2F28;--xanh:#6FD39A;--vang:#F0B75B;--trang:#2A1815}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--kem);color:var(--muc);line-height:1.6;min-height:100vh}
h1,h2,h3{font-family:'Playfair Display','Noto Serif',serif;font-weight:700;line-height:1.25}
a{color:var(--do)}
.top{background:var(--muc);color:var(--kem);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.top b{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:.2px}
.top small{opacity:.75;font-size:12.5px}
.top button{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--kem);padding:7px 14px;border-radius:99px;font:inherit;font-size:13px;cursor:pointer}
.wrap{max-width:980px;margin:0 auto;padding:28px 16px 64px}
.card{background:var(--kem2);border:1px solid var(--vien);border-radius:var(--r);padding:22px}
.card+.card,.stats+.card,.card+.stats{margin-top:18px}
.login{max-width:430px;margin:36px auto}
.login h1{font-size:26px;text-align:center}
.login .sub{text-align:center;color:var(--xam);font-size:14px;margin:6px 0 22px}
label{display:block;font-weight:600;font-size:13.5px;margin:14px 0 6px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--vien);border-radius:12px;background:var(--trang);color:var(--muc);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--do)}
textarea{resize:vertical;line-height:1.55}
.btn{display:inline-block;width:100%;margin-top:18px;padding:14px 18px;border:0;border-radius:99px;background:var(--do);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{background:var(--do2)}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.nho{width:auto;margin:0;padding:10px 18px;font-size:13.5px}
.btn.vien{background:transparent;color:var(--do);border:1.5px solid var(--do)}
.loi{background:#fdecea;border:1px solid #f1b5ae;color:#8a1a10;padding:10px 14px;border-radius:12px;font-size:14px;margin-top:14px;display:none}
.ok{background:#e9f6ee;border:1px solid #b6e0c6;color:#1d6a3c;padding:10px 14px;border-radius:12px;font-size:14px;margin-top:14px;display:none}
.note{font-size:12.5px;color:var(--xam);margin-top:14px;text-align:center}
.hi{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.hi h1{font-size:26px}
.chip{background:var(--muc);color:var(--kem);border-radius:14px;padding:10px 16px;text-align:right}
.chip small{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;opacity:.7}
.chip b{font-size:18px;letter-spacing:1px}
.bac{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:14px;color:var(--xam)}
.bac b{color:var(--muc);font-family:'Playfair Display',serif;font-size:18px}
.bar{height:8px;border-radius:99px;background:var(--vien);overflow:hidden;flex:1;min-width:140px}
.bar i{display:block;height:100%;background:var(--do);width:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:var(--kem2);border:1px solid var(--vien);border-radius:var(--r);padding:16px;text-align:center}
.stat b{display:block;font-family:'Playfair Display',serif;font-size:26px}
.stat span{font-size:12.5px;color:var(--xam)}
.stat.tien b{color:var(--do)}
h2{font-size:20px;margin-bottom:6px}
.mota{color:var(--xam);font-size:14px;margin-bottom:12px}
.hang{display:flex;gap:8px}
.hang input{flex:1}
.hang .btn{margin-top:0;width:auto;white-space:nowrap}
.nhan{background:#fff3d6;color:#4a3208;border:1px dashed var(--vang);border-radius:12px;padding:10px 14px;font-size:13px;margin:10px 0}
.bang{overflow-x:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{text-align:left;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--xam);padding:10px 8px;border-bottom:1px solid var(--vien)}
td{padding:11px 8px;border-bottom:1px solid var(--vien)}
td.r,th.r{text-align:right}
.rong{text-align:center;color:var(--xam);padding:28px 8px;font-size:14px}
details{border-top:1px solid var(--vien);padding:12px 0}
details:first-of-type{border-top:0}
summary{cursor:pointer;font-weight:600}
details p,details li{font-size:14px;color:var(--xam);margin-top:8px}
details ul{padding-left:20px}
.foot{margin-top:30px;text-align:center;font-size:12.5px;color:var(--xam);line-height:1.7}
.an{display:none}
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--vien)}
.tag.xanh{background:#dff2e6;color:#1d6a3c}.tag.vang{background:#fff1d1;color:#8a5a0a}.tag.do{background:#fbdcd8;color:#8a1a10}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}.hang{flex-direction:column}.hang .btn{width:100%}.chip{text-align:left}}